From 82fd0584b2d7d5a51d77d12b1300e263ea444527 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 18:38:03 +0000
Subject: [PATCH 1/2] [#208] Home page: sort dropdown, writer filter labels,
 richer cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace tab nav with Sort dropdown (custom Select component)
- Writer filter: "Human only"→"Human", "Agent only"→"AI"
- Filter bar: writer + sort on same row
- StoryCard: added date, rating summary, hover bg, improved layout
- New SortDropdown.tsx component using Select

Fixes #208

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx                |  8 ++++---
 src/components/SortDropdown.tsx | 37 +++++++++++++++++++++++++++++++++
 src/components/StoryCard.tsx    | 30 ++++++++++++++++++++------
 src/components/WriterFilter.tsx |  4 ++--
 4 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 src/components/SortDropdown.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index dad0f4c6..b429a872 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { createServerClient, type Storyline } from "../../lib/supabase";
 import { getTrendingStorylines, getRisingStorylines } from "../../lib/ranking";
 import { StoryCard } from "../components/StoryCard";
-import { TabNav } from "../components/TabNav";
+import { SortDropdown } from "../components/SortDropdown";
 import { WriterFilter, type WriterFilterValue } from "../components/WriterFilter";
 import Link from "next/link";
 
@@ -49,8 +49,10 @@ export default async function Home({
       </header>
 
       {/* Filter bar */}
-      <TabNav tabs={TABS} active={tab} basePath="/" extraParams={extraParams} />
-      <WriterFilter active={writer} tab={tab} basePath="/" className="mt-4" />
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <WriterFilter active={writer} tab={tab} basePath="/" />
+        <SortDropdown active={tab} writer={writer} basePath="/" />
+      </div>
 
       {/* Story grid */}
       <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
diff --git a/src/components/SortDropdown.tsx b/src/components/SortDropdown.tsx
new file mode 100644
index 00000000..6538f6e5
--- /dev/null
+++ b/src/components/SortDropdown.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Select } from "./Select";
+
+const SORT_OPTIONS = [
+  { value: "new", label: "Recent" },
+  { value: "trending", label: "Trending" },
+  { value: "rising", label: "Rising" },
+  { value: "completed", label: "Completed" },
+];
+
+interface SortDropdownProps {
+  active: string;
+  writer: string;
+  basePath?: string;
+}
+
+export function SortDropdown({ active, writer, basePath = "/" }: SortDropdownProps) {
+  const router = useRouter();
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-muted text-xs">Sort:</span>
+      <Select
+        value={active}
+        onChange={(v) => {
+          const params = new URLSearchParams({ tab: v });
+          if (writer && writer !== "all") params.set("writer", writer);
+          router.push(`${basePath}?${params.toString()}`);
+        }}
+        options={SORT_OPTIONS}
+        className="w-36"
+      />
+    </div>
+  );
+}
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 0c6857c4..ef20d2f7 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import type { Storyline } from "../../lib/supabase";
 import { truncateAddress } from "../../lib/utils";
 import { AgentBadge } from "./AgentBadge";
+import { RatingSummary } from "./RatingSummary";
 
 export function StoryCard({
   storyline,
@@ -10,25 +11,37 @@ export function StoryCard({
   storyline: Storyline;
   genre?: string;
 }) {
+  const dateStr = storyline.block_timestamp
+    ? new Date(storyline.block_timestamp).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      })
+    : null;
+
   return (
     <Link
       href={`/story/${storyline.storyline_id}`}
-      className="border-border hover:border-accent-dim block rounded border px-4 py-3 transition-colors"
+      className="border-border hover:border-accent-dim hover:bg-surface/50 flex flex-col rounded border px-4 py-3 transition-colors"
     >
-      <div className="flex items-start justify-between gap-3">
+      {/* Title + completion badge */}
+      <div className="flex items-start justify-between gap-2">
         <h3 className="text-foreground text-sm font-medium leading-snug">
           {storyline.title}
         </h3>
         {storyline.sunset && (
-          <span className="text-muted shrink-0 text-[10px]">complete</span>
+          <span className="text-muted bg-surface shrink-0 rounded px-1.5 py-0.5 text-[10px]">
+            complete
+          </span>
         )}
       </div>
-      <div className="text-muted mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs">
+
+      {/* Author + meta */}
+      <div className="text-muted mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
         <span>{truncateAddress(storyline.writer_address)}</span>
         <span>
-          {storyline.plot_count}{" "}
-          {storyline.plot_count === 1 ? "plot" : "plots"}
+          {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
         </span>
+        {dateStr && <span>{dateStr}</span>}
         {genre && (
           <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
             {genre}
@@ -36,6 +49,11 @@ export function StoryCard({
         )}
         {storyline.writer_type === 1 && <AgentBadge />}
       </div>
+
+      {/* Rating */}
+      <div className="mt-2">
+        <RatingSummary storylineId={storyline.storyline_id} />
+      </div>
     </Link>
   );
 }
diff --git a/src/components/WriterFilter.tsx b/src/components/WriterFilter.tsx
index 0eb357da..426f2454 100644
--- a/src/components/WriterFilter.tsx
+++ b/src/components/WriterFilter.tsx
@@ -2,8 +2,8 @@ import Link from "next/link";
 
 const WRITER_OPTIONS = [
   { value: "all", label: "All" },
-  { value: "human", label: "Human only" },
-  { value: "agent", label: "Agent only" },
+  { value: "human", label: "Human" },
+  { value: "agent", label: "AI" },
 ] as const;
 
 export type WriterFilterValue = (typeof WRITER_OPTIONS)[number]["value"];

From d8cf6bebb2e4e667edfc7401d116079c9c31d4c7 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 18:40:39 +0000
Subject: [PATCH 2/2] [#208] Add price/TVL stats row and genesis preview to
 StoryCard

- New StoryCardStats client component: fetches price + TVL per card
- StoryCard accepts optional preview prop (genesis plot first 120 chars)
- Home page fetches genesis previews server-side and passes to cards
- Stats show compact formatted price and TVL with reserve token label

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx                  | 16 ++++++++++-
 src/components/StoryCard.tsx      | 21 ++++++++++++--
 src/components/StoryCardStats.tsx | 47 +++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 src/components/StoryCardStats.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b429a872..38c003da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,8 +30,22 @@ export default async function Home({
   const supabase = createServerClient();
 
   let storylines: Storyline[] = [];
+  const previews: Record<number, string> = {};
   if (supabase) {
     storylines = await queryTab(supabase, tab, writer);
+    // Fetch genesis plot previews
+    if (storylines.length > 0) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { data: plots } = await (supabase.from("plots") as any)
+        .select("storyline_id, content")
+        .in("storyline_id", storylines.map((s) => s.storyline_id))
+        .eq("plot_index", 0);
+      if (plots) {
+        for (const p of plots as { storyline_id: number; content: string }[]) {
+          previews[p.storyline_id] = p.content.slice(0, 120);
+        }
+      }
+    }
   }
 
   const extraParams = writer !== "all" ? { writer } : undefined;
@@ -57,7 +71,7 @@ export default async function Home({
       {/* Story grid */}
       <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {storylines.map((s) => (
-          <StoryCard key={s.id} storyline={s} />
+          <StoryCard key={s.id} storyline={s} preview={previews[s.storyline_id]} />
         ))}
       </div>
 
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index ef20d2f7..40e02a2f 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -3,13 +3,16 @@ import type { Storyline } from "../../lib/supabase";
 import { truncateAddress } from "../../lib/utils";
 import { AgentBadge } from "./AgentBadge";
 import { RatingSummary } from "./RatingSummary";
+import { StoryCardStats } from "./StoryCardStats";
 
 export function StoryCard({
   storyline,
   genre,
+  preview,
 }: {
   storyline: Storyline;
   genre?: string;
+  preview?: string;
 }) {
   const dateStr = storyline.block_timestamp
     ? new Date(storyline.block_timestamp).toLocaleDateString("en-US", {
@@ -36,7 +39,7 @@ export function StoryCard({
       </div>
 
       {/* Author + meta */}
-      <div className="text-muted mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+      <div className="text-muted mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
         <span>{truncateAddress(storyline.writer_address)}</span>
         <span>
           {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
@@ -50,8 +53,22 @@ export function StoryCard({
         {storyline.writer_type === 1 && <AgentBadge />}
       </div>
 
+      {/* Stats row: price, TVL */}
+      {storyline.token_address && (
+        <div className="mt-2">
+          <StoryCardStats tokenAddress={storyline.token_address} />
+        </div>
+      )}
+
+      {/* Genesis preview */}
+      {preview && (
+        <p className="text-muted mt-2 line-clamp-2 text-[11px] leading-relaxed">
+          {preview}
+        </p>
+      )}
+
       {/* Rating */}
-      <div className="mt-2">
+      <div className="mt-auto pt-2">
         <RatingSummary storylineId={storyline.storyline_id} />
       </div>
     </Link>
diff --git a/src/components/StoryCardStats.tsx b/src/components/StoryCardStats.tsx
new file mode 100644
index 00000000..7e332a45
--- /dev/null
+++ b/src/components/StoryCardStats.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { formatUnits, type Address } from "viem";
+import { getTokenTVL, getTokenPrice } from "../../lib/price";
+import { IS_TESTNET } from "../../lib/contracts/constants";
+
+const reserveLabel = IS_TESTNET ? "WETH" : "$PLOT";
+
+function formatCompact(value: string): string {
+  const num = parseFloat(value);
+  if (num === 0) return "0";
+  if (num < 0.0001) return "<0.0001";
+  if (num < 1) return num.toPrecision(3);
+  if (num >= 1000) return `${(num / 1000).toFixed(1)}k`;
+  return num.toFixed(2);
+}
+
+export function StoryCardStats({ tokenAddress }: { tokenAddress: string }) {
+  const addr = tokenAddress as Address;
+
+  const { data: priceInfo } = useQuery({
+    queryKey: ["card-price", tokenAddress],
+    queryFn: () => getTokenPrice(addr),
+    staleTime: 60000,
+  });
+
+  const { data: tvlData } = useQuery({
+    queryKey: ["card-tvl", tokenAddress],
+    queryFn: () => getTokenTVL(addr),
+    staleTime: 60000,
+  });
+
+  const price = priceInfo
+    ? formatCompact(priceInfo.pricePerToken)
+    : "—";
+  const tvl = tvlData
+    ? formatCompact(tvlData.tvl)
+    : "—";
+
+  return (
+    <div className="text-muted flex flex-wrap gap-x-3 gap-y-0.5 text-[10px]">
+      <span>Price: <span className="text-foreground">{price} {reserveLabel}</span></span>
+      <span>TVL: <span className="text-foreground">{tvl} {reserveLabel}</span></span>
+    </div>
+  );
+}