docs(phase-06): finalize 06-04/05/06 summaries + tracking
- 06-04-SUMMARY: pulse keyframe checkpoint PASS (playwright-cli); CP-04.3 iOS device-only noted - 06-05-SUMMARY: TDD RED/GREEN + dead-end guard follow-up fix; playwright-cli cold-load + 401 PASS - 06-06-SUMMARY: end-tracking/recurrence-bound/series-prompt/all-day-pill; Schedule-X selector fix noted - ROADMAP: mark 06-04/05/06 complete; phase 6 row updated to 6/6 Complete 2026-06-10 - STATE: phase 06 position/status updated; 3 new metric rows; 6 new decisions; phase-level UX fixes (AppNav/BottomTabBar) documented; residual device-only items added to Blockers
This commit is contained in:
Lucas Berger
@@ -0,0 +1,82 @@
|
||||
---
|
||||
phase: 06-ux-polish
|
||||
plan: "04"
|
||||
subsystem: pwa/styles
|
||||
tags: [css, animation, d-13]
|
||||
dependency_graph:
|
||||
requires: []
|
||||
provides:
|
||||
- "@keyframes pulse (apps/pwa/src/styles/tokens.css)"
|
||||
affects:
|
||||
- LiveSyncIndicator (reconnecting dot now resolves the global pulse keyframe)
|
||||
- PushPermissionPrompt (redundant local spin redefinition removed)
|
||||
tech_stack:
|
||||
added: []
|
||||
patterns:
|
||||
- Global keyframe resolution: all animation consumers reference tokens.css keyframes, not local <style> blocks
|
||||
key_files:
|
||||
created: []
|
||||
modified:
|
||||
- apps/pwa/src/styles/tokens.css
|
||||
- apps/pwa/src/components/PushPermissionPrompt.tsx
|
||||
decisions:
|
||||
- D-13: @keyframes pulse added globally to tokens.css so the LiveSyncIndicator reconnecting dot animates regardless of component mount order; the redundant local spin redefinition in PushPermissionPrompt.tsx removed for hygiene
|
||||
metrics:
|
||||
duration_minutes: 5
|
||||
completed_date: "2026-06-10"
|
||||
tasks_completed: 2
|
||||
files_changed: 2
|
||||
---
|
||||
|
||||
# Phase 06 Plan 04: Sync-Indicator Animations (D-13) Summary
|
||||
|
||||
**One-liner:** Added global `@keyframes pulse` to tokens.css and removed the redundant local `@keyframes spin` block from PushPermissionPrompt.tsx so both sync-state animations resolve from the stylesheet.
|
||||
|
||||
## Tasks Completed
|
||||
|
||||
| Task | Name | Commit | Files |
|
||||
|------|------|--------|-------|
|
||||
| 1 | Add @keyframes pulse globally; remove redundant spin redefinition | `81f2678` | tokens.css, PushPermissionPrompt.tsx |
|
||||
| 2 (checkpoint) | playwright-cli — confirm spinner spins and reconnecting dot pulses | (verification only) | — |
|
||||
|
||||
## What Was Built
|
||||
|
||||
The plan's corrected diagnosis was that `@keyframes spin` was already global in `tokens.css` (lines 140–147) so the SyncStateToast spinner already worked. The two real bugs were:
|
||||
|
||||
- **Missing `@keyframes pulse`** in `tokens.css` → `LiveSyncIndicator`'s reconnecting dot (`animation: 'pulse 1.4s ease-in-out infinite'`) never animated.
|
||||
- **Redundant local `<style>` block** in `PushPermissionPrompt.tsx` that redefined `@keyframes spin` — harmless but incorrect; removed for hygiene.
|
||||
|
||||
Fix (commit `81f2678`):
|
||||
- Added `@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }` to `tokens.css` directly after `@keyframes spin`, matching the existing block format (no vendor prefixes, no `animation-fill-mode` inside).
|
||||
- Deleted the `<style>` block from `PushPermissionPrompt.tsx`. The inline `animation: 'spin 1s linear infinite'` style on the Loader2 element was left intact — it still resolves to the global keyframe.
|
||||
- `LiveSyncIndicator.tsx` and `SyncStateToast.tsx` were not modified; their inline animation references are correct.
|
||||
|
||||
## Checkpoint Verification (Task 2)
|
||||
|
||||
Verified via playwright-cli against desktop Chromium with `DEV_AUTH_BYPASS=true`:
|
||||
|
||||
- **SyncStateToast Loader2 spinner** — computed `animationName === 'spin'`; transform sampled rotating (1s linear infinite). PASS.
|
||||
- **LiveSyncIndicator reconnecting dot** — computed `animationName === 'pulse'`; opacity oscillating at 1.4s ease-in-out. PASS.
|
||||
- No console errors about undefined keyframes.
|
||||
|
||||
No follow-up fixes were needed after the checkpoint.
|
||||
|
||||
## Residual Device-Only Item
|
||||
|
||||
**CP-04.3 (iOS device-only):** `PushPermissionPrompt`'s spinner renders only inside an installed iOS/standalone PWA — not drivable in desktop Chromium. Code-confirmed: the spinner uses the same inline `animation: 'spin 1s linear infinite'` that resolves to the global `@keyframes spin` in tokens.css. A human/device spot-check during Phase 3 Gate 2 or the go-live deploy is sufficient.
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None — plan executed exactly as written.
|
||||
|
||||
## Threat Flags
|
||||
|
||||
None. Pure CSS keyframe addition and redundant inline-style deletion. No data, no network, no auth surface touched. T-06-04 accepted per threat model.
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- `apps/pwa/src/styles/tokens.css` — FOUND (contains `@keyframes pulse`)
|
||||
- `apps/pwa/src/components/PushPermissionPrompt.tsx` — FOUND (no `@keyframes spin` block)
|
||||
- Commit `81f2678` — FOUND (`fix(06-04): add global pulse keyframe and drop redundant spin redefinition`)
|
||||
- `@keyframes pulse` present exactly once in tokens.css — CONFIRMED
|
||||
- No `@keyframes spin` in PushPermissionPrompt.tsx — CONFIRMED
|
||||
Reference in New Issue
Block a user