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/playlist/usePlaylistListSync.ts

@@ -0,0 +1,107 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+import type { Playlist } from "../../model.ts";
+import { useWS } from "../ws/useWS.ts";
+
+interface PlaylistListSyncOptions {
+  /** Keep private playlists visible (caller is the owner). */
+  isOwner?: boolean;
+  /**
+   * Only act on created/updated events for playlists owned by this user.
+   * Leave undefined to act on any playlist already in the list.
+   */
+  ownerId?: string;
+  /**
+   * Set true for "followed" lists: never prepend newly created playlists
+   * (followed membership is managed separately), but still update/remove.
+   */
+  noNewEntries?: boolean;
+  /**
+   * When true, don't re-add a playlist that isn't in the list (idx === -1).
+   * Use this when the caller handles re-insertion itself (e.g. with a position
+   * map, like the dumps/votes pattern in UserPublicProfile).
+   */
+  skipReinsert?: boolean;
+}
+
+/**
+ * Keeps a playlist list in sync with real-time WS events:
+ *  - lastPlaylistEvent "created"  → prepend (unless noNewEntries)
+ *  - lastPlaylistEvent "updated"  → update in-place, or remove if now private
+ *  - lastPlaylistEvent "deleted"  → remove
+ *  - deletedPlaylistIds growing   → filter
+ */
+export function usePlaylistListSync(
+  setPlaylists: (fn: (prev: Playlist[]) => Playlist[]) => void,
+  options?: PlaylistListSyncOptions,
+): void {
+  const { lastPlaylistEvent, deletedPlaylistIds } = useWS();
+
+  const setPlaylistsRef = useRef(setPlaylists);
+  const optionsRef = useRef(options);
+  useLayoutEffect(() => {
+    setPlaylistsRef.current = setPlaylists;
+    optionsRef.current = options;
+  });
+
+  useEffect(() => {
+    if (!lastPlaylistEvent) return;
+    const { isOwner, ownerId, noNewEntries } = optionsRef.current ?? {};
+    const ev = lastPlaylistEvent;
+
+    setPlaylistsRef.current((prev) => {
+      if (ev.type === "created" && ev.playlist) {
+        if (noNewEntries) return prev;
+        if (ownerId && ev.playlist.userId !== ownerId) return prev;
+        if (!ev.playlist.isPublic && !isOwner) return prev;
+        if (prev.some((p) => p.id === ev.playlist!.id)) return prev;
+        return [ev.playlist, ...prev];
+      }
+
+      if (ev.type === "updated" && ev.playlist) {
+        const idx = prev.findIndex((p) => p.id === ev.playlist!.id);
+        if (idx === -1) {
+          // Playlist was removed (went private). Re-add if it's now public and
+          // visible to this list. noNewEntries lists (followed) skip this since
+          // we can't verify the follow relationship is still active.
+          if (noNewEntries) return prev;
+          if (ownerId && ev.playlist.userId !== ownerId) return prev;
+          if (!ev.playlist.isPublic && !isOwner) return prev;
+          // skipReinsert: caller handles re-insertion at the correct position.
+          if (optionsRef.current?.skipReinsert) return prev;
+          return [ev.playlist, ...prev];
+        }
+        // Remove if it became private and the viewer can't see private playlists
+        if (!ev.playlist.isPublic && !isOwner) {
+          return prev.filter((p) => p.id !== ev.playlist!.id);
+        }
+        const next = [...prev];
+        next[idx] = ev.playlist;
+        return next;
+      }
+
+      if (ev.type === "deleted") {
+        return prev.filter((p) => p.id !== ev.playlistId);
+      }
+
+      if (ev.type === "dumps_updated" && ev.dumpIds) {
+        const idx = prev.findIndex((p) => p.id === ev.playlistId);
+        if (idx === -1) return prev;
+        const next = [...prev];
+        next[idx] = {
+          ...next[idx],
+          dumpCount: ev.dumpCount ?? ev.dumpIds.length,
+        };
+        return next;
+      }
+
+      return prev;
+    });
+  }, [lastPlaylistEvent]);
+
+  useEffect(() => {
+    if (deletedPlaylistIds.size === 0) return;
+    setPlaylistsRef.current((prev) =>
+      prev.filter((p) => !deletedPlaylistIds.has(p.id))
+    );
+  }, [deletedPlaylistIds]);
+}