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/chat/draft.ts

@@ -0,0 +1,43 @@
+import type { ChatReplyTarget } from "../../contexts/ws/WSContext.ts";
+
+// The draft and reply target outlive the chat — closing it, or reloading the
+// tab, keeps a half-written message.
+export interface StoredDraft {
+  draft: string;
+  replyTarget: ChatReplyTarget | null;
+}
+
+function draftKey(userId: string): string {
+  return `chat-draft:${userId}`;
+}
+
+export function readDraft(userId: string | undefined): StoredDraft {
+  if (userId) {
+    try {
+      const raw = sessionStorage.getItem(draftKey(userId));
+      const parsed = raw ? JSON.parse(raw) : null;
+      if (parsed && typeof parsed.draft === "string") {
+        return { draft: parsed.draft, replyTarget: parsed.replyTarget ?? null };
+      }
+    } catch {
+      // Blocked storage or a mangled entry: start empty.
+    }
+  }
+  return { draft: "", replyTarget: null };
+}
+
+export function writeDraft(
+  userId: string | undefined,
+  value: StoredDraft,
+): void {
+  if (!userId) return;
+  try {
+    if (value.draft || value.replyTarget) {
+      sessionStorage.setItem(draftKey(userId), JSON.stringify(value));
+    } else {
+      sessionStorage.removeItem(draftKey(userId));
+    }
+  } catch {
+    // The draft just won't survive a reload.
+  }
+}

src/utils/chat/message.ts

@@ -0,0 +1,26 @@
+import { t } from "@lingui/core/macro";
+import { markdownToPlainText } from "./text.ts";
+import { isEmojiOnly } from "../editor/text.ts";
+
+// Keep in sync with MAX_CHAT_LENGTH in api/services/chat-service.ts.
+export const MAX_CHAT_LENGTH = 2000;
+// The counter only shows once a message is getting near the limit.
+export const COUNT_FROM = 1800;
+
+// What the server holds a message to: its length once trimmed.
+export function sendable(draft: string): boolean {
+  const body = draft.trim();
+  return body.length > 0 && body.length <= MAX_CHAT_LENGTH;
+}
+
+// A message of nothing but a few emoji is shown large, as chats do.
+export function messageTextClass(body: string): string {
+  return isEmojiOnly(body)
+    ? "chat-message-text chat-message-text--jumbo"
+    : "chat-message-text";
+}
+
+// One line of plain text, for reply previews.
+export function snippet(body: string): string {
+  return markdownToPlainText(body, t`image`);
+}

src/utils/chat/text.ts

@@ -0,0 +1,34 @@
+// Text helpers for the live chat.
+
+// Mirrors MENTION_RE in api/services/notification-service.ts.
+const MENTION_RE = /(?<![[(\w])@(\w+)/g;
+
+/** Whether `body` @-mentions `username` (case-insensitively), by the same rule
+ * the server uses to send mention notifications. */
+export function mentionsUser(body: string, username: string): boolean {
+  const target = username.toLowerCase();
+  for (const m of body.matchAll(MENTION_RE)) {
+    if (m[1].toLowerCase() === target) return true;
+  }
+  return false;
+}
+
+/**
+ * Flattens chat markdown to one line of plain text, for the reply previews:
+ * images become a label, links their text, and markup characters go. Also
+ * copes with a body the server cut short mid-link, which would otherwise show
+ * a dangling half-URL.
+ */
+export function markdownToPlainText(md: string, imageLabel: string): string {
+  return md
+    // A truncated image or link at the very end: drop the unfinished target.
+    .replace(/!\[([^\]]*)\]\([^)]*$/, (_, alt: string) => alt || imageLabel)
+    .replace(/(^|[^!])\[([^\]]*)\]\([^)]*$/, "$1$2")
+    .replace(/!\[[^\]]*$/, "")
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, (_, alt: string) => alt || imageLabel)
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/^\s{0,3}(#{1,6}|>|[-*+]|\d+\.)\s+/gm, "")
+    .replace(/```\w*|\*\*|__|~~|[*`]/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}

src/utils/chat/time.ts

@@ -0,0 +1,39 @@
+// Timestamps in the chat: day separators and the grouped-message gutter.
+
+import { t } from "@lingui/core/macro";
+import { i18n } from "../../i18n.ts";
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+}
+
+// Human label for a day separator: "Today"/"Yesterday" for the two most recent
+// days, otherwise a localized full date.
+export function dayLabel(date: Date): string {
+  const now = new Date();
+  if (isSameDay(date, now)) return t`Today`;
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  if (isSameDay(date, yesterday)) return t`Yesterday`;
+  return date.toLocaleDateString(i18n.locale, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: now.getFullYear() === date.getFullYear() ? undefined : "numeric",
+  });
+}
+
+// Hours and minutes only, for the narrow gutter beside a grouped message — the
+// day period ("PM") is dropped to fit; its tooltip has the full timestamp.
+export function clockTime(date: Date): string {
+  return new Intl.DateTimeFormat(i18n.locale, {
+    hour: "numeric",
+    minute: "2-digit",
+  }).formatToParts(date)
+    .filter((part) => part.type !== "dayPeriod")
+    .map((part) => part.value)
+    .join("")
+    .trim();
+}