From 1e7e8c292282a352455e816f35b5864c61f7395b Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 12:00:03 +0100
Subject: [PATCH 1/2] [#802] Redesign stats as 3-col boxes in header info panel

Replace the separate market stats section with 3 bordered stat boxes
(Market Cap, Supply Minted, Deadline) matching the profile page box
style. On desktop, boxes sit inside the info panel next to the
Moleskine cover. On mobile, they stack as a 3-col grid below the
info rows.

Fixes #802

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 1feb325a..95007e27 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -333,48 +333,45 @@ function StoryHeader({
               </span>
             </div>
           </div>
-        </div>
-      </div>
 
-      {/* Market stats */}
-      {priceInfo && (
-        <div className="mt-4 text-xs">
-          <div className="border-border bg-surface grid grid-cols-1 sm:grid-cols-2 gap-2 rounded border px-3 py-2">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="min-w-0">
+          {/* 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="min-w-0">
-                <span className="text-muted block text-[10px] uppercase tracking-wider">
-                  Supply Minted
-                </span>
-                <span className="font-semibold text-accent">
-                  {formatSupply(priceInfo.totalSupply)} tokens
-                </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>
-            {storyline.sunset ? (
-              <div>
-                <span className="text-muted">Story complete</span>
-                <span className="text-foreground ml-2">
-                  {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} total
-                </span>
-              </div>
-            ) : storyline.last_plot_time ? (
-              <div>
-                <span className="text-muted block text-[10px] uppercase tracking-wider mb-1">
-                  Next Plot Publish Deadline
-                </span>
-                <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
+              <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.last_plot_time ? (
+                  <>
+                    <div className="text-foreground text-sm font-bold leading-tight">
+                      <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
+                    </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>
-            ) : null}
-          </div>
+            </div>
+          )}
         </div>
-      )}
+      </div>
       {!storyline.sunset && (
         <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} />
       )}

From f21c18feaae6c7d1c5a6e53bd73227ed3b1928b0 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 12:03:08 +0100
Subject: [PATCH 2/2] [#802] Fix MarketCapBox to match profile stat box pattern

Flip MarketCapBox from label-then-value to value-then-label layout,
matching the profile page stat box pattern (text-sm font-bold value
on top, text-[9px] text-muted label below). All 3 stat boxes now
render consistently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/MarketCapBox.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/MarketCapBox.tsx b/src/components/MarketCapBox.tsx
index fa32fd79..2c231d51 100644
--- a/src/components/MarketCapBox.tsx
+++ b/src/components/MarketCapBox.tsx
@@ -33,18 +33,16 @@ export function MarketCapBox({
   const changePercent = priceChange?.changePercent ?? null;
 
   return (
-    <div>
-      <span className="text-muted block text-[10px] uppercase tracking-wider">
-        Market Cap
-      </span>
-      <span className="font-semibold text-accent">
+    <>
+      <div className="text-foreground text-sm font-bold">
         {formatUsdValue(marketCapUsd)}
         {changePercent !== null && (
-          <span className={`ml-1.5 text-[10px] font-medium ${changePercent >= 0 ? "text-accent" : "text-error"}`}>
+          <span className={`ml-1 text-[10px] font-medium ${changePercent >= 0 ? "text-accent" : "text-error"}`}>
             {changePercent >= 0 ? "+" : ""}{changePercent.toFixed(1)}%
           </span>
         )}
-      </span>
-    </div>
+      </div>
+      <div className="text-muted text-[9px]">Market Cap</div>
+    </>
   );
 }