/today-card-lab
Today Card
Sub-component demos · assembled cell previews · modal shell
What's showing in the Octa Today cell right now
The exact cell octa/desktop/app/page.tsx renders — <N2TodayCell tasks schedule location loading toggleDone toggleSubDone onAddTask />. Tasks list (grouped by category, with sub-items + completion), today's schedule (events sorted by start time, past struck-through), current location under the clock, and the inline add-task affordance. Octa wires onAddTask to POST /api/today + refetch; here the handlers are no-ops.
N2TodayCell · @iudofia2026/n2/cards
N2NextEventCell · @iudofia2026/n2/cards (sibling bento cell)
No hover tooltips — inline task & schedule interactions only
Unlike the Health cell (per-modality lattice tooltips), the Today cell has no hover tooltips. All interaction is inline and click-driven:
- Task checkbox →
toggleDone(id, done)· animated check, strike-through. - Task row → expands to reveal
context+sub_items. - Sub-item checkbox →
toggleSubDone(taskId, idx, done). - Add task bracket button → inline form →
onAddTask(label, sortOrder). - Schedule rows are read-only: sorted by
start_time, past events struck-through, next event highlighted.
Clock
Live clock + date display — top of TodayCell
Live
Today
TUESDAY, JULY 14
Schedule Row
Three states: past (struck-through), next (pulsing dot + blue), future (dim)
Past
Next (active)
Future
Task Item
Click to toggle. Check animates in via strokeDashoffset.
Unchecked
Interactive
Done
N2AddButton
Bracket button with spring hover/tap. Opens modal when wired.
Default
Opens modal
N2ArrowNav
Prev/next arrows — dim at rest, full on hover.
Default
N2NavProgress
Progress bars — filled, active (animating), pending. Click to advance.
3 items, index 1 active
Modal Shell
Full-screen overlay with animated card. Click outside to dismiss.
Trigger
Countdown
H:M:S display. Liveness dot pulses at 1Hz. SOON text label signals urgency.
Normal (1h 23m)
Soon (< 10 min)