From f61abc071088e1b648b2a6a95ace9f3df95df2f3 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 15:14:07 +0100
Subject: [PATCH] [#813] Redesign storyline header into 3 clear zones

Zone 1 (Hero): Moleskine cover + title, rating, writer, genre only.
Removed stat boxes and plots info row from hero area.

Zone 2 (Stats Card): Separate bordered card with 6 stat cells in
responsive grid (3-col desktop, 2-col mobile):
- Row 1: Market Cap, Supply Minted, Deadline
- Row 2: Token Price, Plot Count, Created date

AddPlotButton moved below the stats card.
Zone 3 (Content) unchanged.

Fixes #813

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/page.tsx | 217 ++++++++++++++-------------
 1 file changed, 114 insertions(+), 103 deletions(-)

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 4feffef9..c197937f 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -258,122 +258,133 @@ function StoryHeader({
   storyline: Storyline;
   priceInfo: TokenPriceInfo | null;
 }) {
+  const createdDate = storyline.block_timestamp
+    ? new Date(storyline.block_timestamp).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+    : null;
+
   return (
-    <header className="border-border border-b pb-6">
-      {/* Moleskine cover + Info panel */}
-      <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
-        {/* Moleskine book cover */}
-        <div className="shrink-0 w-[130px] sm:w-[160px]">
-          <div
-            className="relative flex flex-col overflow-hidden border border-[var(--border)]"
-            style={{
-              aspectRatio: "2/3",
-              borderRadius: "5px 12px 12px 5px",
-              backgroundColor: "#F5EFE6",
-              boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
-            }}
-          >
+    <>
+      {/* Zone 1: Hero — Cover + Identity */}
+      <header className="border-border border-b pb-6">
+        <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
+          {/* Moleskine book cover */}
+          <div className="shrink-0 w-[130px] sm:w-[160px]">
             <div
-              className="pointer-events-none absolute inset-y-[-1px] right-[16px] z-20 w-[5px] rounded-[2px]"
-              style={{ background: "rgba(139, 69, 19, 0.15)" }}
-            />
-            <div className="relative z-10 px-2.5 pt-2.5">
-              <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-widest text-[var(--accent)]">
-                {storyline.genre || "Uncategorized"}
-              </span>
+              className="relative flex flex-col overflow-hidden border border-[var(--border)]"
+              style={{
+                aspectRatio: "2/3",
+                borderRadius: "5px 12px 12px 5px",
+                backgroundColor: "#F5EFE6",
+                boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
+              }}
+            >
+              <div
+                className="pointer-events-none absolute inset-y-[-1px] right-[16px] z-20 w-[5px] rounded-[2px]"
+                style={{ background: "rgba(139, 69, 19, 0.15)" }}
+              />
+              <div className="relative z-10 px-2.5 pt-2.5">
+                <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-widest text-[var(--accent)]">
+                  {storyline.genre || "Uncategorized"}
+                </span>
+              </div>
+              <div className="relative z-10 flex flex-1 items-center justify-center px-3 text-center">
+                <span className="font-heading text-sm sm:text-base font-bold leading-tight text-[var(--accent)]">
+                  {storyline.title}
+                </span>
+              </div>
+              <div className="relative z-10 px-2.5 pb-2.5">
+                <span className="text-[8px] text-[var(--text-muted)]">
+                  {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
+                </span>
+              </div>
             </div>
-            <div className="relative z-10 flex flex-1 items-center justify-center px-3 text-center">
-              <span className="font-heading text-sm sm:text-base font-bold leading-tight text-[var(--accent)]">
-                {storyline.title}
-              </span>
+          </div>
+
+          {/* Info panel */}
+          <div className="min-w-0 w-full sm:flex-1">
+            <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
+              {storyline.title}
+            </h1>
+            <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+              <RatingSummary storylineId={storyline.storyline_id} separator />
+              <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
             </div>
-            <div className="relative z-10 px-2.5 pb-2.5">
-              <span className="text-[8px] text-[var(--text-muted)]">
-                {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-              </span>
+            <div className="mt-3 space-y-1.5 text-xs">
+              <div className="flex items-center gap-1.5">
+                <span className="text-muted w-14 shrink-0">Writer</span>
+                <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
+                  <WriterIdentity address={storyline.writer_address} />
+                </Suspense>
+                {storyline.writer_type === 1 && <AgentBadge />}
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="text-muted w-14 shrink-0">Genre</span>
+                <span className="text-foreground font-medium">
+                  {storyline.genre || "Uncategorized"}
+                  {storyline.language && storyline.language !== "English" && (
+                    <span className="text-muted ml-1.5">· {storyline.language}</span>
+                  )}
+                </span>
+              </div>
             </div>
           </div>
         </div>
-
-        {/* Info panel */}
-        <div className="min-w-0 w-full sm:flex-1">
-          {/* Title */}
-          <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
-            {storyline.title}
-          </h1>
-
-          {/* Rating + Views */}
-          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
-            <RatingSummary storylineId={storyline.storyline_id} separator />
-            <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
-          </div>
-
-          {/* Info rows */}
-          <div className="mt-3 space-y-1.5 text-xs">
-            <div className="flex items-center gap-1.5">
-              <span className="text-muted w-14 shrink-0">Writer</span>
-              <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
-                <WriterIdentity address={storyline.writer_address} />
-              </Suspense>
-              {storyline.writer_type === 1 && <AgentBadge />}
+      </header>
+
+      {/* Zone 2: Stats Card + Action */}
+      {priceInfo && (
+        <div className="border-border rounded border px-3 py-3 mt-4">
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            {/* Row 1 */}
+            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+              <MarketCapBox
+                tokenAddress={storyline.token_address}
+                totalSupply={parseFloat(priceInfo.totalSupply)}
+                pricePerToken={parseFloat(priceInfo.pricePerToken)}
+              />
             </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-muted w-14 shrink-0">Plots</span>
-              <span className="text-foreground font-medium">
-                {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-              </span>
+            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+              <div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
+              <div className="text-muted text-[9px]">Supply Minted</div>
             </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-muted w-14 shrink-0">Genre</span>
-              <span className="text-foreground font-medium">
-                {storyline.genre || "Uncategorized"}
-                {storyline.language && storyline.language !== "English" && (
-                  <span className="text-muted ml-1.5">· {storyline.language}</span>
-                )}
-              </span>
+            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+              {storyline.sunset ? (
+                <>
+                  <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
+                  <div className="text-muted text-[9px]">Complete</div>
+                </>
+              ) : storyline.has_deadline && storyline.last_plot_time ? (
+                <>
+                  <div className="text-foreground text-sm font-bold leading-tight">
+                    <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
+                  </div>
+                  <div className="text-muted text-[9px]">Deadline</div>
+                </>
+              ) : (
+                <>
+                  <div className="text-foreground text-sm font-bold">—</div>
+                  <div className="text-muted text-[9px]">Deadline</div>
+                </>
+              )}
             </div>
-          </div>
-
-          {/* Stat boxes — inside info panel on desktop, below info rows */}
-          {priceInfo && (
-            <div className="mt-3 grid grid-cols-3 gap-2">
-              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-                <MarketCapBox
-                  tokenAddress={storyline.token_address}
-                  totalSupply={parseFloat(priceInfo.totalSupply)}
-                  pricePerToken={parseFloat(priceInfo.pricePerToken)}
-                />
-              </div>
-              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-                <div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
-                <div className="text-muted text-[9px]">Supply Minted</div>
-              </div>
-              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-                {storyline.sunset ? (
-                  <>
-                    <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
-                    <div className="text-muted text-[9px]">Complete</div>
-                  </>
-                ) : storyline.has_deadline && storyline.last_plot_time ? (
-                  <>
-                    <div className="text-foreground text-sm font-bold leading-tight">
-                      <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
-                    </div>
-                    <div className="text-muted text-[9px]">Deadline</div>
-                  </>
-                ) : (
-                  <>
-                    <div className="text-foreground text-sm font-bold">—</div>
-                    <div className="text-muted text-[9px]">Deadline</div>
-                  </>
-                )}
-              </div>
+            {/* Row 2 */}
+            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+              <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
+              <div className="text-muted text-[9px]">Token Price</div>
             </div>
-          )}
+            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+              <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
+              <div className="text-muted text-[9px]">{storyline.plot_count === 1 ? "Plot" : "Plots"}</div>
+            </div>
+            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+              <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
+              <div className="text-muted text-[9px]">Created</div>
+            </div>
+          </div>
         </div>
-      </div>
+      )}
       <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
-    </header>
+    </>
   );
 }