Components
Calendar
Time is a dimension, not a place. The WeekStrip and month calendar don't navigate to a history screen — they re-aim the entire Today dashboard at another date (navDate).
WeekStrip, live
| Dot | Meaning | Active-day rendering |
|---|---|---|
| Red | entry has bleedIntensity | white, opaque |
| Dashed outline | future day, period predicted, none logged | white dashed |
| Grey | entry exists (no period/prediction) | white at 0.7 opacity |
| None | no entry | — |
Month calendar
Expands from the WeekStrip's calendar toggle with calExpand (0.28s, origin top-right) and stays open while the user hops between days. Day states compose: logged (.has-log), period (orange filled), predicted (dashed), selected (green ring), and the ⚡ peak marker.
| Day state | Rule |
|---|---|
.has-log | any day with a logged entry |
| Period | orange filled circle |
| Predicted | dashed outline on future days |
| Selected | green ring |
| ⚡ Peak | trainingFeel contains ⚡ Peak (legacy ⚡ Hulk equivalent) — never shown on predicted days |
| Month nav | green chevrons · × close · panel scrolls with page |
Why the calendar stays open
Hopping across days is a comparison task. Closing the panel per pick would turn a 5-second scan into five drawer animations — so the panel persists until explicitly dismissed.
Do
- ·Treat day selection as re-aiming the dashboard, not navigation
- ·Compose dot meanings — a day can be logged and predicted
- ·Keep predictions visually tentative (dashed, never filled)
Don't
- ·Show the ⚡ peak marker on predicted days
- ·Use the phase pastels as day fills — they are markers only
- ·Auto-close the month panel after a single pick
Accessibility
- —Day cells compose their state into the label:
aria-label="June 13, period logged". - —Dots are reinforced by the entry detail visible once a day is selected — color is never the only carrier.
- —The calendar toggle reflects state with
aria-expanded.