refactor(desktop): migrate about/update page onto the design system
D33 of the design-system migration (Desktop stack, base feature/desktop-d32-experimental-settings, #3410).
What
Settings › About (apps/desktop/src/renderer/settings/updates.tsx) moves onto @luke/ui:
- The group is
SettingsSection, replacing the desktop'sSettingsGroup. - The update line and the Changelog line are
SettingsRows. Each sits in a wrapper div that carries its search anchor, because the shared row takes no caller attributes (the same approach Voice uses). - Restart to update, Download, Try again, Check for updates and Open are the outline
Button, replacing.toolbar-button.bordered-button. - While a check runs, Check for updates is the busy
Buttonnamed "Checking for updates", replacing the desktop'sBusyLabelinside a disabled button.
The failure is still its own role="alert" element inside the row's description, so it's announced when it appears. The progress bar (.update-progress) still sits under the detail words.
No caller here imported @luke/ui/compat. No selector became unused: SettingsGroup, .settings-name, .settings-copy .error-message and .update-progress all have callers still.
Visible changes
- Button words use the shared button's weight instead of the bold toolbar-button weight.
- Download and Open show their external glyph before the words instead of after, as Notifications' Open System Settings does.
- While checking, the button shows the shared spinner as soon as the check starts. Before, it was greyed-out words with a spinner that appeared after 180ms. The button stays focusable but ignores presses (
aria-disabled) instead of beingdisabled. - The row with the progress bar is 3px shorter. The shared row's description spacing replaces the old copy block's.
Tests
updates.test.ts(new, jsdom) covers the one behaviour change: while a check runs, the button named "Checking for updates" takes focus and a press asks for no second check; at rest, a press of Check for updates turns the row to its checking state. The busy test fails against the previous implementation.- The existing settings tests pass untouched, including "Check for updates" search landing on About › Updates (
desktop-settings.test.ts). pnpm check:affectedexits 0.
Evidence
Captured on Linux with headless Chrome at 1280×840, the same way as #3410. A throwaway, uncommitted jsdom test rendered the real UpdatesSection inside SettingsPage once per state: up to date, checking, downloading at 42%, ready, and failed install. That markup was framed with the built desktop stylesheet. Each card is one state; the real page shows only one.
| Light | Dark | |
|---|---|---|
| Before |  |  |
| After |  |  |
Not verified on a Mac
- glyph and type rendering in SF Pro
- the page's scroll and drag strip in the real window
- a real update check, download and restart (the states above were rendered from synthetic snapshots)
🤖 Generated with Claude Code