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/feed/JournalFeed.tsx

@@ -0,0 +1,85 @@
+import { Fragment, useMemo } from "react";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { ErrorCard } from "../shared/ErrorCard.tsx";
+import { JournalCard } from "../dump/JournalCard.tsx";
+import { composeJournal } from "../../utils/feed/journalLayout.ts";
+import type { MainFeedProps } from "./DumpFeed.tsx";
+
+export function JournalFeed(
+  {
+    dumps,
+    loading,
+    error,
+    hasMore,
+    loadingMore,
+    sentinelRef,
+    voteCounts,
+    myVotes,
+    user,
+    castVote,
+    removeVote,
+  }: MainFeedProps,
+) {
+  const blocks = useMemo(() => composeJournal(dumps), [dumps]);
+
+  if (loading) {
+    return (
+      <p className="index-status">
+        <Trans>Loading…</Trans>
+      </p>
+    );
+  }
+  if (error) return <ErrorCard title={t`Failed to load`} message={error} />;
+  if (blocks.length === 0) {
+    return (
+      <p className="index-status">
+        <Trans>No dumps yet. Be the first!</Trans>
+      </p>
+    );
+  }
+
+  return (
+    <>
+      {
+        /* Each sub-block is its own grid, with a themable <hr> between them.
+          A break sits between two grids rather than inside one because a grid
+          item would be stretched to the 9rem row track — out here its height
+          is its own, down to nothing for a theme that wants no separation. */
+      }
+      <div className="journal-feed">
+        {blocks.map((block, index) => (
+          <Fragment key={block.key}>
+            {index > 0 && <hr className="journal-break" />}
+            <ul className="journal-grid">
+              {block.entries.map(({ dump, shape }) => (
+                <JournalCard
+                  key={dump.id}
+                  dump={dump}
+                  shape={shape}
+                  voteCount={voteCounts[dump.id] ?? dump.voteCount}
+                  voted={myVotes.has(dump.id)}
+                  canVote={!!user}
+                  castVote={castVote}
+                  removeVote={removeVote}
+                  isOwner={user?.id === dump.userId}
+                />
+              ))}
+            </ul>
+          </Fragment>
+        ))}
+      </div>
+      <div ref={sentinelRef} />
+      {loadingMore && (
+        <p className="feed-loading-more">
+          <Trans>Loading more…</Trans>
+        </p>
+      )}
+      {!hasMore && blocks.length > 0 && (
+        <p className="feed-end">
+          <Trans>You've reached the end.</Trans>
+        </p>
+      )}
+    </>
+  );
+}