MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-379

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

Done
Description

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