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/components/shared/TabBar.tsx

@@ -0,0 +1,79 @@
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+
+interface Tab<T extends string> {
+  key: T;
+  label: ReactNode;
+}
+
+interface TabBarProps<T extends string> {
+  tabs: Tab<T>[];
+  activeTab: T;
+  onChange: (key: T) => void;
+  className?: string;
+  innerClassName?: string;
+  // Optional content rendered inside the row, before the tabs (e.g. a scope
+  // selector). Sits in the same flex line so it scrolls and aligns with them.
+  leading?: ReactNode;
+}
+
+export function TabBar<T extends string>(
+  { tabs, activeTab, onChange, className, innerClassName, leading }:
+    TabBarProps<T>,
+) {
+  const rowRef = useRef<HTMLDivElement>(null);
+  const [overflowing, setOverflowing] = useState(false);
+
+  // Flags a row whose tabs don't all fit, for places that fade the edge only
+  // then (the app header) rather than always.
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!row) return;
+    const measure = () => setOverflowing(row.scrollWidth > row.clientWidth);
+    const resize = new ResizeObserver(measure);
+    resize.observe(row);
+    for (const child of row.children) resize.observe(child);
+    measure();
+    return () => resize.disconnect();
+  }, [tabs.length]);
+
+  // When they don't all fit, keep the active tab in view, clear of the fade
+  // over the row's right edge — scrolling the row alone, never the page.
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    const active = row?.querySelector<HTMLElement>(".feed-sort-btn.active");
+    if (!row || !active || !overflowing) return;
+    // The fade is 2rem wide (.feed-sort-scroller::after).
+    const fade =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) * 2;
+    const r = row.getBoundingClientRect(), b = active.getBoundingClientRect();
+    if (b.left < r.left) row.scrollLeft -= r.left - b.left;
+    else if (b.right > r.right - fade) {
+      row.scrollLeft += b.right - r.right + fade;
+    }
+  }, [activeTab, overflowing]);
+
+  return (
+    <div
+      className={`feed-sort-scroller${
+        overflowing ? " feed-sort-scroller--overflowing" : ""
+      }${className ? ` ${className}` : ""}`}
+    >
+      <div
+        ref={rowRef}
+        className={`feed-sort${innerClassName ? ` ${innerClassName}` : ""}`}
+      >
+        {leading}
+        {tabs.map(({ key, label }) => (
+          <button
+            key={key}
+            type="button"
+            className={`feed-sort-btn${activeTab === key ? " active" : ""}`}
+            onClick={() => onChange(key)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}