Account screen rebuild — adopt design-system primitives + tokens (no view/edit toggle, action-based) #141

New issue

Closed

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

james commented

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

Owner

Existing /account uses inline styles. The design (../carol-design/design_files/AccountScreen.jsx) defines the new shape: title + lede, sign-in methods card (icon tile + name + sub + optional Unlink), connect-another full-width buttons. Lowest-risk pilot for the design system — small surface, no view/edit toggle (the action shape is already buttons).

PAT panel (#49) recently landed at /account/tokens. Surface a re-skinned link to it from this page as the third section.

Scope

Rebuild app/(app)/account/page.tsx against the new primitives and tokens.
Sign-in methods card: rows with Avatar-style icon tile + name + sub + optional Button variant="ghost" Unlink.
Connect-another: Button fullWidth variant="secondary" per provider, leading Lucide icon, label "Connect ".
Personal Access Tokens entry: existing link to /account/tokens re-skinned as a Button variant="secondary".
Adopt the page header pattern from the design (h1 + lede "Signed in as email").

Acceptance criteria

Visual parity (per the design's hifi spec) on both themes.
All existing functionality preserved (OAuth unlink + connect, navigation to /account/tokens).
Proxy / getServerSession / unlinkOAuthIdentityAction flows unchanged — only the rendering layer is rebuilt.
No inline styles in the rebuilt file (everything goes through primitives + token variables).

Out of scope

The /account/tokens panel rebuild — separate ticket if it needs the same treatment.
Voice / copy rewrite — covered by the Carol's voice ticket below.

Composes with

Design package, token-foundation ticket, component-primitives ticket, sidebar-shell ticket, ADR-0015 (OAuth / linking), #49 (PATs).

Existing `/account` uses inline styles. The design (`../carol-design/design_files/AccountScreen.jsx`) defines the new shape: title + lede, sign-in methods card (icon tile + name + sub + optional Unlink), connect-another full-width buttons. Lowest-risk pilot for the design system — small surface, no view/edit toggle (the action shape is already buttons). PAT panel (#49) recently landed at `/account/tokens`. Surface a re-skinned link to it from this page as the third section. ## Scope - Rebuild `app/(app)/account/page.tsx` against the new primitives and tokens. - Sign-in methods card: rows with `Avatar`-style icon tile + name + sub + optional `Button variant="ghost"` Unlink. - Connect-another: `Button fullWidth variant="secondary"` per provider, leading Lucide icon, label "Connect <provider name>". - Personal Access Tokens entry: existing link to `/account/tokens` re-skinned as a `Button variant="secondary"`. - Adopt the page header pattern from the design (h1 + lede "Signed in as **email**"). ## Acceptance criteria - [ ] Visual parity (per the design's hifi spec) on both themes. - [ ] All existing functionality preserved (OAuth unlink + connect, navigation to `/account/tokens`). - [ ] Proxy / `getServerSession` / `unlinkOAuthIdentityAction` flows unchanged — only the rendering layer is rebuilt. - [ ] No inline styles in the rebuilt file (everything goes through primitives + token variables). ## Out of scope - The `/account/tokens` panel rebuild — separate ticket if it needs the same treatment. - Voice / copy rewrite — covered by the Carol's voice ticket below. ## Composes with Design package, token-foundation ticket, component-primitives ticket, sidebar-shell ticket, ADR-0015 (OAuth / linking), #49 (PATs).

james added the

area:pwa

feature

labels

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

james referenced this issue from a commit

2026-06-20 02:44:16 +00:00

feat(pwa): rebuild /account against DS primitives + tokens (#141)

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

2026-06-20 02:45:36 +00:00

feat(pwa): rebuild /account against DS primitives + tokens (#141) #167

james referenced this issue from a commit