refactor(desktop): migrate account settings onto the design system

Merged
CH
7d ago
+119-61

D15 of the design-system migration (Desktop stack, base feature/desktop-d14-bespoke-settings-row-adapters, #3386).

What

  • Settings › Account renders through @luke/ui's SettingsSection and SettingsRow, replacing the desktop SettingsGroup and hand-built .settings-row / .settings-copy markup.
  • Sign out is the barrel Button (outline), Delete account the barrel Button (danger-outline); they replace toolbar-button bordered-button (and data-danger). Both still ask first through ConfirmDialog / useConfirmDialog with 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 a span inside the row's label; .settings-one-line gains display: block so the ellipsis applies there — its other callers were already blockified flex items).
  • New shared prop (approved by the orchestrator): SettingsRow's optional leading?: 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 an Avatar and a danger-outline Delete account row. D20/D21/D24 will reuse it.
  • No selectors became unused: .settings-row, .settings-copy, .settings-group and .bordered-button still have other callers; .account-provider stays (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 a leading mark 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 small paths; assertions unchanged.
  • pnpm check:affected exits 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).

LightDark
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