Calendar: the day sheet

nalum commented

2026-08-23 22:54:06 +00:00

Owner

Part of the calendar redesign. The design handoff (design_handoff_calendar, held outside the repo) is the source; the facts it depends on are repeated here so this issue stands alone.

The shipped sheet spends about 1,400px of ruled hour axis to show one dinner, and puts the day's untimed jobs in an unlabelled strip above the rule with no tick box.

Untimed first, with a heading and a count (No time set · 3 jobs), each row carrying its tick box. A due date may or may not carry a time, so that split is the day's real structure.
Timed second, and the axis collapses. Empty stretches become one line naming the gap — nothing until 16:00 · 6 hours — expandable, with Show all 24 hours for anyone dragging times about.
Occupied hours keep full pitch, so a 45-minute appointment and a one-hour class look different, but no row goes below 48px.
Empty hour rows are add targets.
Day-step buttons are icons with the date in the tooltip, and nothing truncates. The shipped header truncates one side and not the other.

One open question to settle while building: whether the sheet's add action offers both types or only events. A job created here needs an owner, which is a second decision the sheet does not currently ask.

Two requirements added after #213 shipped

The job sheet went out to the family's cluster three times before it was right.
Seven visual defects, none caught by a suite: pickers that unfolded forms
instead of opening, three Save buttons on a commit-on-blur screen, (optional)
labels, a reward's name used as a field label, an unstyled add row, checkboxes
with a ghosted tick, and a create form with a browser spinner. Every one had to
be found by a person looking at a screen.

1. Screenshot goldens are part of this ticket

Record gallery (Playwright) and Roborazzi cases for every surface this ticket
builds or visibly changes, and treat them as a deliverable rather than a
follow-up. Three of #213's defects — the unstyled add row, the ghosted
checkboxes, the spinner in the create form — were pixel faults that a golden
would have caught before a deploy did.

#172 deferred its goldens on the reasoning that later tickets would re-record
them. That reasoning was sound then and is not now: the row grammar and the
pickers are settled, so an image recorded here stays valid.

Mechanics, from AGENTS.md: a new case rides in the same commit as the code
that adds it — a commit that adds a gallery or Roborazzi case without its image
is red on its own, because check / web runs npm run test:screens and
android / build runs verifyRoborazziDebug. A re-recorded existing case
goes in its own commit, so the reviewable diff stays code.

2. Check for leaked form styling before you finish

Every visual defect on #213 came from one place: the shipped app's form
fragments reused inside the new row grammar. They pass every test, because the
tests assert the pieces exist rather than that the screen reads right.

Before you call this done, grep the surfaces you touched and report what you
found and what you did about each:

a raw <input> / OutlinedTextField / BasicTextField outside the row and
picker components — a form field dropped into a list of rows
type="number", which renders browser spinner arrows
btn, link-btn, btn-quiet or TextButton where a row or a quiet row
verb belongs — underlined links reading as broken text
(optional) in any label — §8 names that pattern as the form admitting it
should not have asked
any Save button on a surface that commits on blur, including Save changes and Save the points
a disabled-and-grey control where law 5 wants it absent
a record's title used as a field row's label — that column is for a
field's name (Who, When, Worth), and a long title wraps in it

If your ticket is the first to land after this was written, add the check to
AGENTS.md beside the goldens rule, so it stops being a thing I remember to say.

Update — the open question is closed, and the demo locks the sheet (2026-08-25)

Events only. A job needs an owner, and that decision belongs on the jobs board — so every create affordance in the calendar (the day sheet's primary, the toolbar ＋, the hour add-targets, the agenda's empty-day link) reads New event and says so. Nobody hunts for a job option that was never there.

From the locked calendar-demo.dc.html: the header carries ‹ › day-steppers (44px, the date in the tooltip) and a summary line (3 things · 2 people · today); untimed items sit first under No time set with a count; the timed axis sits under Through the day with Show all 24 hours / Collapse the quiet hours; gaps read nothing until 16:00 · 6 hours (or nothing after 21:00) and expand in place; empty hours are ＋ add at 09:00 targets; the footer is New event on this day beside a day ⋯ holding New event on this day and Show all 24 hours.

Part of the calendar redesign. The design handoff (`design_handoff_calendar`, held outside the repo) is the source; the facts it depends on are repeated here so this issue stands alone. The shipped sheet spends about 1,400px of ruled hour axis to show one dinner, and puts the day's untimed jobs in an unlabelled strip above the rule with no tick box. - **Untimed first, with a heading and a count** (`No time set · 3 jobs`), each row carrying its tick box. A due date may or may not carry a time, so that split is the day's real structure. - **Timed second, and the axis collapses.** Empty stretches become one line naming the gap — `nothing until 16:00 · 6 hours` — expandable, with `Show all 24 hours` for anyone dragging times about. - Occupied hours keep full pitch, so a 45-minute appointment and a one-hour class look different, but no row goes below 48px. - Empty hour rows are add targets. - Day-step buttons are icons with the date in the tooltip, and nothing truncates. The shipped header truncates one side and not the other. One open question to settle while building: whether the sheet's add action offers both types or only events. A job created here needs an owner, which is a second decision the sheet does not currently ask. --- ## Two requirements added after #213 shipped The job sheet went out to the family's cluster three times before it was right. Seven visual defects, none caught by a suite: pickers that unfolded forms instead of opening, three Save buttons on a commit-on-blur screen, `(optional)` labels, a reward's name used as a field label, an unstyled add row, checkboxes with a ghosted tick, and a create form with a browser spinner. Every one had to be found by a person looking at a screen. ### 1. Screenshot goldens are part of this ticket Record gallery (Playwright) and Roborazzi cases for every surface this ticket builds or visibly changes, and treat them as a deliverable rather than a follow-up. Three of #213's defects — the unstyled add row, the ghosted checkboxes, the spinner in the create form — were pixel faults that a golden would have caught before a deploy did. `#172` deferred its goldens on the reasoning that later tickets would re-record them. That reasoning was sound then and is not now: the row grammar and the pickers are settled, so an image recorded here stays valid. Mechanics, from AGENTS.md: a **new** case rides in the same commit as the code that adds it — a commit that adds a gallery or Roborazzi case without its image is red on its own, because `check / web` runs `npm run test:screens` and `android / build` runs `verifyRoborazziDebug`. A **re-recorded existing** case goes in its own commit, so the reviewable diff stays code. ### 2. Check for leaked form styling before you finish Every visual defect on #213 came from one place: the shipped app's form fragments reused inside the new row grammar. They pass every test, because the tests assert the pieces exist rather than that the screen reads right. Before you call this done, grep the surfaces you touched and report what you found and what you did about each: - a raw `<input>` / `OutlinedTextField` / `BasicTextField` outside the row and picker components — a form field dropped into a list of rows - `type="number"`, which renders browser spinner arrows - `btn`, `link-btn`, `btn-quiet` or `TextButton` where a row or a quiet row verb belongs — underlined links reading as broken text - `(optional)` in any label — §8 names that pattern as the form admitting it should not have asked - **any Save button on a surface that commits on blur**, including `Save changes` and `Save the points` - a disabled-and-grey control where law 5 wants it absent - a record's title used as a field row's `label` — that column is for a field's name (`Who`, `When`, `Worth`), and a long title wraps in it If your ticket is the first to land after this was written, add the check to AGENTS.md beside the goldens rule, so it stops being a thing I remember to say. --- ## Update — the open question is closed, and the demo locks the sheet (2026-08-25) **Events only.** A job needs an owner, and that decision belongs on the jobs board — so every create affordance in the calendar (the day sheet's primary, the toolbar ＋, the hour add-targets, the agenda's empty-day link) reads *New event* and says so. Nobody hunts for a job option that was never there. From the locked `calendar-demo.dc.html`: the header carries ‹ › day-steppers (44px, the date in the tooltip) and a summary line (`3 things · 2 people · today`); untimed items sit first under `No time set` with a count; the timed axis sits under `Through the day` with `Show all 24 hours` / `Collapse the quiet hours`; gaps read `nothing until 16:00 · 6 hours` (or `nothing after 21:00`) and expand in place; empty hours are `＋ add at 09:00` targets; the footer is `New event on this day` beside a day `⋯` holding *New event on this day* and *Show all 24 hours*.

nalum added the

enhancement

android

web

labels

2026-08-23 22:54:06 +00:00

nalum referenced this issue

2026-08-23 22:54:30 +00:00

Order of work for the calendar redesign (#187-#198) #199

nalum added the

area/calendar

label

2026-08-23 22:57:21 +00:00

nalum referenced this issue

2026-08-26 00:21:00 +00:00

feat(calendar): the day sheet — untimed first, the axis collapses #261

nalum referenced this issue from a commit

2026-08-26 00:21:00 +00:00

feat(calendar): the day sheet — untimed first, the axis collapses, web

nalum referenced this issue from a commit

2026-08-26 00:21:00 +00:00

feat(calendar): the day sheet — untimed first, the axis collapses, compose twin

nalum commented

2026-08-26 03:24:26 +00:00

Author

Owner

Delivered in PR #261: the §2.7 day sheet — untimed first (birthdays, dinner), the timed axis below, one CalendarItemRow grammar throughout, tick as a full completion site.

nalum referenced this issue

2026-08-26 03:24:40 +00:00

Order of work for the calendar redesign (#187-#198) #199

nalum referenced this issue from a commit

2026-08-26 03:45:36 +00:00

feat(calendar): the day sheet — untimed first, the axis collapses, web

nalum referenced this issue from a commit

2026-08-26 03:45:36 +00:00

feat(calendar): the day sheet — untimed first, the axis collapses, compose twin

nalum referenced this issue from a commit

2026-08-26 04:32:31 +00:00

feat(calendar): the day sheet — untimed first, the axis collapses, web