From ba4b0d7e83a276b3c832ba5fe74165775b8ada94 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 07:08:57 +0100
Subject: [PATCH] [#734] Moleskine polish: 8 fixes for Writer and Reader tabs

1. Increase book size to 150px desktop / 110px mobile
2. Remove duplicated title outside the book
3. Move TVL + Donations into right-side info area with separator
4. Mobile: always flex-row (info next to book)
5. Claim button inline on same row as Claimable value
6. Rename "TOKEN HOLDINGS" to "STORY TOKEN HOLDINGS"
7. Reader: info next to book (always flex-row)
8. Reader: same larger book size

Fixes #734

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx | 36 +++++++++++++-----------------
 src/components/ClaimRoyalties.tsx  |  7 ++----
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index c3b85763..998b8fe3 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -804,12 +804,11 @@ function StoryRow({
     <>
     <div className="border-border rounded border divide-y divide-border text-xs">
       {/* Moleskine book (left) + Info (right) */}
-      <div className="flex flex-col sm:flex-row gap-4 px-4 py-3">
+      <div className="flex flex-row gap-4 px-4 py-3">
         {/* Moleskine book card */}
         <Link
           href={`/story/${storyline.storyline_id}`}
-          className="moleskine-notebook group relative block shrink-0 self-start"
-          style={{ width: "120px" }}
+          className="moleskine-notebook group relative block shrink-0 self-start w-[110px] sm:w-[150px]"
         >
           <div
             className="notebook-cover relative z-10 flex flex-col overflow-hidden border border-[var(--border)]"
@@ -844,12 +843,6 @@ function StoryRow({
 
         {/* Info (right) */}
         <div className="min-w-0 flex-1 space-y-1">
-          <Link
-            href={`/story/${storyline.storyline_id}`}
-            className="font-body text-base font-bold text-accent hover:opacity-80 transition-opacity"
-          >
-            {storyline.title}
-          </Link>
           <div className="space-y-0.5">
             <div>
               <span className="text-muted">Plots:</span> <span className="text-foreground font-medium">{storyline.plot_count}</span>
@@ -864,17 +857,19 @@ function StoryRow({
             <div><span className="text-muted">Views:</span> <span className="text-foreground font-medium">{formatViewCount(storyline.view_count)}</span></div>
             <div><span className="text-muted">Created:</span> <span className="text-foreground font-medium">{storyline.block_timestamp ? new Date(storyline.block_timestamp).toLocaleDateString("en-US", { month: "short", day: "numeric" }) : "—"}</span></div>
           </div>
+          {/* TVL + Donations (inline in info area) */}
+          {storyline.token_address && (
+            <>
+              <div className="border-t border-border w-12 my-1.5" />
+              <div className="space-y-0.5">
+                <WriterTradingStats storyline={storyline} plotUsd={plotUsd} showPrice={false} />
+                <StoryDonationCount storylineId={storyline.storyline_id} tokenAddress={storyline.token_address} />
+              </div>
+            </>
+          )}
         </div>
       </div>
 
-      {/* TVL + Donations (below book row, no Price) */}
-      {storyline.token_address && (
-        <div className="px-4 py-2 space-y-1">
-          <WriterTradingStats storyline={storyline} plotUsd={plotUsd} showPrice={false} />
-          <StoryDonationCount storylineId={storyline.storyline_id} tokenAddress={storyline.token_address} />
-        </div>
-      )}
-
       {/* Deadline */}
       {!storyline.sunset && storyline.last_plot_time && (
         <div className="px-4 py-2">
@@ -1387,15 +1382,14 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
       {/* Token holdings */}
       {hasHoldings && (
         <>
-        <p className="text-muted text-[10px] uppercase tracking-wider">Token Holdings</p>
+        <p className="text-muted text-[10px] uppercase tracking-wider">Story Token Holdings</p>
         {holdings!.map((h) => (
         <div key={h.storyline.id} className="border-border rounded border text-xs">
           {/* Moleskine book (left) + Info (right) */}
-          <div className="flex flex-col sm:flex-row gap-4 px-4 py-3">
+          <div className="flex flex-row gap-4 px-4 py-3">
             <Link
               href={`/story/${h.storyline.storyline_id}`}
-              className="moleskine-notebook group relative block shrink-0 self-start"
-              style={{ width: "120px" }}
+              className="moleskine-notebook group relative block shrink-0 self-start w-[110px] sm:w-[150px]"
             >
               <div
                 className="notebook-cover relative z-10 flex flex-col overflow-hidden border border-[var(--border)]"
diff --git a/src/components/ClaimRoyalties.tsx b/src/components/ClaimRoyalties.tsx
index 2015862c..33044f69 100644
--- a/src/components/ClaimRoyalties.tsx
+++ b/src/components/ClaimRoyalties.tsx
@@ -111,8 +111,8 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary, plotUsd }
   return (
     <div className="text-xs space-y-1">
       <p className="text-muted text-[10px] uppercase tracking-wider">Royalties</p>
-      {/* Claimable row */}
-      <div>
+      {/* Claimable row + Claim button inline */}
+      <div className="flex items-center gap-2">
         <span className="text-muted">Claimable:</span>{" "}
         <span className={`font-medium ${unclaimed > BigInt(0) ? "text-accent" : "text-foreground"}`}>
           {formatTruncated(unclaimed, decimals)} {RESERVE_LABEL}
@@ -120,9 +120,6 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary, plotUsd }
         {plotUsd != null && unclaimed > BigInt(0) && (
           <span className="text-muted"> ({formatUsdValue(parseFloat(formatUnits(unclaimed, decimals)) * plotUsd)})</span>
         )}
-      </div>
-      {/* Claim button */}
-      <div className="flex items-center gap-2 justify-end">
         <button
           onClick={txState === "error" ? reset : executeClaim}
           disabled={