kvitt/PLAN-W5.md

PLAN-W5: Web settings

1. Goal

Build the web client's settings: hub with language and log out (W-13), profile (W-14), categories (W-15), recurring expenses (W-16), devices (W-17), invites (W-18) and about (W-19), in web/src/features/settings/, on W0's foundation, mirroring S-13, S-14, S-15, S-19, S-20, S-21, S-22 (SPEC §15.6), with tests.

2. Read first

1. SPEC §15 (all; §15.2 for log out and the gate's effect on /health), FR-21, FR-2 (AC-2.1, AC-2.2, AC-2.11), FR-3, FR-4, FR-7, FR-9, FR-20, §8.4, §9.6, §9.7 (icons, colour tokens), §13.3 rows S-2, S-13, S-14, S-15, S-19, S-20, S-21, S-22, D-072, D-080, D-090, D-091, D-099, D-107, D-110.
2. docs/ux/design-spec.md the S-13 to S-15 and S-19 to S-22 sections, §2.3, §2.12, §2.13; docs/ux/strings.csv keys settings_* and shared ones.
3. contracts/openapi.yaml E-1, E-7 to E-16, E-23 to E-30 and their examples.
4. web/README.md and W0's report (module map).
5. Files: web/src/{app,api,lib,components,i18n}/** (read only), web/src/features/settings/** (W0's placeholder).
6. CLAUDE.md.

3. Already established

• W0 owns everything shared, the token store and the language store included; this plan edits only web/src/features/settings/. Missing shared pieces are requests to the orchestrator.
• Every write here is REST (§7) and applies the returned row (§15.5); a failure shows "Kunde inte nå servern" or the code's text and keeps the form.
• W-13 (mirrors S-13): own and partner's avatar and name; rows Profile, Categories, Recurring expenses, Devices, Invites (admin; "Pair a device" for a member is not offered, AC-2.2 and §8.4), About, Language (sv, en, or the browser's; W0's store); Log out, which forgets the token through W0 and explains that this browser stays on Devices until revoked from another device (§15.2).
• W-14 (mirrors S-14; also the S-2 step once after a partner login, AC-2.10): avatar change (file picker, image/jpeg, image/png or image/webp up to the §8.6 size, E-9) and remove (E-10), display name (E-8, §9.6).
• W-15 (mirrors S-15): list with icon, colour, name, archived section; editor with name and "Reset name" for defaults, the 33 icons of §9.7 and the 14 colour tokens; delete or archive with the reason when delete is not allowed (deletability computed from the snapshot as D-059/D-060 describe; the server stays the authority); reorder by drag and by keyboard (move up and down), saved through E-24 sort_order.
• W-16 (mirrors S-19): list (description, amount, account, "Every month on day N", next date, paused badge); editor with S-7's fields without date, account, payer and split as fixed rows (D-102, D-107), day of month (default today's, D-072), first month, optional last month, pause; create (E-28 NewRecurringTemplate, D-091), edit and pause/resume (E-29), delete (E-30). The split controls reuse W0's shared editor-field components where W0 built them; otherwise a request to the orchestrator (do not import from web/src/features/expenses/).
• W-17 (mirrors S-20): rows per AC-3.1 (Device.app_version_name else the code, D-090), this browser marked "This device"; revoke with confirmation (E-16; not this browser, AC-3.2).
• W-18 (mirrors S-21, admin only): "Invite partner" before the partner joins and "Pair another device" for either user (E-12); a created invite shows the code in groups of 4, the link and the expiry, with Copy for code and link (clipboard; there is no share sheet); pending invites (E-13) with cancel (E-14).
• W-19 (mirrors S-22): the web build's version name and code; the server version and schema from E-1 /health when it answers, otherwise the X-Kvitt-Server-Version header of the last API response without the schema (D-110's fallback; /health is closed by the gate from outside the LAN, §15.2); the server URL (the page's own origin); no update check, no licences row.

4. Owned paths

From SPEC §14.7: web/src/features/settings/**. web/package.json only for a dependency line. Nothing else.

5. Deliverables

• W-13 to W-19 with every state of §15.6 (loaded, empty, loading, error, long content), admin and member variants.
• Tests: language switch, log out, picture upload and remove, name validation, category editor (reset name, delete vs archive reason, reorder by keyboard), recurring editor defaults and pause, device revoke (not current), invite create, copy and cancel, about with /health and with the header fallback.

6. Steps

1. Worktree: from /Users/jhag/projects/kvitt, git worktree add .claude/worktrees/agent-w5 -b agent-w5 main; in it git reset --hard main, tools/install-git-hooks.sh, cd web && npm ci.
2. Read §2. Confirm W0 has landed; if not, stop and report.
3. npm outdated; record it. A drag-and-drop library is allowed only if native drag events with keyboard reordering cannot meet AC-21.11; name it with its version and licence.
4. W-13, W-14, W-17, W-18, W-19, then W-15 and W-16, with tests.
5. Manual check (optional): a throwaway server, npm run dev, pair the browser, create a device invite, revoke a second browser. Never the owner's development stack or the Pi.
6. Gate (§7). Commit on agent-w5, git rebase main, rerun the gate. Never merge, push or remove the worktree.

7. Gate

The web gate, from web/: npm run check. Green: every step passed in this session; Vitest summary quoted.

8. HUMAN steps

From SPEC §11.2: pair a browser, see it on the phone's Devices, revoke it from the phone (yes/no), relayed after landing.

9. Out of scope

• Login and the token store (W0); other pages (W1 to W4); a sign-out endpoint (a contract change, §15.2); edits outside web/src/features/settings/.

10. Report

• Branch agent-w5, head commit after rebasing; gate lines; Vitest counts.
• Pages × states covered, admin and member; web_ keys added (en, sv); design-spec mismatches.
• Requests for W0's modules; proposed decision entries (numbered from the brief); open questions with SPEC section numbers.

11. Numbering

Assigned in the start prompt; use TODO(spec) if none was given.