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

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