Ticker page: mockup drill-down layout
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user