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/utils/shared/thumbnailTint.ts

@@ -0,0 +1,68 @@
+/**
+ * Color and lettering for generated thumbnail placeholders.
+ *
+ * The tint is never painted on its own — it's mixed into the theme's surface
+ * color by CSS (`--thumb-tint`), so contrast against `--color-text` holds for
+ * any site color, in every style, in both light and dark.
+ */
+
+/**
+ * `accentColor` comes from a dumped page's `theme-color`, so it's
+ * attacker-controlled. Custom properties bypass CSS value parsing and get
+ * substituted verbatim wherever the var is used, so the canonical form is
+ * re-checked here before it ever reaches a style object.
+ */
+export function isSafeHex(value: string | undefined): value is string {
+  return !!value && /^#[0-9a-f]{6}$/.test(value);
+}
+
+/** FNV-1a — small, stable, and well spread across the hue circle. */
+function hashString(seed: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < seed.length; i++) {
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+}
+
+/** A stable hue for a string, so the same site always gets the same tint. */
+export function hueFromString(seed: string): string {
+  return `hsl(${hashString(seed) % 360} 55% 55%)`;
+}
+
+function hostnameOf(url: string | undefined): string | undefined {
+  if (!url) return undefined;
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * The page's own brand color when it declared a usable one, otherwise a hue
+ * derived from its hostname — so every card gets a tint, including rows saved
+ * before accent extraction existed. File dumps have no hostname to hash and
+ * pass `seed` (their filename) instead.
+ */
+export function tintFor(
+  { accentColor, url, seed }: {
+    accentColor?: string;
+    url?: string;
+    seed?: string;
+  },
+): string {
+  if (isSafeHex(accentColor)) return accentColor;
+  return hueFromString(seed ?? hostnameOf(url) ?? url ?? "");
+}
+
+/** The letter drawn when there's no favicon to show. */
+export function initialsFor(
+  siteName: string | undefined,
+  url: string | undefined,
+): string {
+  const source = siteName?.trim() || hostnameOf(url) || url || "";
+  const letter = [...source].find((ch) => /\p{L}|\p{N}/u.test(ch));
+  return (letter ?? "?").toUpperCase();
+}