refactor(desktop): migrate account settings onto the design system
Merged
CH
7d ago+119+119+012345678901234567890123456789-61-61-01234567890123456789
D15 of the design-system migration (Desktop stack, base feature/desktop-d14-bespoke-settings-row-adapters, #3386).
What
- Settings › Account renders through
@luke/ui'sSettingsSectionandSettingsRow, replacing the desktopSettingsGroupand hand-built.settings-row/.settings-copymarkup. - Sign out is the barrel
Button(outline), Delete account the barrelButton(danger-outline); they replacetoolbar-button bordered-button(anddata-danger). Both still ask first throughConfirmDialog/useConfirmDialogwith the same titles, verbs and busy words, and both rest while either confirmation is running. Contextual confirmation is unchanged. - Each row keeps its search anchor (
SIGN_OUT,DELETE_ACCOUNT) on a plain wrapper around the shared row, so a search result still scrolls to and rings the whole row, as before. - The email stays one line with an ellipsis and its tooltip when clipped (
OneLine, now also drawn as aspaninside the row's label;.settings-one-linegainsdisplay: blockso the ellipsis applies there — its other callers were already blockified flex items). - New shared prop (approved by the orchestrator):
SettingsRow's optionalleading?: ReactNode— a face or mark centred before the words, kept beside them when the controls drop below under 380px. It names nothing: the label alone names the row's control. The catalog's Settings row example gains an account row led by anAvatarand a danger-outline Delete account row. D20/D21/D24 will reuse it. - No selectors became unused:
.settings-row,.settings-copy,.settings-groupand.bordered-buttonstill have other callers;.account-providerstays (now on the role token--luke-space-4, same 4px).
Visible changes
- "Signed in with GitHub/Google" uses the contract's caption type and subtle colour (12/16 instead of 12/1.4 tertiary), as other migrated rows' descriptions already do.
- The address uses the label role (13/18, 500) instead of 13/1.35, 500.
- Buttons take the barrel outline / danger-outline look (same 30px height and 8px radius).
- Nothing else is intended.
Tests
settings-row.test.ts: new jsdom test — a row with aleadingmark still names its control by its label alone.account-section.test.ts/account-marks.test.ts: the face and the provider mark are found in the drawn section rather than through the retired.settings-row > :first-child/.settings-copy smallpaths; assertions unchanged.pnpm check:affectedexits 0.
Evidence
From the smoke fixture on Linux under Xvfb, driven over CDP at 1280×840. The fixture is signed out, so these were taken with a throwaway, uncommitted stub that hands the Settings panel a synthetic signed-in account (ada.lovelace@analytical-engine.example, GitHub).
| Light | Dark | |
|---|---|---|
| Settings › Profile: Account section | ![]() | ![]() |
| Delete account confirmation | ![]() | ![]() |
Section narrowed to 340px (below the row's 380px): the face stays beside the words, the buttons drop below to the row's end.

Not verified on a Mac
- SF Pro rendering of the account row, its face and the provider mark
- the real signed-in Account page against a live account (sign-out and deletion flows were exercised only through the existing tests)
🤖 Generated with Claude Code



