v3: src/components sorted into feature folders, the four largest files split, and the component tests mirror the new layout — 48 components sat in one flat folder, ChatModal ran to 1301 lines, DumpCreateModal to 983, and the tests were grouped by theme, so there was no telling which component had none. Components now live in category/, chat/, comment/, dump/ (with dump/create/ for the new-dump wizard), editor/, form/, layout/ (header, page shell, floating buttons), player/, playlist/, profile/, social/ (vote, like, follow, the who-voted popover) and ui/; FeedTabBar and PresenceRow, used by the index page alone, move to pages/index/. ChatModal gives up ChatMessageItem, PendingItem, ChatEditBox and ReplyRef, the message limits and text helpers (chat/message.ts), the day and clock labels (chat/time.ts) and the draft storage (utils/chatDraft.ts, next to dumpDraft.ts). DumpCreateModal gives up StepIndicator, LocalFilePreview, TitleField and DuplicateNotice; CommentThread gives up CommentForm and CommentNode; TextEditor gives up the emoji picker popup and its skin-tone storage; MediaPlayer gives up its icons (which FilePreview imported from it), Waveform, SeekBar and the remembered volume. NewPlaylistForm, a button that opens a modal holding the form, is NewPlaylistButton now, and Thumbnail, ThumbnailPlaceholder, FilePreview and RichContentCard use named exports like everything else. The tests are split one file per component under src/test/components/<folder>/ (and src/test/pages/index/), the same 625 of them. No behaviour changes; the catalogues only move their source references.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/layout/DumpFab.tsx

@@ -0,0 +1,97 @@
+import { lazy, Suspense, useEffect, useState } from "react";
+import { useLocation } from "react-router";
+import { t } from "@lingui/core/macro";
+import { useAuth } from "../../hooks/useAuth.ts";
+
+const DumpCreateModal = lazy(() =>
+  import("../dump/create/DumpCreateModal.tsx").then((m) => ({
+    default: m.DumpCreateModal,
+  }))
+);
+
+/**
+ * Floating "new dump" button shown once the header has scrolled out of view.
+ * Sits in the bottom-right corner and lifts above the global player (which is
+ * full-width on mobile) so the two never overlap. Only rendered for signed-in
+ * users — dump creation requires an account.
+ *
+ * Mounted once at the app root (not per-page) since some pages render their own
+ * header instead of going through PageShell. Visibility is derived from a live
+ * read of the current page's `.app-header`, so it survives client-side
+ * navigation and lazily-mounted route headers.
+ */
+export function DumpFab() {
+  const { user } = useAuth();
+  const location = useLocation();
+  const [headerHidden, setHeaderHidden] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  // Reserve clearance at the end of the scroll so the floating button never
+  // hides the last content when scrolled all the way down.
+  useEffect(() => {
+    if (!user) return;
+    document.body.classList.add("has-fab");
+    return () => document.body.classList.remove("has-fab");
+  }, [user]);
+
+  // Reveal the button once the header's bottom edge scrolls above the viewport.
+  // Re-reading the header on every tick keeps this correct across navigation
+  // and lazily-mounted pages, where the header element is replaced.
+  useEffect(() => {
+    if (!user) return;
+    const update = () => {
+      const header = document.querySelector(".app-header");
+      setHeaderHidden(!!header && header.getBoundingClientRect().bottom <= 0);
+    };
+    update();
+    globalThis.addEventListener("scroll", update, { passive: true });
+    globalThis.addEventListener("resize", update);
+    // Body height changes when a lazy route finishes mounting — re-check then,
+    // since no scroll/resize event fires in that case.
+    const ro = new ResizeObserver(update);
+    ro.observe(document.body);
+    return () => {
+      globalThis.removeEventListener("scroll", update);
+      globalThis.removeEventListener("resize", update);
+      ro.disconnect();
+    };
+  }, [user, location.pathname]);
+
+  if (!user) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`dump-fab${headerHidden ? " dump-fab--visible" : ""}`}
+        aria-label={t`New dump`}
+        title={t`New dump`}
+        aria-hidden={!headerHidden}
+        tabIndex={headerHidden ? 0 : -1}
+        onClick={() => setModalOpen(true)}
+      >
+        {
+          /* Symmetric SVG plus — centers exactly via flex, regardless of the
+            theme's font metrics (a text "+" sits slightly off the box center). */
+        }
+        <svg
+          className="dump-fab-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2.5}
+          strokeLinecap="round"
+          aria-hidden="true"
+        >
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      </button>
+      {modalOpen && (
+        <Suspense>
+          <DumpCreateModal onClose={() => setModalOpen(false)} />
+        </Suspense>
+      )}
+    </>
+  );
+}