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/dump/useDumpListSync.ts

@@ -0,0 +1,92 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+import type { Dump } from "../../model.ts";
+import { useWS } from "../ws/useWS.ts";
+
+interface DumpListSyncOptions {
+  /** Keep private dumps visible (caller is the owner). */
+  isOwner?: boolean;
+  /**
+   * Only re-insert dumps created by this user when they become visible again.
+   * Leave undefined to never re-insert (caller handles it, or no re-insertion needed).
+   */
+  ownerId?: string;
+  /**
+   * When true, don't re-add a dump that isn't in the list (idx === -1).
+   * Use this when the caller handles re-insertion itself (e.g. with a position map).
+   */
+  skipReinsert?: boolean;
+}
+
+/**
+ * Keeps a dump list in sync with real-time WS events:
+ *  - deletedDumpIds growing   → filter
+ *  - lastDumpEvent "updated"  → update in-place, or remove if now private
+ *  - lastDumpEvent for a not-in-list dump → prepend if ownerId matches and visible
+ *  - lastCommentEvent created/deleted → adjust the dump's commentCount
+ */
+export function useDumpListSync(
+  setDumps: (fn: (prev: Dump[]) => Dump[]) => void,
+  options?: DumpListSyncOptions,
+): void {
+  const { deletedDumpIds, lastDumpEvent, lastCommentEvent } = useWS();
+
+  // Keep refs up-to-date so closures in effects are never stale.
+  const setDumpsRef = useRef(setDumps);
+  const optionsRef = useRef(options);
+  useLayoutEffect(() => {
+    setDumpsRef.current = setDumps;
+    optionsRef.current = options;
+  });
+
+  useEffect(() => {
+    if (deletedDumpIds.size === 0) return;
+    setDumpsRef.current((prev) =>
+      prev.filter((d) => !deletedDumpIds.has(d.id))
+    );
+  }, [deletedDumpIds]);
+
+  useEffect(() => {
+    if (!lastDumpEvent) return;
+    const { isOwner, ownerId, skipReinsert } = optionsRef.current ?? {};
+    const dump = lastDumpEvent;
+
+    setDumpsRef.current((prev) => {
+      const idx = prev.findIndex((d) => d.id === dump.id);
+
+      if (idx !== -1) {
+        // Remove if it became private and the viewer can't see private dumps.
+        if (dump.isPrivate && !isOwner) {
+          return prev.filter((d) => d.id !== dump.id);
+        }
+        const next = [...prev];
+        next[idx] = dump;
+        return next;
+      }
+
+      // Dump not in list: only re-insert when ownerId is set and matches.
+      if (skipReinsert || !ownerId) return prev;
+      if (dump.userId !== ownerId) return prev;
+      if (dump.isPrivate && !isOwner) return prev;
+      return [dump, ...prev];
+    });
+  }, [lastDumpEvent]);
+
+  // commentCount counts non-deleted comments, so created → +1, deleted → −1.
+  // Edits don't change the count. Events only fire for public dumps.
+  useEffect(() => {
+    if (!lastCommentEvent) return;
+    const { type, dumpId } = lastCommentEvent;
+    if (type !== "created" && type !== "deleted") return;
+    const delta = type === "created" ? 1 : -1;
+    setDumpsRef.current((prev) => {
+      const idx = prev.findIndex((d) => d.id === dumpId);
+      if (idx === -1) return prev;
+      const next = [...prev];
+      next[idx] = {
+        ...next[idx],
+        commentCount: Math.max(0, next[idx].commentCount + delta),
+      };
+      return next;
+    });
+  }, [lastCommentEvent]);
+}