From b56aeab7529415e7f30fbb5397099589d24c7d74 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 1 Apr 2026 18:00:32 +0100
Subject: [PATCH 1/2] =?UTF-8?q?[#731]=20Reader=20tab=20v6=20=E2=80=94=20Mo?=
 =?UTF-8?q?leskine=20holdings=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename Portfolio tab to Reader (display only)
- PORTFOLIO title outside bordered box
- TOKEN HOLDINGS section title
- Each holding: Moleskine book left + stats right (flex-col sm:flex-row)
- Book shows genre + title matching Writer tab / home page design
- Stats: value + change, balance, price, entry, traded
- Donations + Trades sections unchanged

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx | 104 ++++++++++++++++++-----------
 1 file changed, 65 insertions(+), 39 deletions(-)

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index 834a3841..b1abce34 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -170,7 +170,7 @@ export default function ProfilePage() {
                 : "text-muted hover:text-foreground"
             }`}
           >
-            {t === "stories" ? "Writer" : t === "portfolio" ? "Portfolio" : "Activity"}
+            {t === "stories" ? "Writer" : t === "portfolio" ? "Reader" : "Activity"}
           </button>
         ))}
       </div>
@@ -1356,10 +1356,11 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
 
   return (
     <div className="mt-6 space-y-4">
-      {/* Portfolio summary — structured grid */}
+      {/* Portfolio summary */}
       {hasHoldings && (
+        <>
+        <p className="text-muted text-[10px] uppercase tracking-wider">Portfolio</p>
         <div className="border-border rounded border px-4 py-3 text-xs">
-          <p className="text-muted mb-2 text-[10px] uppercase tracking-wider">Portfolio</p>
           <div className="space-y-1">
             <div>
               <span className="text-muted">Value:</span>{" "}
@@ -1380,54 +1381,79 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
             )}
           </div>
         </div>
+        </>
       )}
 
-      {/* Token holdings — structured cards */}
-      {hasHoldings && holdings!.map((h) => (
+      {/* Token holdings */}
+      {hasHoldings && (
+        <>
+        <p className="text-muted text-[10px] uppercase tracking-wider">Token Holdings</p>
+        {holdings!.map((h) => (
         <div key={h.storyline.id} className="border-border rounded border text-xs">
-          {/* Title + genre */}
-          <div className="px-4 py-3 flex items-baseline gap-2">
+          {/* Moleskine book (left) + Info (right) */}
+          <div className="flex flex-col sm:flex-row gap-4 px-4 py-3">
             <Link
               href={`/story/${h.storyline.storyline_id}`}
-              className="font-body text-base font-bold text-accent hover:opacity-80 transition-opacity"
+              className="moleskine-notebook group relative block shrink-0 self-start"
+              style={{ width: "100px" }}
             >
-              {h.storyline.title}
+              <div
+                className="notebook-cover relative z-10 flex flex-col overflow-hidden border border-[var(--border)]"
+                style={{
+                  aspectRatio: "2/3",
+                  borderRadius: "5px 10px 10px 5px",
+                  backgroundColor: "#F5EFE6",
+                  boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
+                }}
+              >
+                <div
+                  className="pointer-events-none absolute inset-y-[-1px] right-[14px] z-20 w-[4px] rounded-[2px]"
+                  style={{ background: "rgba(139, 69, 19, 0.15)" }}
+                />
+                <div className="relative z-10 px-2 pt-2">
+                  <span className="rounded-sm bg-[var(--accent)]/10 px-1 py-0.5 text-[7px] font-semibold uppercase tracking-widest text-[var(--accent)]">
+                    {h.storyline.genre || "Uncategorized"}
+                  </span>
+                </div>
+                <div className="relative z-10 flex flex-1 items-center justify-center px-2 text-center">
+                  <span className="font-heading text-[11px] font-bold leading-tight text-[var(--accent)]">
+                    {h.storyline.title}
+                  </span>
+                </div>
+              </div>
             </Link>
-            {h.storyline.genre && (
-              <span className="bg-accent/10 text-accent rounded px-1.5 py-0.5 text-[10px] font-medium shrink-0">{h.storyline.genre}</span>
-            )}
-          </div>
-          {/* Stats */}
-          <div className="border-t border-border px-4 py-3 space-y-1">
-            <div>
-              <span className="text-muted">Value:</span>{" "}
-              <span className="text-foreground font-medium">{formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL}</span>
-              {plotUsd && <span className="text-muted"> ({formatUsdValue(Number(formatUnits(h.value, h.reserveDecimals)) * plotUsd)})</span>}
-              {h.priceChange !== null && (
-                <span className={`ml-2 font-medium ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}>
-                  {h.priceChange >= 0 ? "+" : ""}{h.priceChange.toFixed(1)}%
-                </span>
-              )}
-            </div>
-            <div><span className="text-muted">Balance:</span> <span className="text-foreground font-medium">{formatPrice(formatUnits(h.balance, 18))} tokens</span></div>
-            <div>
-              <span className="text-muted">Price:</span>{" "}
-              <span className="text-foreground font-medium">{formatPrice(formatUnits(h.price, 18))} {RESERVE_LABEL}</span>
-              {plotUsd != null && <span className="text-muted"> ({formatUsdValue(Number(formatUnits(h.price, 18)) * plotUsd)})</span>}
-            </div>
-            {h.entryPrice !== null && h.entryPrice > 0 && (
+            <div className="min-w-0 flex-1 space-y-1">
               <div>
-                <span className="text-muted">Entry:</span>{" "}
-                <span className="text-foreground font-medium">{formatPrice(h.entryPrice)} {RESERVE_LABEL}</span>
-                {plotUsd != null && <span className="text-muted"> ({formatUsdValue(h.entryPrice * plotUsd)})</span>}
+                <span className="text-foreground font-medium">{formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL}</span>
+                {plotUsd && <span className="text-muted"> ({formatUsdValue(Number(formatUnits(h.value, h.reserveDecimals)) * plotUsd)})</span>}
+                {h.priceChange !== null && (
+                  <span className={`ml-2 font-medium ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}>
+                    {h.priceChange >= 0 ? "+" : ""}{h.priceChange.toFixed(1)}%
+                  </span>
+                )}
               </div>
-            )}
-            {h.lastTraded && (
-              <div><span className="text-muted">Traded:</span> <span className="text-foreground font-medium">{new Date(h.lastTraded).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</span></div>
-            )}
+              <div><span className="text-muted">Balance:</span> <span className="text-foreground font-medium">{formatPrice(formatUnits(h.balance, 18))} tokens</span></div>
+              <div>
+                <span className="text-muted">Price:</span>{" "}
+                <span className="text-foreground font-medium">{formatPrice(formatUnits(h.price, 18))} {RESERVE_LABEL}</span>
+                {plotUsd != null && <span className="text-muted"> ({formatUsdValue(Number(formatUnits(h.price, 18)) * plotUsd)})</span>}
+              </div>
+              {h.entryPrice !== null && h.entryPrice > 0 && (
+                <div>
+                  <span className="text-muted">Entry:</span>{" "}
+                  <span className="text-foreground font-medium">{formatPrice(h.entryPrice)} {RESERVE_LABEL}</span>
+                  {plotUsd != null && <span className="text-muted"> ({formatUsdValue(h.entryPrice * plotUsd)})</span>}
+                </div>
+              )}
+              {h.lastTraded && (
+                <div><span className="text-muted">Traded:</span> <span className="text-foreground font-medium">{new Date(h.lastTraded).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</span></div>
+              )}
+            </div>
           </div>
         </div>
       ))}
+        </>
+      )}
 
       {/* Donations — structured card */}
       {(hasDonationsReceived || (isOwnProfile && hasDonationsGiven)) && (

From 5d8650c44cd0a8507c320f46b303214057c69989 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 1 Apr 2026 18:02:48 +0100
Subject: [PATCH 2/2] [#731] Fix T2a review: match Writer tab Moleskine book
 exactly

Width 120px, text-[8px] genre, text-xs title, plot count at bottom,
matching spine/border dimensions from Writer tab.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index b1abce34..c3b85763 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -1395,31 +1395,36 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
             <Link
               href={`/story/${h.storyline.storyline_id}`}
               className="moleskine-notebook group relative block shrink-0 self-start"
-              style={{ width: "100px" }}
+              style={{ width: "120px" }}
             >
               <div
                 className="notebook-cover relative z-10 flex flex-col overflow-hidden border border-[var(--border)]"
                 style={{
                   aspectRatio: "2/3",
-                  borderRadius: "5px 10px 10px 5px",
+                  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-[14px] z-20 w-[4px] rounded-[2px]"
+                  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 pt-2">
-                  <span className="rounded-sm bg-[var(--accent)]/10 px-1 py-0.5 text-[7px] font-semibold uppercase tracking-widest text-[var(--accent)]">
+                <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)]">
                     {h.storyline.genre || "Uncategorized"}
                   </span>
                 </div>
-                <div className="relative z-10 flex flex-1 items-center justify-center px-2 text-center">
-                  <span className="font-heading text-[11px] font-bold leading-tight text-[var(--accent)]">
+                <div className="relative z-10 flex flex-1 items-center justify-center px-2.5 text-center">
+                  <span className="font-heading text-xs font-bold leading-tight text-[var(--accent)]">
                     {h.storyline.title}
                   </span>
                 </div>
+                <div className="relative z-10 px-2.5 pb-2.5">
+                  <span className="text-[8px] text-[var(--text-muted)]">
+                    {h.storyline.plot_count} {h.storyline.plot_count === 1 ? "plot" : "plots"}
+                  </span>
+                </div>
               </div>
             </Link>
             <div className="min-w-0 flex-1 space-y-1">