From 62a3d899edb17546d165e7044ee70a34f3f5c746 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 09:04:47 +0000
Subject: [PATCH 1/2] [#289] Book-cover style story cards on home page

- StoryCard redesigned as portrait 2:3 aspect ratio book cover with
  genre tag (top), title (center), author (bottom)
- Metadata row (plot count, TVL, rating) moved below the card
- Grid: 2 columns on mobile, 3 on desktop
- Flat outline aesthetic preserved, no gradients or shadows

Fixes #289

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx             |  2 +-
 src/components/StoryCard.tsx | 99 ++++++++++++++++--------------------
 2 files changed, 45 insertions(+), 56 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9e38be24..0b5cb4ac 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -81,7 +81,7 @@ export default async function Home({
       </div>
 
       {/* Story grid */}
-      <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
         {storylines.map((s) => (
           <StoryCard key={s.id} storyline={s} preview={previews[s.storyline_id]} />
         ))}
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 3bd53a57..977c61e5 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -4,78 +4,67 @@ import { AgentBadge } from "./AgentBadge";
 import { WriterIdentityClient } from "./WriterIdentityClient";
 import { RatingSummary } from "./RatingSummary";
 import { StoryCardStats } from "./StoryCardStats";
-import { ViewCount } from "./ViewCount";
 
 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", {
-        month: "short",
-        day: "numeric",
-      })
-    : null;
+  const displayGenre = genre || storyline.genre;
 
   return (
-    <Link
-      href={`/story/${storyline.storyline_id}`}
-      className="border-border hover:border-accent-dim hover:bg-surface/50 flex flex-col rounded border px-4 py-3 transition-colors"
-    >
-      {/* 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 bg-surface shrink-0 rounded px-1.5 py-0.5 text-[10px]">
-            complete
+    <div className="flex flex-col">
+      {/* Book cover */}
+      <Link
+        href={`/story/${storyline.storyline_id}`}
+        className="border-border hover:border-accent-dim flex aspect-[2/3] flex-col justify-between rounded border px-5 py-6 transition-colors"
+      >
+        {/* Top: genre tag + completion badge */}
+        <div className="flex items-start justify-between gap-2">
+          <span className="text-muted text-[10px] uppercase tracking-widest">
+            {displayGenre || "Uncategorized"}
           </span>
-        )}
-      </div>
-
-      {/* Author + meta */}
-      <div className="text-muted mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
-        <span className="inline-flex items-center gap-0.5">By: <WriterIdentityClient address={storyline.writer_address} linkProfile={false} /></span>
-        <span>
-          {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-        </span>
-        <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
-        {dateStr && <span>{dateStr}</span>}
-        <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-          {genre || storyline.genre || <span className="text-muted italic">Uncategorized</span>}
-        </span>
-        {storyline.language && storyline.language !== "English" && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {storyline.language}
-          </span>
-        )}
-        {storyline.writer_type === 1 && <AgentBadge />}
-      </div>
+          {storyline.sunset && (
+            <span className="text-muted border-border shrink-0 rounded border px-1.5 py-0.5 text-[10px]">
+              complete
+            </span>
+          )}
+        </div>
 
-      {/* Stats row: price, TVL */}
-      {storyline.token_address && (
-        <div className="mt-2">
-          <StoryCardStats tokenAddress={storyline.token_address} />
+        {/* Center: title */}
+        <div className="flex flex-1 flex-col items-center justify-center px-2 text-center">
+          <h3 className="text-foreground text-base font-bold leading-tight tracking-tight sm:text-lg">
+            {storyline.title}
+          </h3>
+          {storyline.language && storyline.language !== "English" && (
+            <span className="text-muted mt-2 text-[10px]">
+              {storyline.language}
+            </span>
+          )}
         </div>
-      )}
 
-      {/* Genesis preview */}
-      {preview && (
-        <p className="text-muted mt-2 line-clamp-2 text-[11px] leading-relaxed">
-          {preview}
-        </p>
-      )}
+        {/* Bottom: author */}
+        <div className="text-muted flex items-center justify-center gap-1 text-xs">
+          <WriterIdentityClient address={storyline.writer_address} linkProfile={false} />
+          {storyline.writer_type === 1 && <AgentBadge />}
+        </div>
+      </Link>
 
-      {/* Rating */}
-      <div className="mt-auto pt-2">
+      {/* Metadata row below card */}
+      <div className="text-muted mt-2 flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-1 text-[10px]">
+        <div className="flex items-center gap-2">
+          <span>
+            {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
+          </span>
+          {storyline.token_address && (
+            <StoryCardStats tokenAddress={storyline.token_address} />
+          )}
+        </div>
         <RatingSummary storylineId={storyline.storyline_id} />
       </div>
-    </Link>
+    </div>
   );
 }

From 84389bca6b312886fe845bc7c47aafd99123ecab Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 09:06:41 +0000
Subject: [PATCH 2/2] [#289] Remove unused preview prop and genesis plot fetch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Book cover cards don't display previews — remove the dead code path
and the extra Supabase query.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx             | 16 +---------------
 src/components/StoryCard.tsx |  1 -
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b5cb4ac..8bcb0e20 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -38,22 +38,8 @@ export default async function Home({
   const supabase = createServerClient();
 
   let storylines: Storyline[] = [];
-  const previews: Record<number, string> = {};
   if (supabase) {
     storylines = await queryTab(supabase, tab, writer, page, genre, lang);
-    // Fetch genesis plot previews
-    if (storylines.length > 0) {
-      const { data: plots } = await supabase.from("plots")
-        .select("storyline_id, content")
-        .in("storyline_id", storylines.map((s) => s.storyline_id))
-        .eq("plot_index", 0)
-        .eq("contract_address", STORY_FACTORY.toLowerCase());
-      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;
@@ -83,7 +69,7 @@ export default async function Home({
       {/* Story grid */}
       <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
         {storylines.map((s) => (
-          <StoryCard key={s.id} storyline={s} preview={previews[s.storyline_id]} />
+          <StoryCard key={s.id} storyline={s} />
         ))}
       </div>
 
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 977c61e5..784c82df 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -11,7 +11,6 @@ export function StoryCard({
 }: {
   storyline: Storyline;
   genre?: string;
-  preview?: string;
 }) {
   const displayGenre = genre || storyline.genre;