The first ship of #315 used a single text input + AM/PM toggle. The
spec (lines 30-32) explicitly mandates THREE controls per field:
hour input (1-12), minute input (00-59), and AM/PM toggle. This
follow-up commit refactors TimePicker12h to that shape while
keeping every behaviour from the first ship intact.
What changed
- src/lib/time-12h.ts:
- Added `splitCanonicalForPicker()` — seeds the 3-control picker's
separate hour and minute inputs from a canonical "HH:mm" value.
- Added `combineSplit(hour, minute, period)` — the new combine
path. Joins "${h}:${m}" and runs the result through
combineTextWithPeriod, preserving every disambiguation rule
(1-12 requires toggle, 0/13-23 unambiguous, embedded marker
overrides toggle).
- The hour field accepts a power-user shortcut: any separator
(":", ".", "-", " ") or AM/PM marker letter or 3-4 digit
compact form in the hour field means "I typed the whole time
here, ignore the minute field". Preserves the existing
e2e tests that fill the entire time string into one input.
- kept formatCanonicalAs12h + combineTextWithPeriod for the
power-user shortcut path.
- src/components/time-picker-12h.tsx: rewrote as 3 controls
(hour input, ":" separator, minute input, AM/PM radiogroup).
Imperative {commit, focus, select} handle still focuses the
hour input. dirtyRef preserved to avoid prop overwrite mid-edit.
periodRef still mirrors state for synchronous commit() reads.
- src/pages/executive-meetings.tsx: added `minuteTestId` props on
both inline editor pickers and both manage-form pickers
(`em-time-{start,end}-minute-${id}`,
`em-form-{start,end}Time-minute`). All other test IDs preserved.
- src/__tests__/time-12h.test.mjs: kept the 14 tests for the
text+period path; added 8 new tests for combineSplit covering
split-mode (1-12 ambiguous, 13-23 unambiguous, midnight, hour
power-user shortcut, bare-hour invalid, etc) — 22 tests pass.
- tests/executive-meetings-keyboard-editing.spec.mjs: updated
the Tab walks test to walk 8 stops (start hour → start minute
→ start AM → start PM → end hour → end minute → end AM →
end PM) and assert both typed values survive the focus
changes. The TYPING_SHAPES helper still works unchanged because
the hour field accepts full time strings via the power-user
shortcut.
- public/opengraph.jpg: reverted to HEAD~1 (was inadvertently
swept into the prior commit by the auto-commit; not part of
this task).
Validation
- Unit tests: 22/22 pass.
- E2E: Tab walks + canonical 24h + no-leading-zero + 12h-with-PM
+ compact+PM-toggle all pass against the new 3-control UI.
- TypeScript: clean.
riyadhafraa
4cb8532bb6