k
c8dd7176fa
Lets the user collapse every post the AI judged off-topic (not crypto-related, never scored) so the feed shows only real signals. - PostCards exports isAiScored(post) as the single source of truth for what counts as noise — the card de-emphasis and the list filter now share it, so they can never disagree. - TrumpPageClient: 'Hide off-topic (N)' toggle in the filter row (only shown when N>0), with live noise count. Resets to page 1 on toggle. tsc + build clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
226 lines
8.6 KiB
TypeScript
226 lines
8.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useMemo } from 'react'
|
|
import { useLocale } from 'next-intl'
|
|
import type { TrumpPost } from '@/types'
|
|
import { getPosts } from '@/lib/api'
|
|
import { swrFetch } from '@/lib/cache'
|
|
import PostRow, { isAiScored } from '@/components/dashboard/PostCards'
|
|
import SystemControl from '@/components/signals/SystemControl'
|
|
import PageHint from '@/components/ui/PageHint'
|
|
import InfoTip from '@/components/ui/InfoTip'
|
|
import Pagination from '@/components/ui/Pagination'
|
|
|
|
const PAGE_SIZE = 30
|
|
|
|
const SENTIMENTS = ['all', 'bullish', 'bearish', 'neutral'] as const
|
|
type SentimentFilter = (typeof SENTIMENTS)[number]
|
|
type SignalFilter = 'all' | 'actionable' | 'buy' | 'short'
|
|
|
|
interface TrumpSignalPageProps {
|
|
initialPosts?: TrumpPost[] | null
|
|
}
|
|
|
|
export default function TrumpSignalPage({ initialPosts = null }: TrumpSignalPageProps) {
|
|
const locale = useLocale()
|
|
const isZh = false
|
|
const [posts, setPosts] = useState<TrumpPost[]>(initialPosts ?? [])
|
|
const [loading, setLoading] = useState(initialPosts === null)
|
|
const [loadErr, setLoadErr] = useState('')
|
|
const [sentFilter, setSentFilter] = useState<SentimentFilter>('all')
|
|
const [sigFilter, setSigFilter] = useState<SignalFilter>('all')
|
|
const [hideNoise, setHideNoise] = useState(false)
|
|
const [page, setPage] = useState(1)
|
|
|
|
|
|
useEffect(() => {
|
|
swrFetch(
|
|
'posts-500',
|
|
3 * 60_000,
|
|
() => getPosts(500, 1),
|
|
fresh => setPosts(fresh),
|
|
)
|
|
.then(p => { setPosts(p); setLoadErr('') })
|
|
.catch(e => setLoadErr(e instanceof Error ? e.message : 'Failed to load posts'))
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
const trumpPosts = useMemo(
|
|
() => posts.filter(p => (p.source || '') === 'truth'),
|
|
[posts],
|
|
)
|
|
|
|
const noiseCount = useMemo(
|
|
() => trumpPosts.filter(p => !isAiScored(p)).length,
|
|
[trumpPosts],
|
|
)
|
|
|
|
const filtered = useMemo(() => trumpPosts.filter(p => {
|
|
if (hideNoise && !isAiScored(p)) return false
|
|
if (sentFilter !== 'all' && p.sentiment !== sentFilter) return false
|
|
if (sigFilter === 'actionable' && p.signal !== 'buy' && p.signal !== 'short') return false
|
|
if (sigFilter === 'buy' && p.signal !== 'buy') return false
|
|
if (sigFilter === 'short' && p.signal !== 'short') return false
|
|
return true
|
|
}), [trumpPosts, sentFilter, sigFilter, hideNoise])
|
|
|
|
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
|
|
const safePage = Math.min(page, totalPages)
|
|
const pageItems = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE)
|
|
|
|
const sigCounts = useMemo(() => ({
|
|
all: trumpPosts.length,
|
|
actionable: trumpPosts.filter(p => p.signal === 'buy' || p.signal === 'short').length,
|
|
buy: trumpPosts.filter(p => p.signal === 'buy').length,
|
|
short: trumpPosts.filter(p => p.signal === 'short').length,
|
|
}), [trumpPosts])
|
|
|
|
const signalLabels: Record<SignalFilter, string> = {
|
|
all: 'All', actionable: 'Actionable', buy: 'Buy', short: 'Short',
|
|
}
|
|
const sentimentLabels: Record<SentimentFilter, string> = {
|
|
all: 'All', bullish: 'Bullish', bearish: 'Bearish', neutral: 'Neutral',
|
|
}
|
|
|
|
return (
|
|
<div className="page">
|
|
<div className="page-head">
|
|
<div>
|
|
<h1 className="page-title">① Trump Signal</h1>
|
|
<PageHint count={`${sigCounts.actionable} actionable / ${trumpPosts.length} posts`}>
|
|
Watches Trump's Truth Social posts in real time, AI-scores each one,
|
|
and only fires a trade when the conviction is high enough to move price.
|
|
</PageHint>
|
|
</div>
|
|
<span className="chip"><span className="live-dot" />Live</span>
|
|
</div>
|
|
|
|
<SystemControl system="trump" />
|
|
|
|
<div style={{
|
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
|
gap: 12, margin: '16px 0 12px', flexWrap: 'wrap',
|
|
}}>
|
|
{/* Signal filter tabs */}
|
|
<div className="nav-tabs" style={{ background: 'var(--bg-sunk)' }}>
|
|
{([
|
|
{ key: 'all', hint: 'Every post the scraper has captured.' },
|
|
{ key: 'actionable', hint: 'Only posts the AI flagged as BUY or SHORT.' },
|
|
{ key: 'buy', hint: 'Posts where the AI verdict is long BTC.' },
|
|
{ key: 'short', hint: 'Posts where the AI verdict is short BTC.' },
|
|
] as const).map(f => (
|
|
<button
|
|
key={f.key}
|
|
className={`nav-tab ${sigFilter === f.key ? 'active' : ''}`}
|
|
onClick={() => { setSigFilter(f.key); setPage(1) }}
|
|
>
|
|
{f.key === 'actionable' ? '🔥 ' : ''}
|
|
{signalLabels[f.key]}
|
|
<span style={{ color: 'var(--ink-4)', marginLeft: 4 }}>{sigCounts[f.key]}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Sentiment filter */}
|
|
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
{/* One-click collapse of off-topic (non-crypto, un-scored) posts. */}
|
|
{noiseCount > 0 && (
|
|
<button
|
|
onClick={() => { setHideNoise(v => !v); setPage(1) }}
|
|
title="Collapse posts the AI judged off-topic (not crypto-related)"
|
|
style={{
|
|
padding: '4px 10px', borderRadius: 6,
|
|
border: '1px solid var(--line)',
|
|
background: hideNoise ? 'var(--ink)' : 'transparent',
|
|
color: hideNoise ? 'var(--bg)' : 'var(--ink-3)',
|
|
fontSize: 11, cursor: 'pointer', fontWeight: 600,
|
|
marginRight: 4,
|
|
}}
|
|
>
|
|
{hideNoise ? `✓ Off-topic hidden (${noiseCount})` : `🙈 Hide off-topic (${noiseCount})`}
|
|
</button>
|
|
)}
|
|
<span style={{ fontSize: 11, color: 'var(--ink-4)', marginRight: 4 }}>
|
|
Sentiment
|
|
<InfoTip
|
|
text="Filters by the post's overall tone. Sentiment ≠ trade signal — a bearish post can still be a BUY if the market reads it as priced-in."
|
|
placement="left"
|
|
/>
|
|
</span>
|
|
{SENTIMENTS.map(f => (
|
|
<button
|
|
key={f}
|
|
onClick={() => { setSentFilter(f); setPage(1) }}
|
|
style={{
|
|
padding: '4px 10px', borderRadius: 6, border: '1px solid var(--line)',
|
|
background: sentFilter === f ? 'var(--ink)' : 'transparent',
|
|
color: sentFilter === f ? 'var(--bg)' : 'var(--ink-3)',
|
|
fontSize: 11, cursor: 'pointer', fontWeight: sentFilter === f ? 600 : 400,
|
|
}}
|
|
>
|
|
{sentimentLabels[f]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{loading && <TrumpSkeleton />}
|
|
|
|
{!loading && loadErr && (
|
|
<div className="card" style={{ padding: 24, textAlign: 'center', color: 'var(--down)' }}>
|
|
⚠️ {`Couldn't load signals — ${loadErr}`}
|
|
<div style={{ marginTop: 10 }}>
|
|
<button className="btn ghost" style={{ fontSize: 12, padding: '6px 14px' }}
|
|
onClick={() => location.reload()}>Retry</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !loadErr && filtered.length === 0 && (
|
|
<div className="card" style={{ padding: 48, textAlign: 'center', color: 'var(--ink-3)' }}>
|
|
No Trump signals match the current filter.
|
|
</div>
|
|
)}
|
|
|
|
{!loading && pageItems.length > 0 && (
|
|
<>
|
|
<div className="post-stream">
|
|
{pageItems.map(p => <PostRow key={p.id} post={p} />)}
|
|
</div>
|
|
|
|
<Pagination
|
|
page={safePage}
|
|
total={totalPages}
|
|
count={filtered.length}
|
|
pageSize={PAGE_SIZE}
|
|
onChange={setPage}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TrumpSkeleton() {
|
|
return (
|
|
<div className="post-stream" style={{ marginTop: 8 }}>
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="skeleton-card" style={{ marginBottom: 8 }}>
|
|
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
<div className="skeleton sk-line sk-w-q" />
|
|
<div className="skeleton sk-line" style={{ width: 60 }} />
|
|
</div>
|
|
<div className="skeleton sk-title sk-w-3q" />
|
|
<div className="skeleton sk-line sk-w-full" />
|
|
<div className="skeleton sk-line sk-w-half" />
|
|
<div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
|
|
<div className="skeleton sk-line-sm" style={{ width: 56 }} />
|
|
<div className="skeleton sk-line-sm" style={{ width: 80 }} />
|
|
<div className="skeleton sk-line-sm" style={{ width: 64 }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|