v3: overhauled journal view

src/pages/index/JournalFeed.tsx

@@ -2,11 +2,8 @@ import { useMemo } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { ErrorCard } from "../../components/ErrorCard.tsx";
-import {
-  JournalCard,
-  type JournalTier,
-} from "../../components/JournalCard.tsx";
-import { hotScore } from "../../utils/hotScore.ts";
+import { JournalCard } from "../../components/JournalCard.tsx";
+import { composeJournal } from "../../utils/journalLayout.ts";
 import type { MainFeedProps } from "./types.ts";
 
 export function JournalFeed(
@@ -24,19 +21,7 @@ export function JournalFeed(
     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]);
+  const entries = useMemo(() => composeJournal(dumps), [dumps]);
 
   if (loading) {
     return (
@@ -46,7 +31,7 @@ export function JournalFeed(
     );
   }
   if (error) return <ErrorCard title={t`Failed to load`} message={error} />;
-  if (tiered.length === 0) {
+  if (entries.length === 0) {
     return (
       <p className="index-status">
         <Trans>No dumps yet. Be the first!</Trans>
@@ -57,11 +42,11 @@ export function JournalFeed(
   return (
     <>
       <ul className="journal-grid">
-        {tiered.map(({ dump, tier }) => (
+        {entries.map(({ dump, shape }) => (
           <JournalCard
             key={dump.id}
             dump={dump}
-            tier={tier}
+            shape={shape}
             voteCount={voteCounts[dump.id] ?? dump.voteCount}
             voted={myVotes.has(dump.id)}
             canVote={!!user}
@@ -77,7 +62,7 @@ export function JournalFeed(
           <Trans>Loading more…</Trans>
         </p>
       )}
-      {!hasMore && tiered.length > 0 && (
+      {!hasMore && entries.length > 0 && (
         <p className="feed-end">
           <Trans>You've reached the end.</Trans>
         </p>