6.8.4 Editable Details page — name/avatar editing on the 6.5.3 landing, the change-key flow, previous keys + release, switcher chip, admin gating
Estimate: 32m · Depends on: 6.8.1, 6.8.3, 6.5.3
The surface, per the 6.8.3 design, on the 6.8.1 service — growing the 6.5.3 read-only Details landing into the editable page (the seam its card reserves).
Build (server component + client islands; mutations via the existing Server-Action convention in _project-actions.ts): name editing with dirty/saving/saved states; the avatar picker (preset registry from 6.8.1, live preview, None) and the chip rendered in the project switcher (closed + open — extending the 1.3.4 switcher, null falls back to the shipped mono-identifier rendering); the read-only key + "Change key" modal flow (live format validation, the two collision error states, consequence copy, in-flight while the tx commits, success toast, then the UI reflects the new identifiers without a manual reload); the Previous-keys rows + release-with-confirm. Gating: non-admins get the designed read-only rendering (the 6.4.6 grammar); all strings via next-intl (the threading pattern).
A11y: the page sections are labelled regions; the picker and both modals keyboard-complete; validation errors announced; extends the settings strict sweep.
Acceptance criteria
- The page matches the design panel-for-panel (edit states, picker, modal states, previous-keys, read-only); the switcher renders the avatar chip in both states and falls back correctly on null.
- The full key-change journey works end-to-end in the browser: validate → collision copy per cause → confirm → in-flight → success → every visible identifier re-rendered; reclaim-own-key and release flows work with their confirms.
- Non-admin sees read-only (and the actions reject server-side — asserted, not just hidden); axe-clean; token tiers only (
--el-*, element shape tokens); next-intl threaded. - Integration tests over the card states + action wiring; coverage ≥90%.
Context refs
design/projects/details.mock.html+ notes (6.8.3) — THE authority- 6.8.1 (service/DTO contract); 6.5.3 (the read-only Details landing this grows) + 6.5.2 (the area chrome it renders inside);
_project-actions.ts(the Server-Action convention) app/(authed)/_components/ProjectSwitcher.tsx(the chip surface)- The i18n threading pattern; the 6.4.6 gating grammar