2026-06-10 17:39:19 -04:00
1 changed files with 153 additions and 0 deletions
@@ -0,0 +1,153 @@
+---
+phase: 03-event-write-back-pwa-install
+plan: 12
+subsystem: pwa/EventForm
+tags: [tdd, gap-closure, accessibility, pwa, calendar]
+dependency_graph:
+  requires: [03-05, 03-06]
+  provides: [WR-03-fix, WR-05-fix, WR-07-fix, IN-03-fix, PWA-01-verified, PWA-02-verified]
+  affects: [apps/pwa/src/components/EventForm.tsx, apps/pwa/src/store/calendarStore.ts]
+tech_stack:
+  added: []
+  patterns:
+    - occurrence?.uid in reset effect deps (reactive re-population)
+    - local-accessor-only date extraction (parseDateTime WR-05)
+    - inline Tab/Shift+Tab focus trap on role=dialog (WR-07)
+    - exported todayIso single source of truth (IN-03)
+key_files:
+  created: []
+  modified:
+    - apps/pwa/src/components/EventForm.tsx
+    - apps/pwa/src/components/EventForm.test.tsx
+    - apps/pwa/src/store/calendarStore.ts
+    - apps/pwa/vitest.config.ts
+decisions:
+  - TZ=UTC pinned globally in vitest.config.ts env block (not per-file beforeAll) for deterministic date assertions across all tests
+  - Focus trap implemented inline with dialogRef + onKeyDown — no new dependency added
+  - occurrence?.uid (not full occurrence) in reset effect deps to avoid deep-equality churn while still reacting to occurrence arrival
+  - vi.importActual used for IN-03 export test to bypass vi.mock() on calendarStore
+metrics:
+  duration_minutes: 40
+  completed_date: "2026-06-06T00:42:08Z"
+  tasks_completed: 2
+  files_modified: 4
+---
+
+# Phase 03 Plan 12: EventForm Gap Closure — Edit Mode, Focus Trap, PWA Assets Summary
+
+EventForm edit mode now pre-populates correctly from TanStack cache (even when occurrence arrives after form opens), preserves recurrence presets on edit, uses zone-consistent date extraction, and implements a real Tab/Shift+Tab focus trap. PWA install assets confirmed present.
+
+## Tasks Completed
+
+| Task | Type | Description | Commit |
+|------|------|-------------|--------|
+| 1 RED | test | WR-03 blank/recurrence, WR-05 zone, IN-03 export — failing tests | 02e312a |
+| 1 GREEN | feat | WR-03 deps fix, WR-05 parseDateTime fix, IN-03 todayIso export | f0f1361 |
+| 2 RED | test | WR-07 focus trap Tab/Shift+Tab cycle — failing tests | 4244e8c |
+| 2 GREEN | feat | WR-07 inline focus trap on dialogRef + onKeyDown | e971e16 |
+
+## What Was Built
+
+### WR-03: Edit form re-populates when occurrence arrives after open
+
+The reset effect previously depended on `[eventFormOpen, eventFormMode, eventFormUid]` — not on `occurrence`. If the form opened before the `['events']` TanStack cache held the occurrence, the form stayed blank forever.
+
+**Fix:** Added `occurrence?.uid` to the reset effect dep array. The effect re-runs when the occurrence resolves in the cache, populating title/allDay/start/end/recurrence/location/description.
+
+**Recurrence fix (WR-03):** The effect previously hard-coded `setRecurrence('none')`. Now derives `occurrence?.recurrence` (cast via any since the CalendarOccurrence type doesn't expose it yet in v1). Defaults to `'none'` only when absent, with a comment documenting the v1 limitation.
+
+### WR-05: Zone-consistent parseDateTime
+
+The old implementation mixed `toISOString().slice(0,10)` (UTC date) with `getHours()` (local time) — the UTC date and local time can be in different day-boundaries at the edges.
+
+**Fix:** Replaced with consistent local-accessor family: `getFullYear/getMonth/getDate/getHours/getMinutes`. No `toISOString()` call in the timed branch. The all-day `^\d{4}-\d{2}-\d{2}$` branch is unchanged.
+
+**TZ=UTC pinned** in `vitest.config.ts` via `env: { TZ: 'UTC' }` so WR-05 assertions are deterministic on any CI runner. In UTC environment, a timed occurrence `'2026-06-10T23:30:00-04:00'` (UTC instant `2026-06-11T03:30:00Z`) renders date=`2026-06-11` and time=`03:30` — both consistent local-accessor values under UTC.
+
+### IN-03: todayIso exported from calendarStore
+
+`getDefaultStartDate()` and `getDefaultEndDate()` in EventForm.tsx had identical bodies duplicating the `todayIso()` function already in calendarStore. Exported `todayIso` from calendarStore (added `export` keyword) and imported it into EventForm, collapsing both helpers to `todayIso()` calls.
+
+### WR-07: Real focus trap on EventForm dialog
+
+The docblock claimed "Focus trap while open" but the implementation only called `.focus()` once on open. Tab escaped the modal to background content.
+
+**Fix:** Added `dialogRef` and `handleDialogKeyDown` handler on the dialog div. On Tab/Shift+Tab, queries all focusable elements inside `dialogRef.current` and wraps focus at the boundaries:
+- Tab on last element → `first.focus()` + `preventDefault()`
+- Shift+Tab on first element → `last.focus()` + `preventDefault()`
+
+No external library added. Existing focus-on-open (titleRef) and Escape-to-close unchanged. Docblock updated to accurately describe the focus trap.
+
+### PWA-01/PWA-02: Install assets confirmed present (IN-04)
+
+All three required PWA install assets exist in `apps/pwa/public/`:
+- `icon-192.png` — 192×192 manifest icon
+- `icon-512.png` — 512×512 manifest icon (+ maskable)
+- `apple-touch-icon.png` — iOS Add-to-Home-Screen icon
+
+Referenced in `index.html` and `vite.config.ts` manifest. No code change needed; confirmed present for Gate 2.
+
+## TDD Gate Compliance
+
+| Gate | Commit | Status |
+|------|--------|--------|
+| Task 1 RED | 02e312a | test(03-12): failing tests added (3 failed) |
+| Task 1 GREEN | f0f1361 | feat(03-12): 27 tests passing |
+| Task 2 RED | 4244e8c | test(03-12): 2 failing focus trap tests |
+| Task 2 GREEN | e971e16 | feat(03-12): 29 tests passing |
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 2 - Missing] Add todayIso to calendarStore vi.mock() in test file**
+- **Found during:** Task 1 GREEN
+- **Issue:** EventForm now imports `todayIso` from calendarStore, but the `vi.mock('../store/calendarStore.js')` factory in EventForm.test.tsx only exported `useCalendarStore`. Tests crashed with "No todayIso export is defined on the mock."
+- **Fix:** Added `todayIso: () => new Date().toISOString().slice(0, 10)` to the mock factory so the mocked module matches the real module's export surface.
+- **Files modified:** `apps/pwa/src/components/EventForm.test.tsx`
+
+**2. [Rule 2 - Missing] Use vi.importActual for IN-03 test**
+- **Found during:** Task 1 GREEN
+- **Issue:** The IN-03 test used `await import('../store/calendarStore.js')` which returns the mock (not the real module), so `actualModule.todayIso` was undefined.
+- **Fix:** Changed to `await vi.importActual('../store/calendarStore.js')` to bypass the mock and test the real module export.
+- **Files modified:** `apps/pwa/src/components/EventForm.test.tsx`
+
+## Verification
+
+```
+cd apps/pwa && npx vitest run src/components/EventForm.test.tsx
+```
+**Result:** 29 passed (29)
+
+```
+cd apps/pwa && npm run build
+```
+**Result:** Built successfully — 509.67 kB bundle, PWA service worker generated.
+
+## Issues Closed
+
+| ID | Description | Status |
+|----|-------------|--------|
+| WR-03 | Edit form blank when occurrence resolves after open | CLOSED |
+| WR-03 | Editing recurring event resets recurrence to 'none' | CLOSED |
+| WR-05 | parseDateTime mixes UTC date and local time | CLOSED |
+| WR-07 | Focus trap claim without real trap implementation | CLOSED |
+| IN-03 | Duplicate todayIso helpers | CLOSED |
+| IN-04 | PWA install assets not verified | CLOSED (assets confirmed present) |
+
+## Self-Check: PASSED
+
+Files exist:
+- [x] apps/pwa/src/components/EventForm.tsx — modified
+- [x] apps/pwa/src/components/EventForm.test.tsx — modified
+- [x] apps/pwa/src/store/calendarStore.ts — modified (todayIso exported)
+- [x] apps/pwa/vitest.config.ts — modified (TZ=UTC)
+- [x] apps/pwa/public/icon-192.png
+- [x] apps/pwa/public/icon-512.png
+- [x] apps/pwa/public/apple-touch-icon.png
+
+Commits exist:
+- [x] 02e312a — RED Task 1
+- [x] f0f1361 — GREEN Task 1
+- [x] 4244e8c — RED Task 2
+- [x] e971e16 — GREEN Task 2