mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-08 12:07:23 -04:00
AmanTahiliani
07e5857760
Address the independent review blockers on PR #80 after rebasing onto the authoritative #72 Weekend Context API. - Replace the invented frontend WeekendContext with the exact backend contract (temporal_state, previous/focus/next meetings, previous_completed/active/next/ default_analysis sessions with availability). Every valid canonical payload now maps to a designed state via a total resolveViewState; a well-formed response can never fall through to the limited-data placeholder. - Make the canonical read the single source of truth: useWeekendContext no longer fans out to season/meetings/per-weekend/OpenF1/live queries. Only supplementary championship + news reads run, and only once the canonical context resolves. - Fix the Prepare/analysis flow: /preview is a stable alias that renders the preparation surface (PreSessionView) instead of redirecting back to the same between-races screen. - One primary navigation system per breakpoint: the mobile top-bar links are hidden so the bottom bar is the sole primary nav, and Admin is moved out of every Primary landmark into an operator-utilities toolbar. - Add Vitest coverage for the contract mapping, every temporal state, loading/ error/limited surfaces, the no-fanout guarantee, the /preview CTA, and the nav hierarchy; add hermetic Playwright journeys (seeded + injected canonical payloads), 390/768/1440 overflow checks, and Weekend visual snapshots. Retire the stale Command Center specs/snapshots. Co-authored-by: Cursor <cursoragent@cursor.com>
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { Link } from '@tanstack/react-router'
|
|
import { Compass, FileText, Home, Trophy } from 'lucide-react'
|
|
|
|
const PRIMARY = [
|
|
{ to: '/', label: 'Weekend', icon: Home, exact: true },
|
|
{ to: '/championship', label: 'Championship', icon: Trophy, exact: false },
|
|
{ to: '/briefing', label: 'Briefing', icon: FileText, exact: false },
|
|
{ to: '/explore', label: 'Explore', icon: Compass, exact: false },
|
|
] as const
|
|
|
|
/**
|
|
* Nav renders one primary navigation system per breakpoint:
|
|
* - Desktop/tablet: the top bar's `aria-label="Primary"` links.
|
|
* - Mobile (≤640px): the bottom `aria-label="Primary"` bar; the top bar's links
|
|
* are hidden via CSS so the two are never both active at once.
|
|
*
|
|
* Admin is an operator utility, deliberately outside every Primary landmark — it
|
|
* lives in a plain toolbar slot and never appears in the mobile bottom nav.
|
|
*/
|
|
export function Nav() {
|
|
return (
|
|
<>
|
|
<header className="app-nav">
|
|
<Link to="/" className="nav-logo">
|
|
box<em>-</em>box
|
|
</Link>
|
|
<nav className="nav-links" aria-label="Primary">
|
|
{PRIMARY.map(({ to, label, exact }) => (
|
|
<Link
|
|
key={to}
|
|
to={to}
|
|
activeProps={{ className: 'active' }}
|
|
activeOptions={exact ? { exact: true } : undefined}
|
|
>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="nav-utility" role="toolbar" aria-label="Operator utilities">
|
|
<Link
|
|
to="/admin"
|
|
className="nav-utility-link"
|
|
activeProps={{ className: 'nav-utility-link active' }}
|
|
>
|
|
Admin
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<nav className="app-bottom-nav" aria-label="Primary">
|
|
{PRIMARY.map(({ to, label, icon: Icon, exact }) => (
|
|
<Link
|
|
key={to}
|
|
to={to}
|
|
className="bottom-nav-link"
|
|
activeProps={{ className: 'bottom-nav-link active' }}
|
|
activeOptions={exact ? { exact: true } : undefined}
|
|
>
|
|
<Icon size={18} aria-hidden="true" />
|
|
<span>{label}</span>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|