From cdcda8764ecb32dee9cf18bf74fff55612f16f60 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 1 Apr 2026 15:25:01 +0100
Subject: [PATCH] =?UTF-8?q?[#721]=20Portfolio=20tab=20v3=20=E2=80=94=20min?=
 =?UTF-8?q?imal=20clean=20layout=20for=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Holdings: border-separated list items instead of bordered cards
- Primary row: title + genre badge + value + 24h% (flex-wrap)
- Secondary row: tokens · price · entry · date (compact, wrapping)
- Genre tags as lightweight accent badges, not bordered elements
- No toggles, all info visible
- Consistent with Stories tab v3 design language

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

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index 22638bb0..94451c88 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -1387,66 +1387,53 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
 
       {/* Token holdings */}
       {hasHoldings && (
-        <div className="space-y-2">
+        <div className="space-y-0 divide-y divide-border">
           {holdings!.map((h) => (
-            <div
-              key={h.storyline.id}
-              className="border-border rounded border px-4 py-3"
-            >
-              {/* Row 1: Title + value */}
-              <div className="flex items-start justify-between gap-3">
-                <div className="flex items-baseline gap-2">
-                  <Link
-                    href={`/story/${h.storyline.storyline_id}`}
-                    className="text-foreground hover:text-accent text-sm font-medium transition-colors"
-                  >
-                    {h.storyline.title}
-                  </Link>
-                  {h.storyline.genre && (
-                    <span className="border-border rounded border px-1.5 py-0.5 text-[10px] text-muted">
-                      {h.storyline.genre}
-                    </span>
-                  )}
-                </div>
-                <div className="flex shrink-0 items-center gap-1.5">
-                  <span className="text-accent text-sm font-medium">
-                    {formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL}
+            <div key={h.storyline.id} className="py-3">
+              {/* Primary: title + genre + value + change */}
+              <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+                <Link
+                  href={`/story/${h.storyline.storyline_id}`}
+                  className="text-foreground hover:text-accent text-sm font-medium transition-colors"
+                >
+                  {h.storyline.title}
+                </Link>
+                {h.storyline.genre && (
+                  <span className="bg-accent/10 text-accent rounded px-1.5 py-0.5 text-[9px] font-medium">
+                    {h.storyline.genre}
                   </span>
-                  {plotUsd && (
-                    <span className="text-muted text-xs">
-                      ({formatUsdValue(Number(formatUnits(h.value, h.reserveDecimals)) * plotUsd)})
-                    </span>
-                  )}
-                  {h.priceChange !== null && (
-                    <span className={`text-[10px] ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}>
-                      {h.priceChange >= 0 ? "+" : ""}{h.priceChange.toFixed(1)}%
-                    </span>
-                  )}
-                </div>
+                )}
+                <span className="text-accent text-sm font-medium ml-auto shrink-0">
+                  {formatPrice(formatUnits(h.value, h.reserveDecimals))} {RESERVE_LABEL}
+                </span>
+                {plotUsd && (
+                  <span className="text-muted text-xs shrink-0">
+                    ({formatUsdValue(Number(formatUnits(h.value, h.reserveDecimals)) * plotUsd)})
+                  </span>
+                )}
+                {h.priceChange !== null && (
+                  <span className={`text-[10px] shrink-0 ${h.priceChange >= 0 ? "text-accent" : "text-error"}`}>
+                    {h.priceChange >= 0 ? "+" : ""}{h.priceChange.toFixed(1)}%
+                  </span>
+                )}
               </div>
-              {/* Row 2: Inline stats */}
-              <div className="text-muted mt-1.5 flex flex-wrap gap-x-3 gap-y-0.5 text-xs">
+              {/* Secondary: compact stats */}
+              <div className="text-muted mt-1 flex flex-wrap gap-x-2 gap-y-0.5 text-[11px]">
                 <span>{formatPrice(formatUnits(h.balance, 18))} tokens</span>
-                <span className="text-border">&middot;</span>
-                <span>
-                  price <span className="text-foreground">{formatPrice(formatUnits(h.price, 18))} {RESERVE_LABEL}</span>
-                  {plotUsd != null && <span> (≈ {formatUsdValue(Number(formatUnits(h.price, 18)) * plotUsd)})</span>}
-                </span>
+                <span>&middot;</span>
+                <span>price {formatPrice(formatUnits(h.price, 18))} {RESERVE_LABEL}</span>
+                {plotUsd != null && <span>(≈ {formatUsdValue(Number(formatUnits(h.price, 18)) * plotUsd)})</span>}
                 {h.entryPrice !== null && h.entryPrice > 0 && (
                   <>
-                    <span className="text-border">&middot;</span>
-                    <span>
-                      entry <span className="text-foreground">{formatPrice(h.entryPrice)} {RESERVE_LABEL}</span>
-                      {plotUsd != null && <span> (≈ {formatUsdValue(h.entryPrice * plotUsd)})</span>}
-                    </span>
+                    <span>&middot;</span>
+                    <span>entry {formatPrice(h.entryPrice)} {RESERVE_LABEL}</span>
+                    {plotUsd != null && <span>(≈ {formatUsdValue(h.entryPrice * plotUsd)})</span>}
                   </>
                 )}
                 {h.lastTraded && (
                   <>
-                    <span className="text-border">&middot;</span>
-                    <span>
-                      {new Date(h.lastTraded).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
-                    </span>
+                    <span>&middot;</span>
+                    <span>{new Date(h.lastTraded).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</span>
                   </>
                 )}
               </div>