From 3f35a3fba25c9705e5646b2e0f6b53d7d24f09c7 Mon Sep 17 00:00:00 2001
From: k <hidek6663@gmail.com>
Date: Sat, 30 May 2026 03:19:31 +0800
Subject: [PATCH] feat(ui): visually de-emphasise off-topic Trump posts in the
 feed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to fe88acb. Noise posts (not crypto-relevant, never AI-scored) now
read as 'skip me' at a glance in the list — no need to open them:

- sentiment chip → muted 'off-topic · not crypto' tag (was a colored chip)
- post text → dimmer (ink-4) + shorter preview (90 vs 180 chars)
- aside → single muted 'SKIPPED' tag instead of HOLD pill + empty AI metric

Scored posts (real crypto signals) are visually unchanged — full signal pill,
target chip, impact, and AI confidence.

tsc + build clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/dashboard/PostCards.tsx | 101 +++++++++++++++++++----------
 1 file changed, 68 insertions(+), 33 deletions(-)

diff --git a/components/dashboard/PostCards.tsx b/components/dashboard/PostCards.tsx
index 17ee5b3..810231a 100644
--- a/components/dashboard/PostCards.tsx
+++ b/components/dashboard/PostCards.tsx
@@ -129,47 +129,82 @@ const PostRow = memo(function PostRow({ post, selected, onClick }: PostRowProps)
             <span>·</span>
             <TimeAgo iso={post.published_at} suffix=" ago" />
             <span>·</span>
-            <span className={`chip ${post.sentiment === 'bullish' ? 'up' : post.sentiment === 'bearish' ? 'down' : 'neutral'}`} style={{ padding: '2px 8px', fontSize: 11 }}>
-              {post.sentiment}
-            </span>
+            {aiScored ? (
+              <span className={`chip ${post.sentiment === 'bullish' ? 'up' : post.sentiment === 'bearish' ? 'down' : 'neutral'}`} style={{ padding: '2px 8px', fontSize: 11 }}>
+                {post.sentiment}
+              </span>
+            ) : (
+              <span style={{
+                padding: '2px 8px', fontSize: 11, fontWeight: 600,
+                borderRadius: 4, color: 'var(--ink-4)',
+                background: 'var(--bg-sunk)', border: '1px solid var(--line)',
+                letterSpacing: '0.02em',
+              }}>
+                off-topic · not crypto
+              </span>
+            )}
           </div>
-          <p className="text" style={expanded ? { display: 'block', overflow: 'visible', WebkitLineClamp: 'unset' } : {}}>
-            {expanded ? post.text : (post.text.slice(0, 180) + (post.text.length > 180 ? '…' : ''))}
+          <p
+            className="text"
+            style={{
+              ...(expanded ? { display: 'block', overflow: 'visible', WebkitLineClamp: 'unset' } : {}),
+              // Noise posts are de-emphasised: dimmer text + shorter preview so
+              // the reader can skip them at a glance without opening.
+              ...(aiScored ? {} : { color: 'var(--ink-4)' }),
+            }}
+          >
+            {expanded
+              ? post.text
+              : (post.text.slice(0, aiScored ? 180 : 90) + (post.text.length > (aiScored ? 180 : 90) ? '…' : ''))}
           </p>
         </div>
         <div className="post-aside">
-          <SignalPill signal={post.signal} />
-          {/* Target asset chip for actionable signals */}
-          {post.target_asset && (post.signal === 'buy' || post.signal === 'short') && (
+          {aiScored ? (
+            <>
+              <SignalPill signal={post.signal} />
+              {/* Target asset chip for actionable signals */}
+              {post.target_asset && (post.signal === 'buy' || post.signal === 'short') && (
+                <span style={{
+                  fontSize: 10, fontWeight: 700, fontFamily: 'var(--mono)',
+                  padding: '2px 6px', borderRadius: 4,
+                  background: post.signal === 'buy' ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)',
+                  color: post.signal === 'buy' ? '#22c55e' : '#ef4444',
+                  letterSpacing: '0.04em',
+                }}>
+                  {post.target_asset}
+                  {post.expected_move_pct ? ` +${post.expected_move_pct}%` : ''}
+                </span>
+              )}
+              <div className="impact-mini">
+                {impact ? (
+                  <>
+                    <span className="tf">1h peak</span>
+                    <span className={`delta ${impact.m1h == null ? '' : impact.m1h >= 0 ? 'up' : 'down'}`}>
+                      {impact.m1h == null ? '…' : fmtPct(impact.m1h)}
+                    </span>
+                  </>
+                ) : (
+                  <span className="tf">no data</span>
+                )}
+              </div>
+              <div className="row gap-s" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
+                <span>AI</span>
+                <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>
+                  {post.ai_confidence}%
+                </span>
+              </div>
+            </>
+          ) : (
+            // Noise post: no signal, no AI score. Show a single muted SKIPPED
+            // tag instead of HOLD pill + empty AI metric, so the row reads as
+            // "ignore this" at a glance.
             <span style={{
-              fontSize: 10, fontWeight: 700, fontFamily: 'var(--mono)',
-              padding: '2px 6px', borderRadius: 4,
-              background: post.signal === 'buy' ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)',
-              color: post.signal === 'buy' ? '#22c55e' : '#ef4444',
-              letterSpacing: '0.04em',
+              fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
+              color: 'var(--ink-4)', textTransform: 'uppercase',
             }}>
-              {post.target_asset}
-              {post.expected_move_pct ? ` +${post.expected_move_pct}%` : ''}
+              skipped
             </span>
           )}
-          <div className="impact-mini">
-            {impact ? (
-              <>
-                <span className="tf">1h peak</span>
-                <span className={`delta ${impact.m1h == null ? '' : impact.m1h >= 0 ? 'up' : 'down'}`}>
-                  {impact.m1h == null ? '…' : fmtPct(impact.m1h)}
-                </span>
-              </>
-            ) : (
-              <span className="tf">no data</span>
-            )}
-          </div>
-          <div className="row gap-s" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
-            <span>AI</span>
-            <span className="mono" style={{ color: 'var(--ink-2)', fontWeight: 500 }}>
-              {aiScored ? `${post.ai_confidence}%` : '—'}
-            </span>
-          </div>
         </div>
       </div>