v3: added journal view to the index, code organization pass

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>
+      )}
+    </>
+  );
+}