bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): polish right rail empty states

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-07 13:36:41 -07:00
parent cedbdb9dd3
commit 63a0a351e7
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/components/layout/RightPanel.tsx
View File

@ -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>
)}