From a1e9ec49efdb4cdb2f78fc2d662c6b336daad351 Mon Sep 17 00:00:00 2001
From: k <hidek6663@gmail.com>
Date: Wed, 27 May 2026 16:28:05 +0800
Subject: [PATCH] fix: 3 display bugs found in full-page audit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. MacroVibesPageClient — funding stats rendered "undefined%" when
   latest_rate_pct / last_24h_avg_pct were null. `?.toFixed()` returns
   undefined inside a template literal → shows as the string "undefined%".
   Fixed: explicit null check → '—' fallback.

2. SettingsClient — broken internal anchor: href="#btc-settings-panel"
   but the section id is "btc-settings". "Open panel ↓" link did nothing.
   Fixed: corrected href to "#btc-settings".

3. KolPageClient — undefined CSS variables throughout the file:
   --bg-card (transparent) and --border (no border) were never defined
   in the design system (globals.css uses --surface and --line).
   KOL cards rendered with transparent bg and invisible borders.
   Fixed: --bg-card → --surface, --border → --line, --accent → --amber.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/[locale]/kol/KolPageClient.tsx          | 20 ++++++++++----------
 app/[locale]/macro/MacroVibesPageClient.tsx |  4 ++--
 app/[locale]/settings/SettingsClient.tsx    |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/[locale]/kol/KolPageClient.tsx b/app/[locale]/kol/KolPageClient.tsx
index 714f8e6..f7f7ed8 100644
--- a/app/[locale]/kol/KolPageClient.tsx
+++ b/app/[locale]/kol/KolPageClient.tsx
@@ -163,8 +163,8 @@ function DigestWidget({
   return (
     <div style={{
       marginBottom: 16, padding: 'clamp(12px, 3vw, 18px)',
-      borderRadius: 12, background: 'var(--bg-card)',
-      border: '1px solid var(--border)',
+      borderRadius: 12, background: 'var(--surface)',
+      border: '1px solid var(--line)',
     }}>
       <div style={{
         display: 'flex', justifyContent: 'space-between',
@@ -451,8 +451,8 @@ function WalletCheckWidget({
   return (
     <div style={{
       marginBottom: 16, padding: 'clamp(12px, 3vw, 18px)',
-      borderRadius: 12, background: 'var(--bg-card)',
-      border: '1px solid var(--border)',
+      borderRadius: 12, background: 'var(--surface)',
+      border: '1px solid var(--line)',
     }}>
       <div style={{
         display: 'flex', justifyContent: 'space-between',
@@ -506,7 +506,7 @@ function WalletCheckWidget({
               padding: '14px 16px',
               borderRadius: 12,
               background: 'var(--bg-sunk)',
-              border: '1px solid var(--border)',
+              border: '1px solid var(--line)',
             }}>
               <div style={{ minWidth: 0 }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
@@ -860,7 +860,7 @@ export default function KolPage({
           <button
             onClick={() => setTickerFilter(null)}
             style={{
-              background: 'var(--bg-sunk)', border: '1px solid var(--border)',
+              background: 'var(--bg-sunk)', border: '1px solid var(--line)',
               borderRadius: 4, padding: '2px 8px',
               cursor: 'pointer', fontSize: 11, color: 'var(--ink-2)',
             }}
@@ -901,13 +901,13 @@ export default function KolPage({
               onClick={() => openDetail(p.id)}
               style={{
                 padding: 14, borderRadius: 10,
-                background: 'var(--bg-card)',
-                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                border: '1px solid var(--line)',
                 cursor: 'pointer',
                 transition: 'border-color 0.15s',
               }}
-              onMouseEnter={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-              onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--border)')}
+              onMouseEnter={e => (e.currentTarget.style.borderColor = 'var(--amber)')}
+              onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--line)')}
             >
               {/* 顶部：作者 + 右侧操作区 */}
               <div style={{ display: 'flex', justifyContent: 'space-between',
diff --git a/app/[locale]/macro/MacroVibesPageClient.tsx b/app/[locale]/macro/MacroVibesPageClient.tsx
index b01ee7a..fc8afbe 100644
--- a/app/[locale]/macro/MacroVibesPageClient.tsx
+++ b/app/[locale]/macro/MacroVibesPageClient.tsx
@@ -274,12 +274,12 @@ function FundingPanel({
       }}>
         <StatBox
           label="Latest cycle"
-          value={`${snap.latest_rate_pct?.toFixed(4)}%`}
+          value={snap.latest_rate_pct == null ? '—' : `${snap.latest_rate_pct.toFixed(4)}%`}
           hint="The most recent funding payment, in % per cycle. Positive = longs pay shorts."
         />
         <StatBox
           label="Last 24h avg"
-          value={`${snap.last_24h_avg_pct?.toFixed(4)}%`}
+          value={snap.last_24h_avg_pct == null ? '—' : `${snap.last_24h_avg_pct.toFixed(4)}%`}
           hint="Average of the last 24 hours of funding cycles. Smooths out one-off prints."
         />
         <StatBox
diff --git a/app/[locale]/settings/SettingsClient.tsx b/app/[locale]/settings/SettingsClient.tsx
index f3d667e..ec29420 100644
--- a/app/[locale]/settings/SettingsClient.tsx
+++ b/app/[locale]/settings/SettingsClient.tsx
@@ -85,7 +85,7 @@ export default function SettingsClient() {
           <div className="settings-scope-copy">
             Strategy mode, BTC leverage, and de-risk behavior used by the Macro Vibes sleeve.
           </div>
-          <a href="#btc-settings-panel" className="settings-scope-link">Open panel ↓</a>
+          <a href="#btc-settings" className="settings-scope-link">Open panel ↓</a>
         </section>
 
         <section id="global-settings" className="settings-scope-card global">