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/Modal.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode, useCallback, useEffect, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import { t } from "@lingui/core/macro";
+import { useScrollLock } from "../../hooks/shared/useScrollLock.ts";
+
+interface ModalProps {
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+  wide?: boolean;
+  /**
+   * Runs before every dismissal the user did not aim at the content — Escape,
+   * the backdrop, the ✕. Returning `false` cancels it, which lets a modal
+   * holding an unsaved draft ask first instead of throwing the work away.
+   */
+  onBeforeClose?: () => boolean;
+}
+
+export function Modal(
+  { title, onClose, children, wide = false, onBeforeClose }: ModalProps,
+) {
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  const requestClose = useCallback(() => {
+    if (onBeforeClose?.() === false) return;
+    onClose();
+  }, [onBeforeClose, onClose]);
+
+  useScrollLock();
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !e.defaultPrevented) requestClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [requestClose]);
+
+  return createPortal(
+    <div
+      className="modal-backdrop"
+      ref={backdropRef}
+      onClick={(e) => {
+        if (e.target === backdropRef.current) requestClose();
+      }}
+    >
+      <div
+        className={`modal-card${wide ? " modal-card--wide" : ""}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <div className="modal-header">
+          <span className="modal-title" id={titleId}>{title}</span>
+          <button
+            type="button"
+            className="modal-close-btn"
+            onClick={requestClose}
+            aria-label={t`Close`}
+          >
+            ✕
+          </button>
+        </div>
+        <div className="modal-body">
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}