feat: the redesigned Event Clock

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 <noreply@anthropic.com>

src/client/components/redesign/ViewCards.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+}