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/test/components/dump/DumpCard.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, vi } from "vitest";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { DumpCard } from "../../../components/dump/DumpCard.tsx";
-import { markDumpVisited } from "../../../utils/visited.ts";
+import { markDumpVisited } from "../../../utils/shared/visited.ts";
 import { makeCategory, makeDump, makeSession } from "../../fixtures.ts";
 import { currentPath, renderWithContexts } from "../../render.tsx";
 

src/test/components/dump/FilePreview.test.tsx

@@ -8,7 +8,7 @@ import {
   dumpFileUrl,
   dumpFileVersion,
   dumpThumbnailUrl,
-} from "../../../utils/urls.ts";
+} from "../../../utils/shared/urls.ts";
 
 describe("FilePreview", () => {
   const session = makeSession();

src/test/components/dump/JournalCard.test.tsx

@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { JournalCard } from "../../../components/dump/JournalCard.tsx";
 import { makeDump } from "../../fixtures.ts";
 import { currentPath, renderWithContexts } from "../../render.tsx";
-import { dumpThumbnailUrl } from "../../../utils/urls.ts";
+import { dumpThumbnailUrl } from "../../../utils/shared/urls.ts";
 
 describe("JournalCard", () => {
   const base = {

src/test/components/feed/FeedTabBar.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FeedTabBar } from "../../../components/feed/FeedTabBar.tsx";
+import type { Category } from "../../../model.ts";
+import { makeCategory, makeSession } from "../../fixtures.ts";
+import { currentPath, renderWithContexts } from "../../render.tsx";
+
+const categories: Category[] = [
+  makeCategory({ id: "c1", slug: "music", name: "Music" }),
+  makeCategory({ id: "c2", slug: "cinema", name: "Cinema" }),
+];
+
+describe("FeedTabBar", () => {
+  test("guests don't get Followed; tabs navigate within the scope", async () => {
+    const user = userEvent.setup();
+    renderWithContexts(<FeedTabBar />, {
+      route: "/music/hot",
+      path: "/:categorySlug/:feedTab",
+      categories,
+    });
+    expect(screen.queryByRole("button", { name: "Followed" })).not
+      .toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Hot" })).toHaveClass("active");
+    await user.click(screen.getByRole("button", { name: "Journal" }));
+    expect(currentPath()).toBe("/music/journal");
+  });
+
+  test("signed in, Followed is there", () => {
+    renderWithContexts(<FeedTabBar />, {
+      session: makeSession(),
+      route: "/~/followed",
+      path: "/~/:feedTab",
+    });
+    expect(screen.getByRole("button", { name: "Followed" })).toHaveClass(
+      "active",
+    );
+  });
+});

src/test/components/feed/PresenceRow.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, test, vi } from "vitest";
+import { act, screen } from "@testing-library/react";
+import { PresenceRow } from "../../../components/feed/PresenceRow.tsx";
+import { renderWithContexts } from "../../render.tsx";
+
+describe("PresenceRow", () => {
+  const online = (n: number) =>
+    Array.from({ length: n }, (_, i) => ({
+      userId: `u${i}`,
+      username: `user${i}`,
+      hasAvatar: false,
+    }));
+
+  test("nothing when nobody's online", () => {
+    renderWithContexts(<PresenceRow />);
+    expect(document.querySelector(".index-presence")).toBeNull();
+  });
+
+  test("up to six seats, the rest folded into a counter", () => {
+    renderWithContexts(<PresenceRow />, { ws: { onlineUsers: online(9) } });
+    expect(screen.getAllByRole("link")).toHaveLength(5);
+    const more = screen.getByRole("img", { name: /4 more online/ });
+    expect(more).toHaveTextContent("+4");
+    expect(more).toHaveAttribute("title", "user5, user6, user7, user8");
+  });
+
+  test("six or fewer all show", () => {
+    renderWithContexts(<PresenceRow />, { ws: { onlineUsers: online(6) } });
+    expect(screen.getAllByRole("link")).toHaveLength(6);
+    expect(screen.queryByText(/^\+/)).not.toBeInTheDocument();
+  });
+
+  test("gives up seats to the tabs beside it, keeping at least an avatar and the counter", () => {
+    const width = vi.spyOn(HTMLElement.prototype, "clientWidth", "get")
+      .mockReturnValue(100);
+    renderWithContexts(
+      <div className="bar">
+        <div className="tabs">
+          <span>a</span>
+        </div>
+        <PresenceRow fitWithin=".bar" fitBeside=".tabs" />
+      </div>,
+      { ws: { onlineUsers: online(9) } },
+    );
+    expect(screen.getAllByRole("link")).toHaveLength(3);
+    width.mockReturnValue(0);
+    act(() => {
+      globalThis.dispatchEvent(new Event("resize"));
+    });
+    width.mockRestore();
+  });
+});

src/test/components/layout/AppHeader.test.tsx

@@ -6,8 +6,8 @@ import { i18n } from "@lingui/core";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router";
 import { useState } from "react";
 import { AppHeader } from "../../../components/layout/AppHeader.tsx";
-import { AuthContext } from "../../../contexts/AuthContext.ts";
-import { defaultWSValue, WSContext } from "../../../contexts/WSContext.ts";
+import { AuthContext } from "../../../contexts/auth/AuthContext.ts";
+import { defaultWSValue, WSContext } from "../../../contexts/ws/WSContext.ts";
 import type { AuthResponse } from "../../../model.ts";
 import { makeSession } from "../../fixtures.ts";
 import { currentPath, renderWithContexts } from "../../render.tsx";

src/test/components/layout/ChatButton.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, vi } from "vitest";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ChatButton } from "../../../components/layout/ChatButton.tsx";
-import { ChatContext } from "../../../contexts/ChatContext.ts";
+import { ChatContext } from "../../../contexts/chat/ChatContext.ts";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("ChatButton", () => {

src/test/components/layout/ChatFab.test.tsx

@@ -1,44 +1,36 @@
 import { describe, expect, test, vi } from "vitest";
 import { act, screen } from "@testing-library/react";
 import { ChatFab } from "../../../components/layout/ChatFab.tsx";
-import { DumpFab } from "../../../components/layout/DumpFab.tsx";
-import { ChatContext } from "../../../contexts/ChatContext.ts";
+import { ChatContext } from "../../../contexts/chat/ChatContext.ts";
 import { makeSession } from "../../fixtures.ts";
 import { renderWithContexts } from "../../render.tsx";
 
-describe("floating buttons", () => {
-  function withChat(openChat = vi.fn()) {
-    return (ui: React.ReactNode) => (
-      <ChatContext.Provider
-        value={{ isChatOpen: false, openChat, closeChat: () => {} }}
-      >
-        {ui}
-      </ChatContext.Provider>
-    );
-  }
+function withChat(ui: React.ReactNode, openChat = vi.fn()) {
+  return (
+    <ChatContext.Provider
+      value={{ isChatOpen: false, openChat, closeChat: () => {} }}
+    >
+      {ui}
+    </ChatContext.Provider>
+  );
+}
 
-  test("guests get neither", () => {
-    renderWithContexts(
-      withChat()(
-        <>
-          <ChatFab />
-          <DumpFab />
-        </>,
-      ),
-    );
+describe("ChatFab", () => {
+  test("guests don't get it", () => {
+    renderWithContexts(withChat(<ChatFab />));
     expect(screen.queryByRole("button", { hidden: true })).not
       .toBeInTheDocument();
   });
 
-  test("they show once the header scrolls away", () => {
+  test("shows once the header scrolls away, and opens the chat", () => {
     const openChat = vi.fn();
     renderWithContexts(
-      withChat(openChat)(
+      withChat(
         <>
           <header className="app-header" />
           <ChatFab />
-          <DumpFab />
         </>,
+        openChat,
       ),
       { session: makeSession(), ws: { unreadChatCount: 2 } },
     );
@@ -52,7 +44,6 @@ describe("floating buttons", () => {
     expect(chat).toHaveAttribute("aria-label", "Chat (2 unread)");
     expect(chat).toHaveAttribute("aria-hidden", "true");
     expect(chat).toHaveAttribute("tabindex", "-1");
-    expect(document.body).toHaveClass("has-fab");
 
     header.getBoundingClientRect = () => ({ bottom: -10 }) as DOMRect;
     act(() => {
@@ -62,8 +53,5 @@ describe("floating buttons", () => {
     expect(chat).toHaveClass("chat-fab--visible");
     act(() => chat.click());
     expect(openChat).toHaveBeenCalled();
-    expect(screen.getByRole("button", { name: "New dump" })).toHaveClass(
-      "dump-fab--visible",
-    );
   });
 });

src/test/components/layout/DumpFab.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, test } from "vitest";
+import { act, screen } from "@testing-library/react";
+import { DumpFab } from "../../../components/layout/DumpFab.tsx";
+import { makeSession } from "../../fixtures.ts";
+import { renderWithContexts } from "../../render.tsx";
+
+describe("DumpFab", () => {
+  test("guests don't get it", () => {
+    renderWithContexts(<DumpFab />);
+    expect(screen.queryByRole("button", { hidden: true })).not
+      .toBeInTheDocument();
+    expect(document.body).not.toHaveClass("has-fab");
+  });
+
+  test("shows once the header scrolls away", () => {
+    renderWithContexts(
+      <>
+        <header className="app-header" />
+        <DumpFab />
+      </>,
+      { session: makeSession() },
+    );
+    const header = document.querySelector(".app-header")!;
+    // jsdom lays nothing out: put the header on screen first.
+    header.getBoundingClientRect = () => ({ bottom: 60 }) as DOMRect;
+    act(() => {
+      globalThis.dispatchEvent(new Event("scroll"));
+    });
+    const button = document.querySelector<HTMLButtonElement>(".dump-fab")!;
+    expect(button).toHaveAttribute("aria-label", "New dump");
+    expect(button).toHaveAttribute("aria-hidden", "true");
+    expect(document.body).toHaveClass("has-fab");
+
+    header.getBoundingClientRect = () => ({ bottom: -10 }) as DOMRect;
+    act(() => {
+      globalThis.dispatchEvent(new Event("scroll"));
+    });
+    expect(button).toHaveAttribute("aria-hidden", "false");
+    expect(button).toHaveClass("dump-fab--visible");
+  });
+});

src/test/components/layout/NotificationBell.test.tsx

@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { NotificationBell } from "../../../components/layout/NotificationBell.tsx";
 import { makeNotification } from "../../fixtures.ts";
 import { currentPath, renderWithContexts } from "../../render.tsx";
-import { defaultWSValue, WSContext } from "../../../contexts/WSContext.ts";
+import { defaultWSValue, WSContext } from "../../../contexts/ws/WSContext.ts";
 
 describe("NotificationBell", () => {
   test("the bell shows the unread count and goes to notifications", async () => {

src/test/components/player/GlobalPlayer.test.tsx

@@ -3,11 +3,11 @@ import { act, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useContext } from "react";
 import { GlobalPlayer } from "../../../components/player/GlobalPlayer.tsx";
-import { PlayerProvider } from "../../../contexts/PlayerProvider.tsx";
+import { PlayerProvider } from "../../../contexts/player/PlayerProvider.tsx";
 import {
   PlayerContext,
   type PlayerItem,
-} from "../../../contexts/PlayerContext.ts";
+} from "../../../contexts/player/PlayerContext.ts";
 import { renderWithContexts } from "../../render.tsx";
 
 let player!: React.ContextType<typeof PlayerContext>;

src/test/components/playlist/PlaylistCard.test.tsx

@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { PlaylistCard } from "../../../components/playlist/PlaylistCard.tsx";
 import { makePlaylist } from "../../fixtures.ts";
 import { currentPath, renderWithContexts } from "../../render.tsx";
-import { markPlaylistVisited } from "../../../utils/visited.ts";
+import { markPlaylistVisited } from "../../../utils/shared/visited.ts";
 
 describe("PlaylistCard", () => {
   test("title, badge, owner, count; clicking opens it and marks it seen", async () => {

src/test/components/shared/Avatar.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "vitest";
 import { fireEvent, screen } from "@testing-library/react";
-import { Avatar } from "../../../components/ui/Avatar.tsx";
-import { AvatarOverrideContext } from "../../../contexts/AvatarOverrideContext.ts";
+import { Avatar } from "../../../components/shared/Avatar.tsx";
+import { AvatarOverrideContext } from "../../../contexts/ws/AvatarOverrideContext.ts";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("Avatar", () => {

src/test/components/shared/ConfirmModal.test.tsx

@@ -4,8 +4,8 @@ import userEvent from "@testing-library/user-event";
 import { I18nProvider } from "@lingui/react";
 import { i18n } from "@lingui/core";
 import { useState } from "react";
-import { Modal } from "../../../components/ui/Modal.tsx";
-import { ConfirmModal } from "../../../components/ui/ConfirmModal.tsx";
+import { Modal } from "../../../components/shared/Modal.tsx";
+import { ConfirmModal } from "../../../components/shared/ConfirmModal.tsx";
 
 const wrap = (ui: React.ReactNode) =>
   render(<I18nProvider i18n={i18n}>{ui}</I18nProvider>);

src/test/components/shared/CountedInput.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 import { screen } from "@testing-library/react";
-import { CountedInput } from "../../../components/ui/CountedInput.tsx";
+import { CountedInput } from "../../../components/shared/CountedInput.tsx";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("CountedInput", () => {

src/test/components/shared/Modal.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { I18nProvider } from "@lingui/react";
 import { i18n } from "@lingui/core";
-import { Modal } from "../../../components/ui/Modal.tsx";
+import { Modal } from "../../../components/shared/Modal.tsx";
 
 const wrap = (ui: React.ReactNode) =>
   render(<I18nProvider i18n={i18n}>{ui}</I18nProvider>);

src/test/components/shared/TabBar.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TabBar } from "../../../components/ui/TabBar.tsx";
+import { TabBar } from "../../../components/shared/TabBar.tsx";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("TabBar", () => {

src/test/components/shared/Thumbnail.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 import { fireEvent, screen } from "@testing-library/react";
-import { Thumbnail } from "../../../components/ui/Thumbnail.tsx";
+import { Thumbnail } from "../../../components/shared/Thumbnail.tsx";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("Thumbnail", () => {

src/test/components/shared/ThumbnailPlaceholder.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "vitest";
 import { fireEvent, screen } from "@testing-library/react";
-import { ThumbnailPlaceholder } from "../../../components/ui/ThumbnailPlaceholder.tsx";
-import { hueFromString } from "../../../utils/thumbnailTint.ts";
+import { ThumbnailPlaceholder } from "../../../components/shared/ThumbnailPlaceholder.tsx";
+import { hueFromString } from "../../../utils/shared/thumbnailTint.ts";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("ThumbnailPlaceholder", () => {

src/test/components/shared/Tooltip.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Tooltip } from "../../../components/ui/Tooltip.tsx";
+import { Tooltip } from "../../../components/shared/Tooltip.tsx";
 import { renderWithContexts } from "../../render.tsx";
 
 describe("Tooltip", () => {