From 63a0a351e76bceea64912209d5d3cbe264326f38 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Thu, 7 May 2026 13:36:41 -0700
Subject: [PATCH] refactor(ui): polish right rail empty states

---
 web/src/components/layout/RightPanel.tsx | 35 ++++++++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/web/src/components/layout/RightPanel.tsx b/web/src/components/layout/RightPanel.tsx
index ad62dd5..9deeacb 100644
--- a/web/src/components/layout/RightPanel.tsx
+++ b/web/src/components/layout/RightPanel.tsx
@@ -3,7 +3,7 @@ import { ArrowRight } from 'lucide-react';
 import { useAppContext } from '../../context/AppContext';
 import { fetchNews, type NewsArticle as MarketNewsArticle } from '../../lib/marketApi';
 import { SkeletonBlock, SkeletonText } from '../Skeleton';
-import { Button } from '../ui/button';
+import { Button } from '../ui/Primitives';
 
 // ─── Portfolio Summary ────────────────────────────────────────────────────────
 
@@ -61,8 +61,18 @@ function PortfolioSummary() {
 
       {/* Rows */}
       {positions.length === 0 ? (
-        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', padding: '12px 0', textAlign: 'center' }}>
-          No open positions
+        <div style={{
+          border: '1px dashed var(--border)',
+          borderRadius: 'var(--bl-radius-card)',
+          background: 'var(--card-elevated)',
+          color: 'var(--muted-foreground)',
+          padding: '18px 14px',
+          textAlign: 'center',
+        }}>
+          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--foreground)' }}>No open positions</div>
+          <div style={{ fontSize: 12, lineHeight: 1.5, marginTop: 4 }}>
+            Filled Trade Plans and manual entries will appear here.
+          </div>
         </div>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -73,7 +83,7 @@ function PortfolioSummary() {
               <div key={pos.id} style={{
                 display: 'grid',
                 gridTemplateColumns: '2fr 1.2fr 1fr 1.2fr',
-                gap: 4, padding: '5px 0',
+                gap: 4, padding: '8px 0',
                 borderBottom: '1px solid var(--border)',
                 alignItems: 'center',
               }}>
@@ -214,8 +224,21 @@ function NewsFeed() {
       )}
 
       {!loading && !error && news.length === 0 && (
-        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', padding: '16px', textAlign: 'center' }}>
-          {activeSymbol ? `No news found for ${activeSymbol}` : 'Search a ticker to see news'}
+        <div style={{
+          border: '1px dashed var(--border)',
+          borderRadius: 'var(--bl-radius-card)',
+          background: 'var(--card-elevated)',
+          color: 'var(--muted-foreground)',
+          margin: '8px 16px 16px',
+          padding: '18px 14px',
+          textAlign: 'center',
+        }}>
+          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--foreground)' }}>
+            {activeSymbol ? `No news for ${activeSymbol}` : 'No symbol selected'}
+          </div>
+          <div style={{ fontSize: 12, lineHeight: 1.5, marginTop: 4 }}>
+            {activeSymbol ? 'Try another ticker or check back after the next market update.' : 'Search a ticker to load market news.'}
+          </div>
         </div>
       )}