Profile screen rebuild — view-by-default with Edit toggle (Picture / Basics / Contacts) #142

New issue

Closed

opened 2026-06-19 17:34:40 +00:00 by james · 0 comments

james commented

2026-06-19 17:34:40 +00:00

Owner

Existing /profile (#21) is always-editable. The design (../carol-design/design_files/ProfileScreen.jsx) puts the page into a read-only view by default with a page-level Edit button revealing form controls; edit mode swaps the header to Cancel / Done. Sections: Picture, Basics (Name / Title statement / Brief), Contact details.

Scope

Rebuild app/(app)/profile/page.tsx + profile-client.tsx against the new primitives and tokens.
Page header pattern: title + optional lede + view/edit controls. View → secondary Edit button. Edit → ghost Cancel + primary Done.
View mode: mono-eyebrow label + value rows for the basics; Picture section shows the avatar + a hint string only; Contact rows show Badge(kind) · value · label.
Edit mode: Field + Input + Textarea for basics, contacts pick up edit/remove icon tools, a dashed add-contact row appears at the bottom with Select(kind) + value + label + Add.
Done / Cancel semantics: Done = persist via the existing PUT + contact mutations and re-fetch; Cancel = discard local changes (revert form state to query data).
Picture upload stays in its current shape (still a one-shot file input, no form-buffer — uploading a new picture is itself the commit).

Acceptance criteria

View-by-default; Edit reveals all controls; Cancel reverts; Done persists.
Mutations preserve the correctness-over-optimistic discipline from #21 (every mutation invalidates and waits).
Picture upload still validates + normalizes via sharp (#21 pipeline unchanged).
No regression to the dual-engine isolation tests for /api/profile/*.
No inline styles in the rebuilt files.

Out of scope

Voice / copy rewrite.
Reordering contacts via drag-and-drop — still a follow-up to #21.

Composes with

Design package, token-foundation ticket, component-primitives ticket, sidebar-shell ticket, #21, ADR-0018 (storage).

Existing `/profile` (#21) is always-editable. The design (`../carol-design/design_files/ProfileScreen.jsx`) puts the page into a read-only view by default with a page-level **Edit** button revealing form controls; edit mode swaps the header to **Cancel / Done**. Sections: Picture, Basics (Name / Title statement / Brief), Contact details. ## Scope - Rebuild `app/(app)/profile/page.tsx` + `profile-client.tsx` against the new primitives and tokens. - Page header pattern: title + optional lede + view/edit controls. View → secondary `Edit` button. Edit → ghost `Cancel` + primary `Done`. - **View mode:** mono-eyebrow label + value rows for the basics; Picture section shows the avatar + a hint string only; Contact rows show `Badge`(kind) · value · label. - **Edit mode:** `Field` + `Input` + `Textarea` for basics, contacts pick up edit/remove icon tools, a dashed add-contact row appears at the bottom with `Select`(kind) + value + label + Add. - **Done / Cancel semantics:** Done = persist via the existing PUT + contact mutations and re-fetch; Cancel = discard local changes (revert form state to query data). - Picture upload stays in its current shape (still a one-shot file input, no form-buffer — uploading a new picture is itself the commit). ## Acceptance criteria - [ ] View-by-default; Edit reveals all controls; Cancel reverts; Done persists. - [ ] Mutations preserve the correctness-over-optimistic discipline from #21 (every mutation invalidates and waits). - [ ] Picture upload still validates + normalizes via sharp (#21 pipeline unchanged). - [ ] No regression to the dual-engine isolation tests for `/api/profile/*`. - [ ] No inline styles in the rebuilt files. ## Out of scope - Voice / copy rewrite. - Reordering contacts via drag-and-drop — still a follow-up to #21. ## Composes with Design package, token-foundation ticket, component-primitives ticket, sidebar-shell ticket, #21, ADR-0018 (storage).

james added the

area:pwa

feature

labels

2026-06-19 17:36:10 +00:00

james referenced this issue from a commit

2026-06-20 03:29:46 +00:00

feat(pwa): rebuild /profile against DS primitives + view/edit toggle (#142)

james referenced this issue from a pull request that will close it,

2026-06-20 03:30:08 +00:00

feat(pwa): rebuild /profile against DS primitives + view/edit toggle (#142) #169

james closed this issue