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/pages/UserLogin.test.tsx

@@ -0,0 +1,123 @@
+import { describe, expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Route } from "react-router";
+import { UserLogin } from "../../pages/UserLogin.tsx";
+import { AUTH_STORAGE_KEY } from "../../utils/auth/storage.ts";
+import { calls, deferred, fail, route } from "../fetch.ts";
+import { makeSession, wire } from "../fixtures.ts";
+import { currentPath, renderWithContexts } from "../render.tsx";
+
+const home = <Route path="/" element={<p>home page</p>} />;
+
+describe("UserLogin", () => {
+  function setup() {
+    const user = userEvent.setup();
+    renderWithContexts(<UserLogin />, {
+      route: "/login",
+      path: "/login",
+      extraRoutes: home,
+    });
+    return user;
+  }
+
+  test("logs in, stores the session and goes home", async () => {
+    const session = makeSession({ username: "ann" });
+    route("POST /api/users/login", () => wire(session));
+    const user = setup();
+    expect(document.title).toMatch(/^Log in · /);
+    await user.type(screen.getByPlaceholderText("Username"), "ann");
+    await user.type(screen.getByPlaceholderText("Password"), "hunter22{Enter}");
+    await screen.findByText("home page");
+    expect(calls("POST /api/users/login")[0].body).toEqual({
+      username: "ann",
+      password: "hunter22",
+    });
+    expect(JSON.parse(localStorage.getItem(AUTH_STORAGE_KEY)!).user.username)
+      .toBe("ann");
+  });
+
+  test("both fields are required", async () => {
+    const user = setup();
+    // The header has a "Log in" button too; this is the form's.
+    await user.click(
+      document.querySelector<HTMLButtonElement>(
+        ".auth-card button[type=submit]",
+      )!,
+    );
+    expect(calls("POST /api/users/login")).toHaveLength(0);
+    expect(screen.getByPlaceholderText("Username")).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    );
+  });
+
+  test("shows the server's refusal", async () => {
+    route("POST /api/users/login", () => fail("Invalid credentials", 401));
+    const user = setup();
+    await user.type(screen.getByPlaceholderText("Username"), "ann");
+    await user.type(screen.getByPlaceholderText("Password"), "nope{Enter}");
+    const alert = await screen.findByRole("alert");
+    expect(alert).toHaveTextContent("Login failed");
+    expect(alert).toHaveTextContent("Invalid credentials");
+    expect(currentPath()).toBe("/login");
+  });
+
+  test("says when the server can't be reached", async () => {
+    route("POST /api/users/login", () => new TypeError("Failed to fetch"));
+    const user = setup();
+    await user.type(screen.getByPlaceholderText("Username"), "ann");
+    await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      /Could not connect/,
+    );
+  });
+
+  test("the button says so while logging in", async () => {
+    const pending = deferred();
+    route("POST /api/users/login", () => pending.promise);
+    const user = setup();
+    await user.type(screen.getByPlaceholderText("Username"), "ann");
+    await user.type(screen.getByPlaceholderText("Password"), "pw{Enter}");
+    expect(await screen.findByRole("button", { name: "Logging in…" }))
+      .toBeDisabled();
+    pending.resolve(
+      new Response(
+        JSON.stringify({ success: true, data: wire(makeSession()) }),
+      ),
+    );
+    await screen.findByText("home page");
+  });
+
+  test("password reset request", async () => {
+    route("POST /api/users/request-password-reset", () => ({}));
+    const user = setup();
+    await user.click(screen.getByRole("button", { name: "Forgot password?" }));
+    await user.type(
+      screen.getByPlaceholderText("Your email address"),
+      "  a@b.c  {Enter}",
+    );
+    await screen.findByText(/you'll receive a reset link/);
+    expect(calls("POST /api/users/request-password-reset")[0].body).toEqual({
+      email: "a@b.c",
+    });
+  });
+
+  test("a failed reset request is reported, not claimed as sent", async () => {
+    route(
+      "POST /api/users/request-password-reset",
+      () => fail("Internal error", 500),
+    );
+    const user = setup();
+    await user.click(screen.getByRole("button", { name: "Forgot password?" }));
+    await user.type(
+      screen.getByPlaceholderText("Your email address"),
+      "a@b.c{Enter}",
+    );
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Request failed",
+    );
+    expect(screen.queryByText(/you'll receive a reset link/)).not
+      .toBeInTheDocument();
+  });
+});