feat: revamp dashboard, trades, and add landing/legal pages
- Major UI updates across dashboard, analytics, posts, trades, settings - New landing page, robots/sitemap, contact/privacy/terms pages - Updated globals.css with extensive styling and new landing.css - Refactor signedRequest, realtime data hook, and dashboard store Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -3,74 +3,12 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import type { TrumpPost } from '@/types'
|
||||
import { getPosts } from '@/lib/api'
|
||||
import PostRow, { SignalPill, SourceIcon, fmtPct, timeAgo } from '@/components/dashboard/PostCards'
|
||||
|
||||
function PostDetail({ post, onClose }: { post: TrumpPost; onClose: () => void }) {
|
||||
return (
|
||||
<div className="card" style={{ padding: 24, position: 'sticky', top: 84 }}>
|
||||
<div className="row between" style={{ marginBottom: 16 }}>
|
||||
<span className="tiny">Signal detail</span>
|
||||
<button className="icon-btn" onClick={onClose} style={{ width: 28, height: 28 }}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="row gap-s" style={{ marginBottom: 14 }}>
|
||||
<SourceIcon source={post.source} />
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 500 }} className="mono">@realDonaldTrump</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{new Date(post.published_at).toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ fontSize: 15, lineHeight: 1.55, margin: '0 0 20px' }}>{post.text}</p>
|
||||
|
||||
<div className="row gap-s" style={{ marginBottom: 20 }}>
|
||||
<SignalPill signal={post.signal} />
|
||||
<span className={`chip ${post.sentiment === 'bullish' ? 'up' : post.sentiment === 'bearish' ? 'down' : 'neutral'}`}>{post.sentiment}</span>
|
||||
</div>
|
||||
|
||||
<div className="tiny" style={{ marginBottom: 8 }}>AI reasoning</div>
|
||||
<div style={{ padding: 14, background: 'var(--bg-sunk)', borderRadius: 10, border: '1px solid var(--line)', fontSize: 13, lineHeight: 1.55, color: 'var(--ink-2)', marginBottom: 20 }}>
|
||||
{post.ai_reasoning || 'No reasoning available.'}
|
||||
</div>
|
||||
|
||||
<div className="row between" style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 6 }}>
|
||||
<span>AI confidence</span>
|
||||
<span className="mono" style={{ color: 'var(--ink)', fontWeight: 500 }}>{post.ai_confidence}%</span>
|
||||
</div>
|
||||
<div className="confidence-bar"><div style={{ width: post.ai_confidence + '%' }} /></div>
|
||||
|
||||
{post.price_impact && (
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<div className="tiny" style={{ marginBottom: 10 }}>Actual price impact · {post.price_impact.asset}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
|
||||
{(['m5', 'm15', 'm1h'] as const).map(k => {
|
||||
const v = post.price_impact![k]
|
||||
const correct = post.price_impact!['correct_' + k as 'correct_m5' | 'correct_m15' | 'correct_m1h']
|
||||
const label = k === 'm5' ? '5m' : k === 'm15' ? '15m' : '1h'
|
||||
return (
|
||||
<div key={k} style={{ padding: 12, background: 'var(--bg-sunk)', borderRadius: 10, border: '1px solid var(--line)' }}>
|
||||
<div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 4 }}>{label}</div>
|
||||
<div className={`delta ${(v ?? 0) >= 0 ? 'up' : 'down'}`} style={{ fontSize: 15 }}>{fmtPct(v)}</div>
|
||||
{correct != null && (
|
||||
<div style={{ fontSize: 11, color: correct ? 'var(--up)' : 'var(--down)', marginTop: 4 }}>
|
||||
{correct ? '✓ correct' : '✗ missed'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import PostRow from '@/components/dashboard/PostCards'
|
||||
|
||||
export default function PostsPage() {
|
||||
const [posts, setPosts] = useState<TrumpPost[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [filter, setFilter] = useState('all')
|
||||
const [selected, setSelected] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
getPosts(200, 1).then(setPosts).catch(() => {}).finally(() => setLoading(false))
|
||||
@@ -88,8 +26,6 @@ export default function PostsPage() {
|
||||
neutral: posts.filter(p => p.sentiment === 'neutral').length,
|
||||
}
|
||||
|
||||
const selectedPost = posts.find(p => p.id === selected)
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
@@ -112,14 +48,17 @@ export default function PostsPage() {
|
||||
|
||||
{loading && <div style={{ textAlign: 'center', padding: 60, color: 'var(--ink-3)' }}>Loading…</div>}
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: selected ? '1fr 420px' : '1fr', gap: 24, alignItems: 'start' }}>
|
||||
{!loading && filtered.length === 0 ? (
|
||||
<div className="card" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
|
||||
No posts match the current sentiment filter.
|
||||
</div>
|
||||
) : (
|
||||
<div className="post-stream">
|
||||
{filtered.map(p => (
|
||||
<PostRow key={p.id} post={p} selected={selected === p.id} onClick={() => setSelected(selected === p.id ? null : p.id)} />
|
||||
<PostRow key={p.id} post={p} />
|
||||
))}
|
||||
</div>
|
||||
{selected && selectedPost && <PostDetail post={selectedPost} onClose={() => setSelected(null)} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user