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

Merged

james merged 3 commits from 141-account-ds-rebuild into main 2026-06-20 03:17:10 +00:00

Conversation 2 Commits 3 Files changed 5 +477 -315

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

Owner

Copy link

Closes #141.

Summary

• /account rebuilt against the in-tree primitives (Card, Button) and the Carol DS token aliases. No inline styles in the page; new account.module.css carries the layout, icon-tile, and section rules ported from ../carol-design/design_files/index.html .cax-*.
• Sign-in methods render as icon-tile rows inside a single Card. Local password row uses KeyRound; every OAuth row uses ShieldCheck. Lucide v1.21 dropped its brand marks, so brand-free + sub-text identifying the provider is the trade-off; a self-hoster's OIDC instance wouldn't render with a misleading vendor mark either.
• "Connect another" is a stack of Button variant="secondary" fullWidth with a leading shield icon and label "Connect <provider>". Hidden entirely when no providers remain to connect (previously the section header rendered with an empty body).
• PAT entry re-skinned as the same secondary fullWidth Button linking to /account/tokens.
• Each Button that navigates lives inside a <form method="get"> — the OAuth start route already accepts GET, intra-app nav to /account/tokens does too, and this keeps the primitive used as designed (a real <button>) without inline styles on an <a> or a polymorphic as prop on Button.

Server flows untouched: getServerSession, the OAuth start handler, and unlinkOAuthIdentityAction see the same shape — only the rendering layer changed.

Test plan

• npm run lint / npx tsc --noEmit / npm test all clean.
• Visual parity in both themes, linked + local-only states — see screenshots below.
• Connect GitHub form-GET → 302 to github.com/login/oauth/authorize?...&state=...&code_challenge=... (OAuth start preserved end-to-end).
• Manage tokens form-GET → 200 from /account/tokens (intra-app nav preserved).
• HTML inline-style grep on the rebuilt page returns only style="color:transparent" on the sidebar <img> (Next.js Image default; not from this page).

Light, linked GitHub


Dark, linked GitHub


Light, local-only ("Connect another" visible)


Dark, local-only


🤖 Generated with Claude Code

Closes #141. ## Summary - `/account` rebuilt against the in-tree primitives (`Card`, `Button`) and the Carol DS token aliases. No inline styles in the page; new `account.module.css` carries the layout, icon-tile, and section rules ported from `../carol-design/design_files/index.html` `.cax-*`. - Sign-in methods render as icon-tile rows inside a single `Card`. Local password row uses `KeyRound`; every OAuth row uses `ShieldCheck`. Lucide v1.21 dropped its brand marks, so brand-free + sub-text identifying the provider is the trade-off; a self-hoster's OIDC instance wouldn't render with a misleading vendor mark either. - "Connect another" is a stack of `Button variant="secondary" fullWidth` with a leading shield icon and label "Connect &lt;provider&gt;". Hidden entirely when no providers remain to connect (previously the section header rendered with an empty body). - PAT entry re-skinned as the same `secondary fullWidth` Button linking to `/account/tokens`. - Each Button that navigates lives inside a `<form method="get">` — the OAuth start route already accepts GET, intra-app nav to `/account/tokens` does too, and this keeps the primitive used as designed (a real `<button>`) without inline styles on an `<a>` or a polymorphic `as` prop on Button. Server flows untouched: `getServerSession`, the OAuth start handler, and `unlinkOAuthIdentityAction` see the same shape — only the rendering layer changed. ## Test plan - [x] `npm run lint` / `npx tsc --noEmit` / `npm test` all clean. - [x] Visual parity in both themes, linked + local-only states — see screenshots below. - [x] `Connect GitHub` form-GET → 302 to `github.com/login/oauth/authorize?...&state=...&code_challenge=...` (OAuth start preserved end-to-end). - [x] `Manage tokens` form-GET → 200 from `/account/tokens` (intra-app nav preserved). - [x] HTML inline-style grep on the rebuilt page returns only `style="color:transparent"` on the sidebar `<img>` (Next.js Image default; not from this page). ### Light, linked GitHub  ### Dark, linked GitHub  ### Light, local-only ("Connect another" visible)  ### Dark, local-only  🤖 Generated with [Claude Code](https://claude.com/claude-code)

james added 1 commit 2026-06-20 02:45:37 +00:00

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

Replace inline-styled /account with the in-tree primitives (Card,
Button) and the Carol DS token aliases. Sign-in methods now render
as icon-tile rows (KeyRound for the local password row, ShieldCheck
for every OAuth row) inside a single Card; the Unlink action is a
ghost Button on the row. "Connect another" is a stack of secondary
fullWidth Buttons with a leading shield icon and a "Connect
<provider>" label, hidden entirely when no providers remain to
connect. The PAT entry is re-skinned as a secondary fullWidth
Button linking to /account/tokens.

Form-GET wraps each Button to keep the primitive used as designed
(a real <button>) without inline styles on an <a>; the OAuth start
route already accepts GET, and intra-app nav to /account/tokens
piggybacks on the same shape.

Lucide v1.21 dropped its brand marks, so every provider row gets
the same ShieldCheck glyph — the row's sub-text identifies which
one, and a self-hoster's OIDC instance wouldn't render with a
misleading vendor mark anyway.

Server flows are untouched: getServerSession, the OAuth start
handler, and unlinkOAuthIdentityAction render the same shape — only
the rendering layer changed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

forgejo-actions commented 2026-06-20 02:52:32 +00:00

Copy link

📊 Test coverage

Patch coverage: no testable lines changed.

Overall (app/, lib/, db/, excluding UI per ADR-0019):

Metric	Value	Soft target
Lines	80.8% ✅	≥ 50%
Branches	80.8% ✅	≥ 75%
Functions	88.5%	informational

Soft thresholds per ADR-0019. Coverage is informational and does not block merge.

<!-- coverage-comment --> ## 📊 Test coverage **Patch coverage:** no testable lines changed. **Overall** (`app/`, `lib/`, `db/`, excluding UI per ADR-0019): | Metric | Value | Soft target | |---|---|---| | Lines | 80.8% ✅ | ≥ 50% | | Branches | 80.8% ✅ | ≥ 75% | | Functions | 88.5% | informational | Soft thresholds per [ADR-0019](docs/adr/0019-coverage-soft-targets.md). Coverage is informational and does not block merge.

james added 1 commit 2026-06-20 03:05:48 +00:00

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

Follow-up to the /account pilot: the PAT panel now uses the same in-tree
primitives (Card, Button, Field, Input) and Carol DS token aliases.
Sections are Cards (lg padding); the reveal banner is a green-tinted
Card with the plaintext in a mono code block plus Copy (secondary) and
Dismiss (ghost) Buttons. Each active-token row is a small bordered row
with name + ghost Revoke + a meta line (created / last-used / expires).

TanStack Query and TanStack Form wiring is unchanged — the create
mutation, the revoke mutation, the ["account","tokens"] cache key,
the zod onChange validator, and the reveal-once plaintext are all
identical. Only the rendering layer flipped.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

forgejo-actions commented 2026-06-20 03:09:05 +00:00

Copy link

Trivy (container image)

Threshold: high  ·  Total findings: 121  ·  At/above threshold: 1

critical	high	medium	low
0	1	50	70

severity	id	package	installed / range	fix
high	CVE-2026-12151	undici	6.25.0	6.27.0, 7.28.0, 8.5.0

<!-- scanner-comment: trivy --> ### Trivy (container image) **Threshold:** `high` &nbsp;·&nbsp; **Total findings:** 121 &nbsp;·&nbsp; **At/above threshold:** 1 | critical | high | medium | low | |---:|---:|---:|---:| | 0 | 1 | 50 | 70 | | severity | id | package | installed / range | fix | |---|---|---|---|---| | high | [CVE-2026-12151](https://avd.aquasec.com/nvd/cve-2026-12151) | undici | 6.25.0 | `6.27.0, 7.28.0, 8.5.0` |

james added 1 commit 2026-06-20 03:11:19 +00:00

fix(pwa): give the page lede breathing room from the h1 (#141) ... edd63a4c5c

The DS prototype's `.cax-lede { margin-top: -10px; }` hugs the h1
too tight in the actual app — the title and lede read as one block.
Swap to a positive 8px top margin on /account and /account/tokens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

james merged commit b7dfc87399 into main 2026-06-20 03:17:10 +00:00

james deleted branch 141-account-ds-rebuild 2026-06-20 03:17:11 +00:00

james referenced this pull request from a commit 2026-06-20 03:17:12 +00:00

Merge pull request 'feat(pwa): rebuild /account against DS primitives + tokens (#141)' (#167) from 141-account-ds-rebuild into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

area:auth

Authentication and authorization

  

area:ci

Forgejo Actions, build, test, security, release

  

area:db

Database abstraction, migrations, persistence

  

area:infra

Containerization, deployment, foundational tooling

  

area:native

React Native app (Android + Linux Flatpak)

  

area:pwa

PWA / web frontend

  

area:service

Backend service, API routes, persistence

  

epic

High-level tracker; links several feature tickets

  

feature

A user-facing feature

  

foundation

Foundational work that other tickets build on

No labels

area:auth

area:ci

area:db

area:infra

area:native

area:pwa

area:service

epic

feature

foundation

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

james/carol!167

No description provided.