.planning/phases/17-ui-optimization-polish/17-05-SUMMARY.md

@@ -0,0 +1,117 @@
+---
+phase: 17-ui-optimization-polish
+plan: "05"
+subsystem: pwa-ui
+tags: [logout, settings, desktop-centering, sheet-ux, d-07, d-09]
+dependency_graph:
+  requires: ["17-01"]
+  provides: [reachable-logout, desktop-centered-sheets]
+  affects: [SettingsSheet, ChangePasswordSheet, LinkOidcSheet, CredentialSheet]
+tech_stack:
+  added: []
+  patterns: [phone-desktop-style-branch, fire-and-best-effort-logout, react-router-useNavigate]
+key_files:
+  modified:
+    - apps/pwa/src/components/SettingsSheet.tsx
+    - apps/pwa/src/components/CredentialSheet.tsx
+decisions:
+  - "phone const computed at render time via window.matchMedia (not a hook) — consistent with established App.tsx / BottomTabBar.tsx project pattern"
+  - "handleSignOut calls onClose() before navigate() so the sheet dismisses even if router state causes a re-render"
+  - "All three sub-sheets in SettingsSheet.tsx (SettingsSheet, ChangePasswordSheet, LinkOidcSheet) received the centering branch in a single commit since they share the same file and the branch is identical"
+metrics:
+  duration: "6 minutes"
+  completed: "2026-06-18"
+  tasks_completed: 2
+  tasks_total: 2
+  files_changed: 2
+status: complete
+---
+
+# Phase 17 Plan 05: Logout Control + Sheet Centering Summary
+
+Wired a reachable Sign out control into SettingsSheet (D-07) and fixed dialog centering so all four settings sheets render as centered modals on desktop and unchanged bottom-sheets on phone (D-09).
+
+## Tasks Completed
+
+| Task | Name | Commit | Files |
+|------|------|--------|-------|
+| 1 | Add Sign out control and handleSignOut to SettingsSheet | `132a5e4` | SettingsSheet.tsx |
+| 2 | Add phone/desktop centering branch to all sheets | `b712386` | CredentialSheet.tsx |
+
+## What Was Built
+
+### Task 1 — Sign out control (D-07)
+
+Added to `SettingsSheet.tsx`:
+- `LogOut` icon imported from lucide-react (added to existing icon import)
+- `fetchLocalLogout` imported from `../api/client.js` (added to existing import)
+- `useNavigate` from `react-router` for post-logout routing
+- `handleSignOut` async function: wraps `fetchLocalLogout()` in try/catch, calls `onClose()` then `navigate('/login')` in both success and catch branches — fire-and-best-effort per D-07 spec (server cookie is cleared or already expired; navigation must always proceed)
+- Sign out button row: 44px minHeight, `var(--color-destructive)` color, 16px LogOut icon, "Sign out" text, full-width, `aria-label="Sign out"`, separated from prior sections by the project's 1px `var(--color-border-subtle)` divider
+
+The button renders unconditionally at the bottom of the sheet — visible regardless of `hasLocalCredential` or `oidcEnabled` gating.
+
+### Task 2 — Phone/desktop centering branch (D-09)
+
+Applied `phone = window.matchMedia('(max-width: 767px)').matches` + ternary style branch to four dialog wrappers:
+
+| Sheet | File | zIndex |
+|-------|------|--------|
+| SettingsSheet | SettingsSheet.tsx | 301 |
+| ChangePasswordSheet | SettingsSheet.tsx | 303 |
+| LinkOidcSheet | SettingsSheet.tsx | 303 |
+| CredentialSheet | CredentialSheet.tsx | 301 |
+
+Phone branch (unchanged): `position: fixed; bottom: 0; left: 0; right: 0; borderRadius: 12px 12px 0 0`
+
+Desktop branch (new): `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); maxWidth: 480px; width: calc(100% - 32px); maxHeight: calc(100dvh - 32px); overflowY: auto; borderRadius: 12px; boxShadow: 0 8px 32px rgba(0,0,0,0.18)`
+
+`role=dialog`, `aria-modal`, `aria-label`, Escape-closes, and focus-return invariants unchanged on all wrappers.
+
+Note: AdminPage.ResetPasswordSheet centering is handled by plan 17-06 (single-file-owner constraint).
+
+## Playwright Validation
+
+**Desktop @1280x720:** SettingsSheet opened centered on the page as a modal dialog. Sign out button visible with destructive red styling and LogOut icon at the bottom of the sheet. Clicking Sign out navigated to `/login` (confirmed URL change from `http://localhost:5175/calendar` to `http://localhost:5175/login`).
+
+**Phone @390x844:** SettingsSheet rendered as a bottom-sheet anchored to the bottom of viewport with rounded top corners. Sign out button visible at bottom. Bottom-sheet behavior unchanged.
+
+Both screenshots confirmed correct behavior for D-07 and D-09.
+
+## Verification Checks
+
+- `grep handleSignOut` in SettingsSheet.tsx: PASS
+- `grep fetchLocalLogout` in SettingsSheet.tsx: PASS
+- `grep 'Sign out'` in SettingsSheet.tsx: PASS
+- `grep LogOut` in SettingsSheet.tsx: PASS
+- `grep 'translate(-50%, -50%)'` in SettingsSheet.tsx: PASS (3 occurrences — SettingsSheet, ChangePasswordSheet, LinkOidcSheet)
+- `grep 'translate(-50%, -50%)'` in CredentialSheet.tsx: PASS
+- `grep 'max-width: 767px'` in CredentialSheet.tsx: PASS
+- `pnpm --filter @familysync/pwa build`: PASS (exits 0, 1858 modules)
+
+## Threat Model Compliance
+
+| Threat ID | Mitigation Applied |
+|-----------|-------------------|
+| T-17-05-01 | `handleSignOut` calls `fetchLocalLogout()` (clears server-side cookie) then always navigates to `/login` — no stale-cookie-with-logged-out-UI state possible |
+| T-17-05-02 | Position-only CSS branch — no new input or executable content |
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Known Stubs
+
+None — both D-07 and D-09 are fully wired. Sign out calls the real `fetchLocalLogout()` endpoint. Centering is CSS-only with no data source.
+
+## Threat Flags
+
+None — no new network endpoints, auth paths, or schema changes introduced. All changes are UI-layer only.
+
+## Self-Check: PASSED
+
+- `/home/luc/projects/familysync/.claude/worktrees/agent-a65077bbd9885bf7e/apps/pwa/src/components/SettingsSheet.tsx` — FOUND, contains handleSignOut, fetchLocalLogout, Sign out, LogOut, translate(-50%, -50%)
+- `/home/luc/projects/familysync/.claude/worktrees/agent-a65077bbd9885bf7e/apps/pwa/src/components/CredentialSheet.tsx` — FOUND, contains translate(-50%, -50%), max-width: 767px
+- Commit `132a5e4` — FOUND (Task 1)
+- Commit `b712386` — FOUND (Task 2)
+- Build: `pnpm --filter @familysync/pwa build` exits 0