mirror of
https://github.com/AgentSeal/codeburn.git
synced 2026-08-01 20:35:09 +00:00
6e3729cfa9
Ports the wireframe window shell into React with exact markup/classes:
- Shared components: Window, Sidebar (traffic lights, gradient mark, six
nav items with ⌘ keycaps + active `on` rail, status line), TopBar
(title, scope, period SegTabs Today/7D/30D/Month/6M/Custom, ProviderPop),
Panel, Stat, SegTabs, ProviderPop, Hint.
- usePolled(fetcher, deps): generic 30s poll + loading/error state,
errors normalized to CliError.
- App.tsx: local section state switches the content outlet; the Overview
placeholder round-trips getOverview('30days','all') and renders the raw
current.cost, with an honest first-run "locate CLI" state when the
codeburn binary isn't found (never a crash).
- Sidebar.test.tsx: six nav items, click routes onNavigate, active `on`.
18 lines
551 B
TypeScript
18 lines
551 B
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export type HintItem = { k?: string; label: ReactNode }
|
|
|
|
/** The `.hint` footer strip: keycap hints on the left, optional right-aligned note. */
|
|
export function Hint({ items, right }: { items: HintItem[]; right?: ReactNode }) {
|
|
return (
|
|
<div className="hint">
|
|
{items.map((item, i) => (
|
|
<span key={i}>
|
|
{item.k && <span className="k">{item.k}</span>}
|
|
{item.label}
|
|
</span>
|
|
))}
|
|
{right !== undefined && <span className="r">{right}</span>}
|
|
</div>
|
|
)
|
|
}
|