Lucas WintherandClaude Opus 5.5
50c6e91b00
The new reader app replaces the old UI: Checklist with a rail (focus pills, Next to expire, today's dailies, pinned routines), Timeline in a new and a classic look, Routines, Archive and a Settings area, in a Structured (default) and a Relaxed interface. It follows the approved Round 6 B and Round 7 mockups, corrected screen by screen with the owner. Reader data moves to a v2 store (gacha-tracker:v2:*). Existing v1 data is migrated on first load, a recovery copy is written first, and the v1 keys are never removed, so a rollback finds them unchanged. Redeem codes for Genshin arrive as their own feed. Also: live's urgency ramp, editable per theme; completion and section-complete fireworks; a returning-user tour; the design mockups, specs, plans, reviews and handoff record. Co-Authored-By: Claude Opus 5.5 <[email protected]>
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
export type MainView = "soon" | "timeline";
|
|
|
|
/**
|
|
* The Round 6 B view cards (`viewCards()`): a drawn Checklist and a drawn
|
|
* Timeline, used wherever the reader picks the view Event Clock opens on.
|
|
*/
|
|
export function ViewCards({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: MainView;
|
|
onChange: (view: MainView) => void;
|
|
}) {
|
|
return (
|
|
<div className="viewpick" role="group" aria-label="Default view">
|
|
<button
|
|
type="button"
|
|
className="vcard"
|
|
aria-pressed={value === "soon"}
|
|
onClick={() => onChange("soon")}
|
|
>
|
|
<div className="vprev list" aria-hidden="true">
|
|
<i />
|
|
<i />
|
|
<i />
|
|
</div>
|
|
<b>Checklist</b>
|
|
<small>A list, closest deadline first.</small>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="vcard"
|
|
aria-pressed={value === "timeline"}
|
|
onClick={() => onChange("timeline")}
|
|
>
|
|
<div className="vprev tl" aria-hidden="true">
|
|
{(
|
|
[
|
|
["#4EA8DE", "4%", "52%", 6],
|
|
["#F2A03D", "30%", "44%", 24],
|
|
["#3DD6A0", "50%", "46%", 42],
|
|
] as const
|
|
).map(([g, left, width, top]) => (
|
|
<i
|
|
key={g}
|
|
style={{ "--g": g, left, width, top } as CSSProperties}
|
|
/>
|
|
))}
|
|
<em />
|
|
</div>
|
|
<b>Timeline</b>
|
|
<small>Bars per game, today pinned.</small>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|