From f3af130e9efaa509ee5c527d4a2d8abaddd9a4be Mon Sep 17 00:00:00 2001 From: Lucas Berger Date: Wed, 17 Jun 2026 22:34:18 -0400 Subject: [PATCH] =?UTF-8?q?docs(17):=20add=20workstream=20D=20=E2=80=94=20?= =?UTF-8?q?4=20UI=20findings=20from=20Phase=2019=20UAT=20(logout=20button,?= =?UTF-8?q?=20admin=20feedback,=20popup=20centering,=20admin=20nav)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../phases/17-ui-optimization-polish/17-CONTEXT.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/.planning/phases/17-ui-optimization-polish/17-CONTEXT.md b/.planning/phases/17-ui-optimization-polish/17-CONTEXT.md index 731a87a..8428820 100644 --- a/.planning/phases/17-ui-optimization-polish/17-CONTEXT.md +++ b/.planning/phases/17-ui-optimization-polish/17-CONTEXT.md @@ -6,11 +6,12 @@ ## Phase Boundary -A **visual-identity & polish pass** for the PWA, spanning three bounded workstreams: +A **visual-identity & polish pass** for the PWA, spanning four bounded workstreams (A–C from this discussion; D added from Phase 19 UAT, see Decisions §D): - **A — Phone-layout polish.** Fix the long-standing phone (≤767px) fixed-chrome overlap where the `position: fixed` BottomTabBar covers the New Event FAB (FAB lands on the Admin tab) and occludes the bottom of the calendar + the colour-legend chips, then sweep other small-viewport spacing / tap-target / overflow issues. CSS/layout only, no behaviour change. - **B — Branding assets.** Generate a real **FamilySync** logo and drop it into the already-built `BrandSlot` seam (`apps/pwa/src/components/BrandSlot.tsx`), and produce a **complete favicon / PWA-icon set** to replace the placeholder stubs in `apps/pwa/public/` (`icon-192.png` 699 B, `icon-512.png`, `apple-touch-icon.png` 617 B — all generated stubs; there is currently **no `favicon.ico`/`favicon.svg`** and index.html links only the apple-touch icon). - **C — Theme-token groundwork.** Restructure `apps/pwa/src/styles/tokens.css` from its single light `:root` into a **themeable semantic-token layer** (swappable by `data-theme` / `prefers-color-scheme`). Light stays the only *shipped* theme — this is enabling groundwork only. +- **D — UAT-surfaced UI fixes** (from Phase 19 live UAT). Wire a **logout control** to the existing `fetchLocalLogout()` (no backend), add **success feedback** to admin create/reset-password flows, fix **dialog/popup bottom-center positioning**, and **rework the clunky admin navigation**. See Decisions §D (D-07…D-10). **Out of scope (explicitly deferred this discussion, 2026-06-17):** - **Shipped dark theme + light/dark/system toggle** → backlog **999.20** (Phase 17's token groundwork is the enabling seam). @@ -34,6 +35,13 @@ This stays a focused polish + branding + groundwork pass, **not a redesign**. ### C — Theme-token groundwork - **D-06:** Restructure `tokens.css` into a themeable layer (semantic tokens resolvable per theme via `data-theme`/`prefers-color-scheme`) — **groundwork only** (option 3a). **Do NOT** author dark palette values, wire `prefers-color-scheme` to actually flip, or add a toggle this phase. Light remains the sole shipped theme. Keep the existing invariant: no hard-coded hex/px in component files — all values stay in `tokens.css`. The restructure must leave the Schedule-X `--sx-color-*` overrides (bottom of tokens.css) working unchanged. +### D — UAT-surfaced UI findings (from Phase 19 live UAT, 2026-06-17) +Surfaced by the operator during the Phase 19 local-auth UAT and **routed here by operator decision** — these are UI concerns, not Phase 19 auth blockers. Phase 19 ships functionally complete; Phase 17 owns the UI. (Recorded in `.planning/phases/19-local-auth-no-oidc-mode/19-UAT.md` as F-01…F-04.) +- **D-07 (F-02) — Wire a logout control into the UI.** Logout is fully plumbed but unreachable: the endpoint `POST/GET /api/auth/local/logout` works (200, clears cookie — BL-02 verified live) and `fetchLocalLogout()` exists at `apps/pwa/src/api/client.ts:127`, but **no component calls it** (zero logout buttons in `apps/pwa/src`). Add a logout control (likely in `SettingsSheet.tsx` and/or `AppNav`) that calls the existing client function + redirects to `/login`. **No backend work** — UI wiring only. (Slightly beyond pure "polish" — it's a small new control; planner should size it.) +- **D-08 (F-01) — Add success feedback to admin local-account actions.** Admin create-member and reset-password both succeed (verified at DB/login level in UAT) but show **no success toast/confirmation**, leaving the operator unsure it worked. Add success feedback to those admin flows (`AdminPage.tsx`). +- **D-09 (F-03) — Fix dialog/popup positioning.** Popups/sheets render **bottom-center instead of properly centered**. Fits the fixed-chrome/sheet-positioning sweep already in workstream A; likely the same dialog/sheet CSS (`SettingsSheet.tsx` and shared dialog styles). Verify across phone + desktop via playwright-cli. +- **D-10 (F-04) — Rework the clunky admin navigation.** Admin UI navigation reads as clunky and needs a rework. Larger UX item than the others — planner should decide whether it fits this phase's "polish" budget or warrants its own slice. (`AdminPage.tsx`, admin nav/tab surface.) + ### Claude's Discretion - **D-02** (fix technique + regression guard) is explicitly delegated to the researcher/planner. - Exact small-viewport issues surfaced by the `layout.spec` sweep (D-01) — fix as found, within the no-behaviour-change boundary.