Ticker page: mockup drill-down layout
Deploy / lint (push) Successful in 7s
Deploy / test (push) Successful in 1m7s
Deploy / deploy (push) Successful in 37s

Restructures TickerDetailPage to match the Horizon mockup's ticker
drill-down while keeping every existing feature:

- Glass header card: eyebrow + big symbol/company, price with change
  and freshness, chips (composite score, next earnings, top-pick /
  open-trade pills) on the left; watchlist + Fetch All actions and the
  score fingerprint radar on the right (hover a corner for values).
- Data freshness bar (per-source age + refresh buttons) moves to the
  foot of the chart card, like the mockup's panel footer.
- Tabs extended to five: Analysis, Indicators, S/R Levels, Sentiment,
  Fundamentals - sentiment and fundamentals no longer stack below the
  analysis content, they are one tab away.
- ScoreCard gains showRadar prop so the fingerprint is not duplicated
  in the Dimensions section.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-10 07:59:13 +02:00
co-authored by Claude Fable 5
parent 02cf9d1cba
commit f9e12fc78c
2 changed files with 110 additions and 68 deletions
+5 -3
View File
@@ -10,6 +10,8 @@ interface ScoreCardProps {
/** Hide the composite ring/header when the composite is shown elsewhere
* (e.g. the Standing matrix) and this card only carries the dimension detail. */
showComposite?: boolean;
/** Hide the radar fingerprint when the page shows it elsewhere (ticker header). */
showRadar?: boolean;
}
function scoreColor(score: number): string {
@@ -55,7 +57,7 @@ function ScoreRing({ score }: { score: number }) {
);
}
export function ScoreCard({ compositeScore, dimensions, compositeBreakdown, showComposite = true }: ScoreCardProps) {
export function ScoreCard({ compositeScore, dimensions, compositeBreakdown, showComposite = true, showRadar = true }: ScoreCardProps) {
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
const toggleExpand = (dimension: string) => {
@@ -64,7 +66,7 @@ export function ScoreCard({ compositeScore, dimensions, compositeBreakdown, show
return (
<div className="glass p-5">
{(showComposite || dimensions.length >= 3) && (
{(showComposite || (showRadar && dimensions.length >= 3)) && (
<div className="flex flex-wrap items-center gap-4">
{showComposite && (compositeScore !== null ? (
<ScoreRing score={compositeScore} />
@@ -90,7 +92,7 @@ export function ScoreCard({ compositeScore, dimensions, compositeBreakdown, show
)}
</div>
)}
{dimensions.length >= 3 && (
{showRadar && dimensions.length >= 3 && (
<div
className={showComposite ? 'ml-auto' : 'mx-auto sm:mx-0'}
title="Score fingerprint — hover a corner for the exact value"