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

@@ -0,0 +1,73 @@
+import { useRef } from "react";
+
+interface ImagePickerProps {
+  src: string | null;
+  alt?: string;
+  size?: number;
+  borderRadius?: number;
+  onChange: (file: File) => void;
+  uploading?: boolean;
+  accept?: string;
+  className?: string;
+}
+
+export function ImagePicker({
+  src,
+  alt = "",
+  size = 80,
+  borderRadius = 8,
+  onChange,
+  uploading = false,
+  accept = "image/jpeg,image/png,image/gif,image/webp",
+  className,
+}: ImagePickerProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const sizeStyle = { width: size, height: size, borderRadius };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) onChange(file);
+    e.target.value = "";
+  };
+
+  return (
+    <div
+      className={className ? `img-picker ${className}` : "img-picker"}
+      style={sizeStyle}
+      onClick={() => !uploading && inputRef.current?.click()}
+      title={src ? "Change image" : "Add image"}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      }}
+    >
+      {src
+        ? (
+          <img
+            src={src}
+            alt={alt}
+            className="img-picker-img"
+            style={{ borderRadius }}
+            referrerPolicy="no-referrer"
+          />
+        )
+        : (
+          <div className="img-picker-placeholder" style={{ borderRadius }}>
+            <span>+</span>
+          </div>
+        )}
+      <div className="img-picker-overlay" style={{ borderRadius }}>
+        {uploading ? "…" : "✎"}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleChange}
+        disabled={uploading}
+        style={{ display: "none" }}
+      />
+    </div>
+  );
+}