v3: src/ gets one layout rule and keeps to it — each layer holds one kind of module, and every layer is split into the same domains — the previous pass sorted components into folders but left hooks, helpers and a barrel inside them, kept hooks/, utils/ and contexts/ flat, and still grouped most tests by theme. The rule: components/ holds only components (.tsx), contexts/ holds FooContext.ts + FooProvider.tsx pairs, hooks/ every hook, utils/ every non-React module, pages/ one component per route and nothing else. Each of components/, contexts/, hooks/ and utils/ is split into the same domains — auth, category, chat, comment, dump, editor, feed, form, layout, player, playlist, profile, social, theme, ws — plus shared/ for what belongs to no one domain, so the chat is components/chat, contexts/chat, hooks/chat and utils/chat. components/ui becomes components/shared to match. Out of components/: useApiForm goes to hooks/form, chat's message.ts and time.ts to utils/chat (with chatDraft and chatText, now draft.ts and text.ts), the emoji skin tone to utils/editor, the remembered volume to utils/player; player/icons.tsx is PlayerIcons.tsx. components/form/index.ts is gone: everything is imported from its own file, FormProvider straight from react-hook-form, and expectOk sits beside friendlyFetchError in utils/shared/api.ts (apiError.ts), since pages that have no form used it too. Out of pages/: the index's feed views, tab bar and presence row move to components/feed; HotFeed and NewFeed, identical but for the sort, are one DumpFeed with an order prop, which also takes over MainFeedProps from pages/index/types.ts. App is a named export like everything else. Tests mirror the tree one file per module — test/<layer>/<domain>/<Module>.test.tsx — so the themed files (hooks/misc, data, editor, sync; utils/misc, text, storage, remote, journal; contexts/providers; pages/auth and UserSubpages; layout/Fabs) are split by subject, the setup each piece needs kept and the rest dropped; the floating-button test becomes one test per button, 627 tests now. The README states the rule. No behaviour changes; the catalogues only move their source references.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/hooks/shared/useDocumentTitle.ts

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+
+// The server injects the configured site name into both <title> and this meta
+// tag (see api/lib/static.ts / api/middleware/og.ts). Read it once at startup.
+// In the Vite dev server the placeholder isn't substituted, so fall back.
+function readSiteName(): string {
+  const meta = document.querySelector('meta[name="site-name"]')
+    ?.getAttribute("content")?.trim();
+  if (meta && meta !== "__SITE_NAME__") return meta;
+  return "gerbeur";
+}
+
+export const SITE_NAME = readSiteName();
+
+// The server injects the configured emoji into a <meta name="site-emoji"> tag.
+// In the Vite dev server it's substituted too; fall back to the default truck.
+function readSiteEmoji(): string {
+  const meta = document.querySelector('meta[name="site-emoji"]')
+    ?.getAttribute("content")?.trim();
+  if (meta && meta !== "__SITE_EMOJI__") return meta;
+  return "🚚";
+}
+
+export const SITE_EMOJI = readSiteEmoji();
+
+// The page title and the unread badge are set from different places (each
+// page, and the live-updates provider), so both are kept here and composed.
+// `null` base means no page has set one yet: keep the server-rendered title.
+let baseTitle: string | null = null;
+let badge = 0;
+
+function applyTitle() {
+  const base = baseTitle ?? document.title.replace(/^\(\d+\+?\) /, "");
+  document.title = badge > 0 ? `(${badge > 99 ? "99+" : badge}) ${base}` : base;
+}
+
+/**
+ * Keeps document.title in sync with the current page during client-side
+ * navigation. Without this the tab title only ever reflects the server-rendered
+ * <title> from the initial page load and goes stale on every SPA navigation.
+ *
+ * - Pass a non-empty string to show `<title> · <site name>`.
+ * - Pass `null` to show just the site name (home / generic pages).
+ * - Pass `undefined` while the page-specific title is still loading: the title
+ *   is left untouched, so a server-rendered OG title survives until data
+ *   arrives (avoids a flash to the bare site name on direct loads).
+ */
+export function useDocumentTitle(title: string | null | undefined): void {
+  useEffect(() => {
+    if (title === undefined) return;
+    baseTitle = title ? `${title} · ${SITE_NAME}` : SITE_NAME;
+    applyTitle();
+  }, [title]);
+}
+
+/** Prefixes the tab title with an unread count, e.g. "(3) Chat · gerbeur". */
+export function setTitleBadge(count: number): void {
+  if (count === badge) return;
+  badge = count;
+  applyTitle();
+}