From 0cb5a798c7736a80854b6a5d8558f6376965568b Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Wed, 25 Mar 2026 21:07:17 +0000
Subject: [PATCH] v3: added journal view to the index, code organization pass

---
 api/{utils => lib}/upload.ts     |   0
 api/main.ts                      |   2 +-
 api/routes/avatars.ts            |   2 +-
 api/routes/files.ts              |   2 +-
 api/routes/playlists.ts          |   2 +-
 api/services/dump-service.ts     |   2 +-
 src/App.css                      | 195 +++++++++++++
 src/components/AppHeader.tsx     |   2 +-
 src/components/JournalCard.tsx   | 187 ++++++++++++
 src/pages/Index.tsx              | 486 +++++--------------------------
 src/pages/index/FollowedFeed.tsx | 365 +++++++++++++++++++++++
 src/pages/index/HotFeed.tsx      |  56 ++++
 src/pages/index/JournalFeed.tsx  |  66 +++++
 src/pages/index/NewFeed.tsx      |  56 ++++
 src/pages/index/types.ts         |  16 +
 src/utils/hotScore.ts            |   6 +
 16 files changed, 1025 insertions(+), 420 deletions(-)
 rename api/{utils => lib}/upload.ts (100%)
 create mode 100644 src/components/JournalCard.tsx
 create mode 100644 src/pages/index/FollowedFeed.tsx
 create mode 100644 src/pages/index/HotFeed.tsx
 create mode 100644 src/pages/index/JournalFeed.tsx
 create mode 100644 src/pages/index/NewFeed.tsx
 create mode 100644 src/pages/index/types.ts
 create mode 100644 src/utils/hotScore.ts

diff --git a/api/utils/upload.ts b/api/lib/upload.ts
similarity index 100%
rename from api/utils/upload.ts
rename to api/lib/upload.ts
diff --git a/api/main.ts b/api/main.ts
index 18c95b0..2c6d126 100644
--- a/api/main.ts
+++ b/api/main.ts
@@ -16,7 +16,7 @@ import invitesRouter from "./routes/invites.ts";
 import { BASE_URL, HOSTNAME, PORT } from "./config.ts";
 import { errorMiddleware } from "./middleware/error.ts";
 import routeStaticFilesFrom from "./lib/static.ts";
-import { DUMPS_DIR, UPLOADS_DIR } from "./utils/upload.ts";
+import { DUMPS_DIR, UPLOADS_DIR } from "./lib/upload.ts";
 import { UUID_RE } from "./lib/slugify.ts";
 
 const app = new Application();
diff --git a/api/routes/avatars.ts b/api/routes/avatars.ts
index 50e20bb..470bf11 100644
--- a/api/routes/avatars.ts
+++ b/api/routes/avatars.ts
@@ -7,7 +7,7 @@ import {
   AVATARS_DIR,
   serveUploadedFile,
   validateImageUpload,
-} from "../utils/upload.ts";
+} from "../lib/upload.ts";
 
 const router = new Router();
 
diff --git a/api/routes/files.ts b/api/routes/files.ts
index 1fb50c9..d703822 100644
--- a/api/routes/files.ts
+++ b/api/routes/files.ts
@@ -1,7 +1,7 @@
 import { Router } from "@oak/oak";
 import { APIErrorCode, APIException } from "../model/interfaces.ts";
 import { getDump } from "../services/dump-service.ts";
-import { DUMPS_DIR } from "../utils/upload.ts";
+import { DUMPS_DIR } from "../lib/upload.ts";
 
 const router = new Router({ prefix: "/api/files" });
 
diff --git a/api/routes/playlists.ts b/api/routes/playlists.ts
index e5b6320..644f0f4 100644
--- a/api/routes/playlists.ts
+++ b/api/routes/playlists.ts
@@ -24,7 +24,7 @@ import {
   PLAYLIST_IMAGES_DIR,
   serveUploadedFile,
   validateImageUpload,
-} from "../utils/upload.ts";
+} from "../lib/upload.ts";
 
 const router = new Router<AuthState>({ prefix: "/api/playlists" });
 
diff --git a/api/services/dump-service.ts b/api/services/dump-service.ts
index f2519ad..229a261 100644
--- a/api/services/dump-service.ts
+++ b/api/services/dump-service.ts
@@ -17,7 +17,7 @@ import {
   notifyUserFollowersNewDump,
 } from "./notification-service.ts";
 import { makeSlug, UUID_RE } from "../lib/slugify.ts";
-import { DUMPS_DIR } from "../utils/upload.ts";
+import { DUMPS_DIR } from "../lib/upload.ts";
 
 const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50 MB
 
diff --git a/src/App.css b/src/App.css
index 79428ed..4fb644c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2963,6 +2963,201 @@ body.has-player .fab-new {
   padding-bottom: 0.75rem;
 }
 
+/* ── Journal masonry grid ── */
+
+.journal-grid {
+  list-style: none;
+  margin: 0;
+  padding: 1rem 1.25rem 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: dense;
+  gap: 0.875rem;
+  max-width: 1100px;
+  width: 100%;
+  box-sizing: border-box;
+  align-self: center;
+}
+
+.journal-card {
+  border: 2px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-surface);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s, opacity 0.15s;
+  min-width: 0;
+}
+
+.journal-card:hover {
+  border-color: var(--color-accent);
+}
+
+/* Large: spans 2 columns, media header + body */
+.journal-card--large {
+  grid-column: span 2;
+}
+
+.journal-card--large .journal-card-media {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.journal-card--large .journal-card-media .rich-content-play-overlay {
+  font-size: 2rem;
+}
+
+.journal-card--large .journal-card-media:hover .rich-content-play-overlay {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.journal-card--large .journal-card-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Medium: icon left + content right */
+.journal-card--medium .journal-card-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.journal-card-icon {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+}
+
+.journal-card-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Shared body */
+.journal-card-body {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.journal-card--medium .journal-card-body {
+  padding: 0;
+}
+
+.journal-card-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--color-text);
+  text-decoration: none;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.journal-card-title:hover {
+  color: var(--color-accent);
+}
+
+.journal-card-comment {
+  font-size: 0.82rem;
+  opacity: 0.65;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.journal-card--large .journal-card-comment {
+  -webkit-line-clamp: 3;
+}
+
+.journal-card--medium .journal-card-comment {
+  -webkit-line-clamp: 1;
+}
+
+.journal-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
+}
+
+.journal-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.78rem;
+  color: var(--color-text-secondary);
+  flex-wrap: wrap;
+}
+
+/* Small: single compact row */
+.journal-card--small {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.55rem 0.875rem;
+}
+
+.journal-card--small .journal-card-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.87rem;
+}
+
+/* feed-end message */
+.feed-end {
+  text-align: center;
+  padding: 1.5rem 1rem;
+  font-size: 0.82rem;
+  color: var(--color-text-secondary);
+  opacity: 0.55;
+}
+
+@media (max-width: 860px) {
+  .journal-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 540px) {
+  .journal-grid {
+    grid-template-columns: 1fr;
+    padding: 0.75rem 1rem 0;
+  }
+
+  .journal-card--large {
+    grid-column: span 1;
+  }
+}
+
 /* ── Notification bell ── */
 @keyframes bell-ring {
   0% {
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index 31e8d5a..f2fee43 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -16,7 +16,7 @@ export function AppHeader(
       <header
         className={`app-header${centerSlot ? " app-header--has-center" : ""}`}
       >
-        <Link to="/" state={{ tab: "hot" }} className="app-header-brand">
+        <Link to="/?tab=hot" className="app-header-brand">
           🚚 gerbeur
         </Link>
 
diff --git a/src/components/JournalCard.tsx b/src/components/JournalCard.tsx
new file mode 100644
index 0000000..21ffe8b
--- /dev/null
+++ b/src/components/JournalCard.tsx
@@ -0,0 +1,187 @@
+import { useContext } from "react";
+import { Link, useNavigate } from "react-router";
+import type { Dump } from "../model.ts";
+import { API_URL } from "../config/api.ts";
+import { relativeTime } from "../utils/relativeTime.ts";
+import { dumpUrl } from "../utils/urls.ts";
+import { isDumpVisited, isRecent, markDumpVisited } from "../utils/visited.ts";
+import { VoteButton } from "./VoteButton.tsx";
+import { Markdown } from "./Markdown.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import { PlayerContext } from "../contexts/PlayerContext.ts";
+
+export type JournalTier = "large" | "medium" | "small";
+
+interface JournalCardProps {
+  dump: Dump;
+  tier: JournalTier;
+  voteCount: number;
+  voted: boolean;
+  canVote: boolean;
+  castVote: (id: string) => void;
+  removeVote: (id: string) => void;
+  isOwner?: boolean;
+}
+
+export function JournalCard(
+  { dump, tier, voteCount, voted, canVote, castVote, removeVote, isOwner }:
+    JournalCardProps,
+) {
+  const navigate = useNavigate();
+  const { play } = useContext(PlayerContext);
+  const unread = !isOwner && isRecent(dump.createdAt) && !isDumpVisited(dump.id);
+
+  function handleNavigate() {
+    markDumpVisited(dump.id);
+    navigate(dumpUrl(dump));
+  }
+
+  const thumbnailUrl = dump.kind === "file" &&
+      dump.fileMime?.startsWith("image/")
+    ? `${API_URL}/api/files/${dump.id}?v=${dump.fileSize ?? 0}`
+    : (dump.richContent?.thumbnailUrl ?? null);
+
+  const fallbackIcon = dump.kind === "file"
+    ? (() => {
+      const m = dump.fileMime ?? "";
+      if (m.startsWith("video/")) return "🎬";
+      if (m.startsWith("audio/")) return "🎵";
+      return "📄";
+    })()
+    : "🔗";
+
+  const titleLink = (
+    <Link
+      to={dumpUrl(dump)}
+      className="journal-card-title"
+      onClick={(e) => {
+        e.stopPropagation();
+        markDumpVisited(dump.id);
+      }}
+    >
+      {unread && <span className="unread-dot" aria-hidden="true" />}
+      {dump.title}
+    </Link>
+  );
+
+  const meta = (
+    <div className="journal-card-meta">
+      <Tooltip text={dump.createdAt.toLocaleString()}>
+        <time dateTime={dump.createdAt.toISOString()}>
+          {relativeTime(dump.createdAt)}
+        </time>
+      </Tooltip>
+      {dump.commentCount > 0 && (
+        <span>
+          {dump.commentCount}{" "}
+          {dump.commentCount === 1 ? "comment" : "comments"}
+        </span>
+      )}
+      {dump.isPrivate && isOwner && (
+        <span className="dump-card-private-badge">private</span>
+      )}
+    </div>
+  );
+
+  const vote = (
+    <div onClick={(e) => e.stopPropagation()}>
+      <VoteButton
+        dumpId={dump.id}
+        count={voteCount}
+        voted={voted}
+        disabled={!canVote}
+        onCast={castVote}
+        onRemove={removeVote}
+      />
+    </div>
+  );
+
+  const embedUrl = dump.richContent?.embedUrl;
+
+  if (tier === "large") {
+    return (
+      <li className="journal-card journal-card--large" onClick={handleNavigate}>
+        {thumbnailUrl && (
+          <div
+            className="journal-card-media"
+            onClick={embedUrl
+              ? (e) => {
+                e.stopPropagation();
+                play({
+                  embedUrl,
+                  title: dump.richContent?.title,
+                  type: dump.richContent?.type ?? "unknown",
+                });
+              }
+              : undefined}
+          >
+            <img
+              src={thumbnailUrl}
+              alt={dump.title}
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+            {embedUrl && (
+              <span className="rich-content-play-overlay" aria-hidden="true">
+                ▶
+              </span>
+            )}
+          </div>
+        )}
+        <div className="journal-card-body">
+          {titleLink}
+          {dump.comment && (
+            <Markdown className="journal-card-comment">{dump.comment}</Markdown>
+          )}
+          <div className="journal-card-footer">
+            {meta}
+            {vote}
+          </div>
+        </div>
+      </li>
+    );
+  }
+
+  if (tier === "medium") {
+    return (
+      <li className="journal-card journal-card--medium" onClick={handleNavigate}>
+        <div className="journal-card-inner">
+          <div className="journal-card-icon">
+            {thumbnailUrl
+              ? (
+                <img
+                  src={thumbnailUrl}
+                  alt=""
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              )
+              : <span>{fallbackIcon}</span>}
+          </div>
+          <div className="journal-card-body">
+            {titleLink}
+            {dump.comment && (
+              <Markdown className="journal-card-comment">
+                {dump.comment}
+              </Markdown>
+            )}
+            <div className="journal-card-footer">
+              {meta}
+              {vote}
+            </div>
+          </div>
+        </div>
+      </li>
+    );
+  }
+
+  // small
+  return (
+    <li className="journal-card journal-card--small" onClick={handleNavigate}>
+      {titleLink}
+      {vote}
+    </li>
+  );
+}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 90de880..ef1f074 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -6,10 +6,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { Link, useLocation } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 
 import { Avatar } from "../components/Avatar.tsx";
-import { DumpCard } from "../components/DumpCard.tsx";
 import { AppHeader } from "../components/AppHeader.tsx";
 
 import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts";
@@ -20,10 +19,8 @@ import {
   hydrateDump,
   type PaginatedData,
   type RawDump,
-  type User,
 } from "../model.ts";
 
-import { ErrorCard } from "../components/ErrorCard.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { useScrollSave } from "../hooks/useScrollSave.ts";
@@ -32,6 +29,12 @@ import { useWS } from "../hooks/useWS.ts";
 import { useDumpListSync } from "../hooks/useDumpListSync.ts";
 import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";
 
+import { HotFeed } from "./index/HotFeed.tsx";
+import { NewFeed } from "./index/NewFeed.tsx";
+import { JournalFeed } from "./index/JournalFeed.tsx";
+import { FollowedFeed } from "./index/FollowedFeed.tsx";
+import type { MainFeedProps } from "./index/types.ts";
+
 type DumpsState =
   | { status: "loading" }
   | { status: "error"; error: string }
@@ -43,82 +46,13 @@ type DumpsState =
     loadingMore: boolean;
   };
 
-type FeedTab = "hot" | "new" | "followed";
-type FollowedSection = "users" | "playlists";
+type FeedTab = "hot" | "new" | "journal" | "followed";
 
-function hotScore(dump: Dump): number {
-  const ageHours = (Date.now() - dump.createdAt.getTime()) / 3_600_000;
-  return (dump.voteCount + 1) / Math.pow(ageHours + 2, 1.5);
-}
-
-// ── FollowedSubFeed ──────────────────────────────────────────────────────────
-
-interface FollowedSubFeedProps {
-  state: DumpsState;
-  voteCounts: Record<string, number>;
-  myVotes: Set<string>;
-  user: User | null;
-  castVote: (id: string) => void;
-  removeVote: (id: string) => void;
-  deletedDumpIds: Set<string>;
-  emptyMessage: string;
-  onLoadMore: () => void;
-}
-
-function FollowedSubFeed({
-  state,
-  voteCounts,
-  myVotes,
-  user,
-  castVote,
-  removeVote,
-  deletedDumpIds,
-  emptyMessage,
-  onLoadMore,
-}: FollowedSubFeedProps) {
-  const hasMore = state.status === "loaded" && state.hasMore &&
-    !state.loadingMore;
-  const sentinelRef = useInfiniteScroll(onLoadMore, hasMore);
-
-  if (state.status === "loading") {
-    return <p className="index-status">Loading…</p>;
-  }
-  if (state.status === "error") {
-    return <ErrorCard title="Failed to load" message={state.error} />;
-  }
-
-  const visible = state.dumps.filter((d) => !deletedDumpIds.has(d.id));
-
-  if (visible.length === 0) {
-    return <p className="index-status">{emptyMessage}</p>;
-  }
-
-  return (
-    <>
-      <ul className="dump-feed">
-        {visible.map((dump) => (
-          <DumpCard
-            key={dump.id}
-            dump={dump}
-            voteCount={voteCounts[dump.id] ?? dump.voteCount}
-            voted={myVotes.has(dump.id)}
-            canVote={!!user}
-            castVote={castVote}
-            removeVote={removeVote}
-            isOwner={user?.id === dump.userId}
-          />
-        ))}
-      </ul>
-      <div ref={sentinelRef} />
-      {state.loadingMore && <p className="feed-loading-more">Loading more…</p>}
-    </>
-  );
-}
-
-// ── Index ────────────────────────────────────────────────────────────────────
+const VALID_TABS = new Set<string>(["hot", "new", "journal", "followed"]);
 
 export function Index() {
   const location = useLocation();
+  const navigate = useNavigate();
   const justDeletedId = (location.state as { deletedDumpId?: string } | null)
     ?.deletedDumpId;
 
@@ -133,7 +67,8 @@ export function Index() {
     removeVote,
   } = useWS();
 
-  // Main feed
+  // ── Main feed state ──
+
   const { cached, saveState } = useFeedCache<Dump>(
     `feed:index:${user?.id ?? "guest"}`,
     hydrateDump,
@@ -151,56 +86,12 @@ export function Index() {
   );
   const mainFetchDone = useRef(false);
 
-  // Followed feeds
-  const { cached: cachedFollowedUsers, saveState: saveFollowedUsers } =
-    useFeedCache<Dump>(
-      `feed:followed-users:${user?.id ?? "guest"}`,
-      hydrateDump,
-    );
-  const { cached: cachedFollowedPlaylists, saveState: saveFollowedPlaylists } =
-    useFeedCache<Dump>(
-      `feed:followed-playlists:${user?.id ?? "guest"}`,
-      hydrateDump,
-    );
+  const rawTab = new URLSearchParams(location.search).get("tab") ?? "hot";
+  const tab: FeedTab = VALID_TABS.has(rawTab) ? rawTab as FeedTab : "hot";
 
-  const [followedUsersDumps, setFollowedUsersDumps] = useState<DumpsState>({
-    status: "loading",
-  });
-  const [followedPlaylistsDumps, setFollowedPlaylistsDumps] = useState<
-    DumpsState
-  >({ status: "loading" });
-
-  const setFollowedUsersDumpsItems = useCallback(
-    (fn: (prev: Dump[]) => Dump[]) =>
-      setFollowedUsersDumps((s) =>
-        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
-      ),
-    [],
-  );
-  useDumpListSync(setFollowedUsersDumpsItems);
-
-  const setFollowedPlaylistsDumpsItems = useCallback(
-    (fn: (prev: Dump[]) => Dump[]) =>
-      setFollowedPlaylistsDumps((s) =>
-        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
-      ),
-    [],
-  );
-  useDumpListSync(setFollowedPlaylistsDumpsItems);
-
-  const [tab, setTab] = useState<FeedTab>("hot");
-  const [followedSection, setFollowedSection] = useState<FollowedSection>(
-    "users",
-  );
-
-  // When the logo is clicked it navigates to / with state { tab: "hot" }, producing
-  // a new location.key even if already on /. React to that to reset the active tab.
-  useEffect(() => {
-    const st = location.state as { tab?: string } | null;
-    if (st?.tab === "hot" || st?.tab === "new" || st?.tab === "followed") {
-      setTab(st.tab as FeedTab);
-    }
-  }, [location]);
+  function setTab(t: FeedTab) {
+    navigate(`/?tab=${t}`, { replace: true });
+  }
 
   // ── Main feed fetch ──
 
@@ -229,10 +120,7 @@ export function Index() {
         });
       } catch (err) {
         if ((err as Error).name === "AbortError") return;
-        setDumpsState({
-          status: "error",
-          error: friendlyFetchError(err),
-        });
+        setDumpsState({ status: "error", error: friendlyFetchError(err) });
       }
     })();
     return () => {
@@ -241,93 +129,18 @@ export function Index() {
     };
   }, [cached, token]);
 
-  // ── Followed feeds fetch (lazy, on first tab open) ──
+  // ── WS sync for main feed ──
 
-  useEffect(() => {
-    if (tab !== "followed" || !user || !token) return;
+  const setDumpsItems = useCallback(
+    (fn: (prev: Dump[]) => Dump[]) =>
+      setDumpsState((s) =>
+        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
+      ),
+    [],
+  );
+  useDumpListSync(setDumpsItems);
 
-    if (followedUsersDumps.status === "loading") {
-      if (cachedFollowedUsers) {
-        setFollowedUsersDumps({
-          status: "loaded",
-          dumps: cachedFollowedUsers.items,
-          hasMore: cachedFollowedUsers.hasMore,
-          page: cachedFollowedUsers.page,
-          loadingMore: false,
-        });
-      } else {
-        fetch(
-          `${API_URL}/api/follows/feed/users?page=1&limit=${DEFAULT_PAGE_SIZE}`,
-          {
-            headers: { Authorization: `Bearer ${token}` },
-          },
-        )
-          .then((r) => r.json())
-          .then((body) => {
-            const { items, hasMore } = body.data as PaginatedData<RawDump>;
-            setFollowedUsersDumps({
-              status: "loaded",
-              dumps: items.map(deserializeDump),
-              hasMore,
-              page: 1,
-              loadingMore: false,
-            });
-          })
-          .catch((err) =>
-            setFollowedUsersDumps({
-              status: "error",
-              error: friendlyFetchError(err),
-            })
-          );
-      }
-    }
-
-    if (followedPlaylistsDumps.status === "loading") {
-      if (cachedFollowedPlaylists) {
-        setFollowedPlaylistsDumps({
-          status: "loaded",
-          dumps: cachedFollowedPlaylists.items,
-          hasMore: cachedFollowedPlaylists.hasMore,
-          page: cachedFollowedPlaylists.page,
-          loadingMore: false,
-        });
-      } else {
-        fetch(
-          `${API_URL}/api/follows/feed/playlists?page=1&limit=${DEFAULT_PAGE_SIZE}`,
-          {
-            headers: { Authorization: `Bearer ${token}` },
-          },
-        )
-          .then((r) => r.json())
-          .then((body) => {
-            const { items, hasMore } = body.data as PaginatedData<RawDump>;
-            setFollowedPlaylistsDumps({
-              status: "loaded",
-              dumps: items.map(deserializeDump),
-              hasMore,
-              page: 1,
-              loadingMore: false,
-            });
-          })
-          .catch((err) =>
-            setFollowedPlaylistsDumps({
-              status: "error",
-              error: friendlyFetchError(err),
-            })
-          );
-      }
-    }
-  }, [
-    tab,
-    user,
-    token,
-    cachedFollowedUsers,
-    cachedFollowedPlaylists,
-    followedUsersDumps.status,
-    followedPlaylistsDumps.status,
-  ]);
-
-  // ── Load-more callbacks ──
+  // ── Load more ──
 
   const loadMore = useCallback(() => {
     if (
@@ -363,85 +176,7 @@ export function Index() {
       );
   }, [dumpsState, token]);
 
-  const loadMoreFollowedUsers = useCallback(() => {
-    if (
-      followedUsersDumps.status !== "loaded" ||
-      !followedUsersDumps.hasMore ||
-      followedUsersDumps.loadingMore ||
-      !token
-    ) return;
-    const nextPage = followedUsersDumps.page + 1;
-    setFollowedUsersDumps((s) =>
-      s.status === "loaded" ? { ...s, loadingMore: true } : s
-    );
-    fetch(
-      `${API_URL}/api/follows/feed/users?page=${nextPage}&limit=${DEFAULT_PAGE_SIZE}`,
-      {
-        headers: { Authorization: `Bearer ${token}` },
-      },
-    )
-      .then((r) => r.json())
-      .then((body) => {
-        const { items, hasMore } = body.data as PaginatedData<RawDump>;
-        setFollowedUsersDumps((s) =>
-          s.status === "loaded"
-            ? {
-              ...s,
-              dumps: [...s.dumps, ...items.map(deserializeDump)],
-              hasMore,
-              page: nextPage,
-              loadingMore: false,
-            }
-            : s
-        );
-      })
-      .catch(() =>
-        setFollowedUsersDumps((s) =>
-          s.status === "loaded" ? { ...s, loadingMore: false } : s
-        )
-      );
-  }, [followedUsersDumps, token]);
-
-  const loadMoreFollowedPlaylists = useCallback(() => {
-    if (
-      followedPlaylistsDumps.status !== "loaded" ||
-      !followedPlaylistsDumps.hasMore ||
-      followedPlaylistsDumps.loadingMore ||
-      !token
-    ) return;
-    const nextPage = followedPlaylistsDumps.page + 1;
-    setFollowedPlaylistsDumps((s) =>
-      s.status === "loaded" ? { ...s, loadingMore: true } : s
-    );
-    fetch(
-      `${API_URL}/api/follows/feed/playlists?page=${nextPage}&limit=${DEFAULT_PAGE_SIZE}`,
-      {
-        headers: { Authorization: `Bearer ${token}` },
-      },
-    )
-      .then((r) => r.json())
-      .then((body) => {
-        const { items, hasMore } = body.data as PaginatedData<RawDump>;
-        setFollowedPlaylistsDumps((s) =>
-          s.status === "loaded"
-            ? {
-              ...s,
-              dumps: [...s.dumps, ...items.map(deserializeDump)],
-              hasMore,
-              page: nextPage,
-              loadingMore: false,
-            }
-            : s
-        );
-      })
-      .catch(() =>
-        setFollowedPlaylistsDumps((s) =>
-          s.status === "loaded" ? { ...s, loadingMore: false } : s
-        )
-      );
-  }, [followedPlaylistsDumps, token]);
-
-  // ── Scroll save effects ──
+  // ── Scroll save / restore ──
 
   const sentinelRef = useInfiniteScroll(
     loadMore,
@@ -457,34 +192,6 @@ export function Index() {
     }, [dumpsState, saveState]),
   );
 
-  useScrollSave(
-    followedUsersDumps.status === "loaded",
-    useCallback((y) => {
-      if (followedUsersDumps.status !== "loaded") return;
-      saveFollowedUsers(
-        followedUsersDumps.dumps,
-        followedUsersDumps.page,
-        followedUsersDumps.hasMore,
-        y,
-      );
-    }, [followedUsersDumps, saveFollowedUsers]),
-  );
-
-  useScrollSave(
-    followedPlaylistsDumps.status === "loaded",
-    useCallback((y) => {
-      if (followedPlaylistsDumps.status !== "loaded") return;
-      saveFollowedPlaylists(
-        followedPlaylistsDumps.dumps,
-        followedPlaylistsDumps.page,
-        followedPlaylistsDumps.hasMore,
-        y,
-      );
-    }, [followedPlaylistsDumps, saveFollowedPlaylists]),
-  );
-
-  // ── Scroll restoration ──
-
   const scrollRestored = useRef(false);
   useLayoutEffect(() => {
     if (cached?.scrollY == null || scrollRestored.current) return;
@@ -498,19 +205,36 @@ export function Index() {
 
   const loading = dumpsState.status === "loading";
   const error = dumpsState.status === "error" ? dumpsState.error : null;
-  const dumps = dumpsState.status === "loaded" ? dumpsState.dumps : [];
+  const dumps = useMemo(
+    () => dumpsState.status === "loaded" ? dumpsState.dumps : [],
+    [dumpsState],
+  );
   const loadingMore = dumpsState.status === "loaded" && dumpsState.loadingMore;
+  const hasMore = dumpsState.status === "loaded" ? dumpsState.hasMore : false;
 
   const restIds = useMemo(() => new Set(dumps.map((d) => d.id)), [dumps]);
-  const combined = [...recentDumps.filter((d) => !restIds.has(d.id)), ...dumps]
-    .filter((d) => !deletedDumpIds.has(d.id) && d.id !== justDeletedId);
-
-  const sortedDumps = [...combined].sort(
-    tab === "new"
-      ? (a, b) => b.createdAt.getTime() - a.createdAt.getTime()
-      : (a, b) => hotScore(b) - hotScore(a),
+  const combined = useMemo(
+    () =>
+      [...recentDumps.filter((d) => !restIds.has(d.id)), ...dumps].filter(
+        (d) => !deletedDumpIds.has(d.id) && d.id !== justDeletedId,
+      ),
+    [recentDumps, restIds, dumps, deletedDumpIds, justDeletedId],
   );
 
+  const mainFeedProps: MainFeedProps = {
+    dumps: combined,
+    loading,
+    error,
+    hasMore,
+    loadingMore,
+    sentinelRef,
+    voteCounts,
+    myVotes,
+    user,
+    castVote,
+    removeVote,
+  };
+
   // ── Render ──
 
   const presenceRow = (
@@ -550,6 +274,13 @@ export function Index() {
       >
         New
       </button>
+      <button
+        type="button"
+        className={`feed-sort-btn${tab === "journal" ? " active" : ""}`}
+        onClick={() => setTab("journal")}
+      >
+        Journal
+      </button>
       {user && (
         <button
           type="button"
@@ -574,96 +305,23 @@ export function Index() {
         disableNew={dumpsState.status === "error"}
       />
 
-      {/* Shown only on narrow viewports */}
       <div className="index-below-header">
         {tabBar}
         {presenceRow}
       </div>
 
-      {/* Hot / New feed */}
-      {tab !== "followed" && (
-        <>
-          {loading && <p className="index-status">Loading…</p>}
-          {error && <ErrorCard title="Failed to load" message={error} />}
-
-          {!loading && !error && combined.length === 0 && (
-            <p className="index-status">No dumps yet. Be the first!</p>
-          )}
-
-          {!loading && !error && combined.length > 0 && (
-            <ul className="dump-feed">
-              {sortedDumps.map((dump) => (
-                <DumpCard
-                  key={dump.id}
-                  dump={dump}
-                  voteCount={voteCounts[dump.id] ?? dump.voteCount}
-                  voted={myVotes.has(dump.id)}
-                  canVote={!!user}
-                  castVote={castVote}
-                  removeVote={removeVote}
-                  isOwner={user?.id === dump.userId}
-                />
-              ))}
-            </ul>
-          )}
-
-          <div ref={sentinelRef} />
-          {loadingMore && <p className="feed-loading-more">Loading more…</p>}
-        </>
-      )}
-
-      {/* Followed feed */}
+      {tab === "hot" && <HotFeed {...mainFeedProps} />}
+      {tab === "new" && <NewFeed {...mainFeedProps} />}
+      {tab === "journal" && <JournalFeed {...mainFeedProps} />}
       {tab === "followed" && user && (
-        <div className="followed-feed">
-          <div className="feed-sort followed-sub-nav">
-            <button
-              type="button"
-              className={`feed-sort-btn${
-                followedSection === "users" ? " active" : ""
-              }`}
-              onClick={() => setFollowedSection("users")}
-            >
-              From people
-            </button>
-            <button
-              type="button"
-              className={`feed-sort-btn${
-                followedSection === "playlists" ? " active" : ""
-              }`}
-              onClick={() => setFollowedSection("playlists")}
-            >
-              From playlists
-            </button>
-          </div>
-
-          {followedSection === "users" && (
-            <FollowedSubFeed
-              state={followedUsersDumps}
-              voteCounts={voteCounts}
-              myVotes={myVotes}
-              user={user}
-              castVote={castVote}
-              removeVote={removeVote}
-              deletedDumpIds={deletedDumpIds}
-              emptyMessage="Follow some users to see their dumps here."
-              onLoadMore={loadMoreFollowedUsers}
-            />
-          )}
-
-          {followedSection === "playlists" && (
-            <FollowedSubFeed
-              state={followedPlaylistsDumps}
-              voteCounts={voteCounts}
-              myVotes={myVotes}
-              user={user}
-              castVote={castVote}
-              removeVote={removeVote}
-              deletedDumpIds={deletedDumpIds}
-              emptyMessage="Follow some public playlists to see their dumps here."
-              onLoadMore={loadMoreFollowedPlaylists}
-            />
-          )}
-        </div>
+        <FollowedFeed
+          voteCounts={voteCounts}
+          myVotes={myVotes}
+          user={user}
+          castVote={castVote}
+          removeVote={removeVote}
+          deletedDumpIds={deletedDumpIds}
+        />
       )}
     </div>
   );
diff --git a/src/pages/index/FollowedFeed.tsx b/src/pages/index/FollowedFeed.tsx
new file mode 100644
index 0000000..61da58c
--- /dev/null
+++ b/src/pages/index/FollowedFeed.tsx
@@ -0,0 +1,365 @@
+import { useCallback, useEffect, useState } from "react";
+import { DumpCard } from "../../components/DumpCard.tsx";
+import { ErrorCard } from "../../components/ErrorCard.tsx";
+import { API_URL, DEFAULT_PAGE_SIZE } from "../../config/api.ts";
+import { useAuth } from "../../hooks/useAuth.ts";
+import { useDumpListSync } from "../../hooks/useDumpListSync.ts";
+import { useFeedCache } from "../../hooks/useFeedCache.ts";
+import { useInfiniteScroll } from "../../hooks/useInfiniteScroll.ts";
+import { useScrollSave } from "../../hooks/useScrollSave.ts";
+import {
+  deserializeDump,
+  type Dump,
+  hydrateDump,
+  type PaginatedData,
+  type RawDump,
+  type User,
+} from "../../model.ts";
+import { friendlyFetchError } from "../../utils/apiError.ts";
+
+type FeedState =
+  | { status: "loading" }
+  | { status: "error"; error: string }
+  | {
+    status: "loaded";
+    dumps: Dump[];
+    hasMore: boolean;
+    page: number;
+    loadingMore: boolean;
+  };
+
+type FollowedSection = "users" | "playlists";
+
+interface FollowedFeedProps {
+  voteCounts: Record<string, number>;
+  myVotes: Set<string>;
+  user: User;
+  castVote: (id: string) => void;
+  removeVote: (id: string) => void;
+  deletedDumpIds: Set<string>;
+}
+
+// ── FollowedSubFeed ───────────────────────────────────────────────────────────
+
+interface FollowedSubFeedProps {
+  state: FeedState;
+  voteCounts: Record<string, number>;
+  myVotes: Set<string>;
+  user: User;
+  castVote: (id: string) => void;
+  removeVote: (id: string) => void;
+  deletedDumpIds: Set<string>;
+  emptyMessage: string;
+  onLoadMore: () => void;
+}
+
+function FollowedSubFeed({
+  state,
+  voteCounts,
+  myVotes,
+  user,
+  castVote,
+  removeVote,
+  deletedDumpIds,
+  emptyMessage,
+  onLoadMore,
+}: FollowedSubFeedProps) {
+  const enabled = state.status === "loaded" && state.hasMore &&
+    !state.loadingMore;
+  const sentinelRef = useInfiniteScroll(onLoadMore, enabled);
+
+  if (state.status === "loading") {
+    return <p className="index-status">Loading…</p>;
+  }
+  if (state.status === "error") {
+    return <ErrorCard title="Failed to load" message={state.error} />;
+  }
+
+  const visible = state.dumps.filter((d) => !deletedDumpIds.has(d.id));
+
+  if (visible.length === 0) {
+    return <p className="index-status">{emptyMessage}</p>;
+  }
+
+  return (
+    <>
+      <ul className="dump-feed">
+        {visible.map((dump) => (
+          <DumpCard
+            key={dump.id}
+            dump={dump}
+            voteCount={voteCounts[dump.id] ?? dump.voteCount}
+            voted={myVotes.has(dump.id)}
+            canVote={true}
+            castVote={castVote}
+            removeVote={removeVote}
+            isOwner={user.id === dump.userId}
+          />
+        ))}
+      </ul>
+      <div ref={sentinelRef} />
+      {state.loadingMore && <p className="feed-loading-more">Loading more…</p>}
+    </>
+  );
+}
+
+// ── FollowedFeed ──────────────────────────────────────────────────────────────
+
+export function FollowedFeed({
+  voteCounts,
+  myVotes,
+  user,
+  castVote,
+  removeVote,
+  deletedDumpIds,
+}: FollowedFeedProps) {
+  const { token } = useAuth();
+
+  const { cached: cachedUsers, saveState: saveUsers } = useFeedCache<Dump>(
+    `feed:followed-users:${user.id}`,
+    hydrateDump,
+  );
+  const { cached: cachedPlaylists, saveState: savePlaylists } = useFeedCache<
+    Dump
+  >(
+    `feed:followed-playlists:${user.id}`,
+    hydrateDump,
+  );
+
+  const [usersState, setUsersState] = useState<FeedState>(() =>
+    cachedUsers
+      ? {
+        status: "loaded",
+        dumps: cachedUsers.items,
+        hasMore: cachedUsers.hasMore,
+        page: cachedUsers.page,
+        loadingMore: false,
+      }
+      : { status: "loading" }
+  );
+
+  const [playlistsState, setPlaylistsState] = useState<FeedState>(() =>
+    cachedPlaylists
+      ? {
+        status: "loaded",
+        dumps: cachedPlaylists.items,
+        hasMore: cachedPlaylists.hasMore,
+        page: cachedPlaylists.page,
+        loadingMore: false,
+      }
+      : { status: "loading" }
+  );
+
+  const [section, setSection] = useState<FollowedSection>("users");
+
+  // WS sync
+  const setUsersItems = useCallback(
+    (fn: (prev: Dump[]) => Dump[]) =>
+      setUsersState((s) =>
+        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
+      ),
+    [],
+  );
+  useDumpListSync(setUsersItems);
+
+  const setPlaylistsItems = useCallback(
+    (fn: (prev: Dump[]) => Dump[]) =>
+      setPlaylistsState((s) =>
+        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
+      ),
+    [],
+  );
+  useDumpListSync(setPlaylistsItems);
+
+  // Fetch on mount if not cached
+  useEffect(() => {
+    if (!token) return;
+    if (usersState.status === "loading") {
+      fetch(
+        `${API_URL}/api/follows/feed/users?page=1&limit=${DEFAULT_PAGE_SIZE}`,
+        { headers: { Authorization: `Bearer ${token}` } },
+      )
+        .then((r) => r.json())
+        .then((body) => {
+          const { items, hasMore } = body.data as PaginatedData<RawDump>;
+          setUsersState({
+            status: "loaded",
+            dumps: items.map(deserializeDump),
+            hasMore,
+            page: 1,
+            loadingMore: false,
+          });
+        })
+        .catch((err) =>
+          setUsersState({ status: "error", error: friendlyFetchError(err) })
+        );
+    }
+    if (playlistsState.status === "loading") {
+      fetch(
+        `${API_URL}/api/follows/feed/playlists?page=1&limit=${DEFAULT_PAGE_SIZE}`,
+        { headers: { Authorization: `Bearer ${token}` } },
+      )
+        .then((r) => r.json())
+        .then((body) => {
+          const { items, hasMore } = body.data as PaginatedData<RawDump>;
+          setPlaylistsState({
+            status: "loaded",
+            dumps: items.map(deserializeDump),
+            hasMore,
+            page: 1,
+            loadingMore: false,
+          });
+        })
+        .catch((err) =>
+          setPlaylistsState({
+            status: "error",
+            error: friendlyFetchError(err),
+          })
+        );
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  // Scroll save
+  useScrollSave(
+    usersState.status === "loaded",
+    useCallback((y) => {
+      if (usersState.status !== "loaded") return;
+      saveUsers(usersState.dumps, usersState.page, usersState.hasMore, y);
+    }, [usersState, saveUsers]),
+  );
+  useScrollSave(
+    playlistsState.status === "loaded",
+    useCallback((y) => {
+      if (playlistsState.status !== "loaded") return;
+      savePlaylists(
+        playlistsState.dumps,
+        playlistsState.page,
+        playlistsState.hasMore,
+        y,
+      );
+    }, [playlistsState, savePlaylists]),
+  );
+
+  // Load-more callbacks
+  const loadMoreUsers = useCallback(() => {
+    if (
+      usersState.status !== "loaded" || !usersState.hasMore ||
+      usersState.loadingMore || !token
+    ) return;
+    const nextPage = usersState.page + 1;
+    setUsersState((s) =>
+      s.status === "loaded" ? { ...s, loadingMore: true } : s
+    );
+    fetch(
+      `${API_URL}/api/follows/feed/users?page=${nextPage}&limit=${DEFAULT_PAGE_SIZE}`,
+      { headers: { Authorization: `Bearer ${token}` } },
+    )
+      .then((r) => r.json())
+      .then((body) => {
+        const { items, hasMore } = body.data as PaginatedData<RawDump>;
+        setUsersState((s) =>
+          s.status === "loaded"
+            ? {
+              ...s,
+              dumps: [...s.dumps, ...items.map(deserializeDump)],
+              hasMore,
+              page: nextPage,
+              loadingMore: false,
+            }
+            : s
+        );
+      })
+      .catch(() =>
+        setUsersState((s) =>
+          s.status === "loaded" ? { ...s, loadingMore: false } : s
+        )
+      );
+  }, [usersState, token]);
+
+  const loadMorePlaylists = useCallback(() => {
+    if (
+      playlistsState.status !== "loaded" || !playlistsState.hasMore ||
+      playlistsState.loadingMore || !token
+    ) return;
+    const nextPage = playlistsState.page + 1;
+    setPlaylistsState((s) =>
+      s.status === "loaded" ? { ...s, loadingMore: true } : s
+    );
+    fetch(
+      `${API_URL}/api/follows/feed/playlists?page=${nextPage}&limit=${DEFAULT_PAGE_SIZE}`,
+      { headers: { Authorization: `Bearer ${token}` } },
+    )
+      .then((r) => r.json())
+      .then((body) => {
+        const { items, hasMore } = body.data as PaginatedData<RawDump>;
+        setPlaylistsState((s) =>
+          s.status === "loaded"
+            ? {
+              ...s,
+              dumps: [...s.dumps, ...items.map(deserializeDump)],
+              hasMore,
+              page: nextPage,
+              loadingMore: false,
+            }
+            : s
+        );
+      })
+      .catch(() =>
+        setPlaylistsState((s) =>
+          s.status === "loaded" ? { ...s, loadingMore: false } : s
+        )
+      );
+  }, [playlistsState, token]);
+
+  return (
+    <div className="followed-feed">
+      <div className="feed-sort followed-sub-nav">
+        <button
+          type="button"
+          className={`feed-sort-btn${section === "users" ? " active" : ""}`}
+          onClick={() => setSection("users")}
+        >
+          From people
+        </button>
+        <button
+          type="button"
+          className={`feed-sort-btn${
+            section === "playlists" ? " active" : ""
+          }`}
+          onClick={() => setSection("playlists")}
+        >
+          From playlists
+        </button>
+      </div>
+
+      {section === "users" && (
+        <FollowedSubFeed
+          state={usersState}
+          voteCounts={voteCounts}
+          myVotes={myVotes}
+          user={user}
+          castVote={castVote}
+          removeVote={removeVote}
+          deletedDumpIds={deletedDumpIds}
+          emptyMessage="Follow some users to see their dumps here."
+          onLoadMore={loadMoreUsers}
+        />
+      )}
+
+      {section === "playlists" && (
+        <FollowedSubFeed
+          state={playlistsState}
+          voteCounts={voteCounts}
+          myVotes={myVotes}
+          user={user}
+          castVote={castVote}
+          removeVote={removeVote}
+          deletedDumpIds={deletedDumpIds}
+          emptyMessage="Follow some public playlists to see their dumps here."
+          onLoadMore={loadMorePlaylists}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/index/HotFeed.tsx b/src/pages/index/HotFeed.tsx
new file mode 100644
index 0000000..a376f58
--- /dev/null
+++ b/src/pages/index/HotFeed.tsx
@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { DumpCard } from "../../components/DumpCard.tsx";
+import { ErrorCard } from "../../components/ErrorCard.tsx";
+import { hotScore } from "../../utils/hotScore.ts";
+import type { MainFeedProps } from "./types.ts";
+
+export function HotFeed(
+  {
+    dumps,
+    loading,
+    error,
+    hasMore,
+    loadingMore,
+    sentinelRef,
+    voteCounts,
+    myVotes,
+    user,
+    castVote,
+    removeVote,
+  }: MainFeedProps,
+) {
+  const sorted = useMemo(
+    () => [...dumps].sort((a, b) => hotScore(b) - hotScore(a)),
+    [dumps],
+  );
+
+  if (loading) return <p className="index-status">Loading…</p>;
+  if (error) return <ErrorCard title="Failed to load" message={error} />;
+  if (sorted.length === 0) {
+    return <p className="index-status">No dumps yet. Be the first!</p>;
+  }
+
+  return (
+    <>
+      <ul className="dump-feed">
+        {sorted.map((dump) => (
+          <DumpCard
+            key={dump.id}
+            dump={dump}
+            voteCount={voteCounts[dump.id] ?? dump.voteCount}
+            voted={myVotes.has(dump.id)}
+            canVote={!!user}
+            castVote={castVote}
+            removeVote={removeVote}
+            isOwner={user?.id === dump.userId}
+          />
+        ))}
+      </ul>
+      <div ref={sentinelRef} />
+      {loadingMore && <p className="feed-loading-more">Loading more…</p>}
+      {!hasMore && sorted.length > 0 && (
+        <p className="feed-end">You've reached the end.</p>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/index/JournalFeed.tsx b/src/pages/index/JournalFeed.tsx
new file mode 100644
index 0000000..080980e
--- /dev/null
+++ b/src/pages/index/JournalFeed.tsx
@@ -0,0 +1,66 @@
+import { useMemo } from "react";
+import { ErrorCard } from "../../components/ErrorCard.tsx";
+import { JournalCard, type JournalTier } from "../../components/JournalCard.tsx";
+import { hotScore } from "../../utils/hotScore.ts";
+import type { MainFeedProps } from "./types.ts";
+
+export function JournalFeed(
+  {
+    dumps,
+    loading,
+    error,
+    hasMore,
+    loadingMore,
+    sentinelRef,
+    voteCounts,
+    myVotes,
+    user,
+    castVote,
+    removeVote,
+  }: MainFeedProps,
+) {
+  const tiered = useMemo(() => {
+    const sorted = [...dumps].sort((a, b) => hotScore(b) - hotScore(a));
+    const n = sorted.length;
+    return sorted.map((dump, i) => {
+      const rank = i / n;
+      const tier: JournalTier = rank < 0.2
+        ? "large"
+        : rank < 0.5
+        ? "medium"
+        : "small";
+      return { dump, tier };
+    });
+  }, [dumps]);
+
+  if (loading) return <p className="index-status">Loading…</p>;
+  if (error) return <ErrorCard title="Failed to load" message={error} />;
+  if (tiered.length === 0) {
+    return <p className="index-status">No dumps yet. Be the first!</p>;
+  }
+
+  return (
+    <>
+      <ul className="journal-grid">
+        {tiered.map(({ dump, tier }) => (
+          <JournalCard
+            key={dump.id}
+            dump={dump}
+            tier={tier}
+            voteCount={voteCounts[dump.id] ?? dump.voteCount}
+            voted={myVotes.has(dump.id)}
+            canVote={!!user}
+            castVote={castVote}
+            removeVote={removeVote}
+            isOwner={user?.id === dump.userId}
+          />
+        ))}
+      </ul>
+      <div ref={sentinelRef} />
+      {loadingMore && <p className="feed-loading-more">Loading more…</p>}
+      {!hasMore && tiered.length > 0 && (
+        <p className="feed-end">You've reached the end.</p>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/index/NewFeed.tsx b/src/pages/index/NewFeed.tsx
new file mode 100644
index 0000000..18c632f
--- /dev/null
+++ b/src/pages/index/NewFeed.tsx
@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { DumpCard } from "../../components/DumpCard.tsx";
+import { ErrorCard } from "../../components/ErrorCard.tsx";
+import type { MainFeedProps } from "./types.ts";
+
+export function NewFeed(
+  {
+    dumps,
+    loading,
+    error,
+    hasMore,
+    loadingMore,
+    sentinelRef,
+    voteCounts,
+    myVotes,
+    user,
+    castVote,
+    removeVote,
+  }: MainFeedProps,
+) {
+  const sorted = useMemo(
+    () =>
+      [...dumps].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()),
+    [dumps],
+  );
+
+  if (loading) return <p className="index-status">Loading…</p>;
+  if (error) return <ErrorCard title="Failed to load" message={error} />;
+  if (sorted.length === 0) {
+    return <p className="index-status">No dumps yet. Be the first!</p>;
+  }
+
+  return (
+    <>
+      <ul className="dump-feed">
+        {sorted.map((dump) => (
+          <DumpCard
+            key={dump.id}
+            dump={dump}
+            voteCount={voteCounts[dump.id] ?? dump.voteCount}
+            voted={myVotes.has(dump.id)}
+            canVote={!!user}
+            castVote={castVote}
+            removeVote={removeVote}
+            isOwner={user?.id === dump.userId}
+          />
+        ))}
+      </ul>
+      <div ref={sentinelRef} />
+      {loadingMore && <p className="feed-loading-more">Loading more…</p>}
+      {!hasMore && sorted.length > 0 && (
+        <p className="feed-end">You've reached the end.</p>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/index/types.ts b/src/pages/index/types.ts
new file mode 100644
index 0000000..1c5bd7a
--- /dev/null
+++ b/src/pages/index/types.ts
@@ -0,0 +1,16 @@
+import type { RefObject } from "react";
+import type { Dump, User } from "../../model.ts";
+
+export interface MainFeedProps {
+  dumps: Dump[];
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadingMore: boolean;
+  sentinelRef: RefObject<HTMLDivElement | null>;
+  voteCounts: Record<string, number>;
+  myVotes: Set<string>;
+  user: User | null;
+  castVote: (id: string) => void;
+  removeVote: (id: string) => void;
+}
diff --git a/src/utils/hotScore.ts b/src/utils/hotScore.ts
new file mode 100644
index 0000000..5f9f1ce
--- /dev/null
+++ b/src/utils/hotScore.ts
@@ -0,0 +1,6 @@
+import type { Dump } from "../model.ts";
+
+export function hotScore(dump: Dump): number {
+  const ageHours = (Date.now() - dump.createdAt.getTime()) / 3_600_000;
+  return (dump.voteCount + 1) / Math.pow(ageHours + 2, 1.5);
+}