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 { useAppContext } from '../../context/AppContext';
import { fetchNews, type NewsArticle as MarketNewsArticle } from '../../lib/marketApi'; import { fetchNews, type NewsArticle as MarketNewsArticle } from '../../lib/marketApi';
import { SkeletonBlock, SkeletonText } from '../Skeleton'; import { SkeletonBlock, SkeletonText } from '../Skeleton';
import { Button } from '../ui/button'; import { Button } from '../ui/Primitives';
// ─── Portfolio Summary ──────────────────────────────────────────────────────── // ─── Portfolio Summary ────────────────────────────────────────────────────────
@ -61,8 +61,18 @@ function PortfolioSummary() {
{/* Rows */} {/* Rows */}
{positions.length === 0 ? ( {positions.length === 0 ? (
<div style={{ fontSize: 12, color: 'var(--muted-foreground)', padding: '12px 0', textAlign: 'center' }}> <div style={{
No open positions 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>
) : ( ) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@ -73,7 +83,7 @@ function PortfolioSummary() {
<div key={pos.id} style={{ <div key={pos.id} style={{
display: 'grid', display: 'grid',
gridTemplateColumns: '2fr 1.2fr 1fr 1.2fr', gridTemplateColumns: '2fr 1.2fr 1fr 1.2fr',
gap: 4, padding: '5px 0', gap: 4, padding: '8px 0',
borderBottom: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
alignItems: 'center', alignItems: 'center',
}}> }}>
@ -214,8 +224,21 @@ function NewsFeed() {
)} )}
{!loading && !error && news.length === 0 && ( {!loading && !error && news.length === 0 && (
<div style={{ fontSize: 12, color: 'var(--muted-foreground)', padding: '16px', textAlign: 'center' }}> <div style={{
{activeSymbol ? `No news found for ${activeSymbol}` : 'Search a ticker to see news'} 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> </div>
)} )}