refactor(desktop): migrate settings reset flow onto the design system

Merged
CH
8d ago
+12-9

D35 of the design-system migration (Desktop stack, base feature/desktop-d34-keyboard-shortcut-reference, #3412).

What

A Settings page's "Reset to defaults" (apps/desktop/src/renderer/settings/reset.tsx, on Voice and Appearance) moves onto @luke/ui:

  • The control is the barrel's quiet Button, with the reset glyph in the button's icon slot. It replaces toolbar-button quiet-button.
  • It is still disabled while the store answers, the same as before. It does not use the busy ring, because it never had one.
  • The title line's flush-edge rule in desktop.css moves from the button to .luke-settings-page-actions. Its offset is now the control's own inset (--luke-control-inset), so the words still end at the card's edge. The margin had to move because the shared button has max-width: 100%: a negative margin on the button made its container narrower than the button, which cut the label off ("Reset to def…").

No behaviour changed:

  • The control shows only while the page's scope differs from its defaults.
  • Each page still resets its own scope: Voice includes the talk/stop keys, Appearance its own group.
  • One press is one reset request.
  • A refusal still shows as an alert beside the control.
  • A reset that lands still shows a toast with Undo, which writes back exactly the settings the reset changed.

On the plan row's acceptance: this flow has no confirmation dialog and so no Cancel focus. A reset is undone through the toast's Undo, and that stays as it was. The refusal line keeps the desktop's error-message paragraph, like the other migrated settings pages.

No caller here imported @luke/ui/compat. No selector became unused: .quiet-button still has six other callers.

Visible changes

The button now uses the contract's quiet-button look instead of the desktop's muted quiet-button:

  • Label ink is the primary text colour instead of secondary.
  • Label type is 13/18 weight 500 instead of 12px weight 600.
  • The glyph is 15px instead of 13px.
  • Horizontal inset is 12px instead of 8px. The flush offset changes to match, so the words still end at the card's edge.

Tests

  • No behaviour changed, so no tests were added. Nothing tested this control's markup. It is a styling change, so the evidence is the rendered screenshots below.
  • pnpm check:affected exits 0 (typecheck, lint/knip/discarded-effect, test).

Evidence

Captured on Linux with headless Chrome at 1280×840, the same way as #3412. A throwaway, uncommitted jsdom test rendered the real pageResetControl (Appearance, one setting off its default) inside SettingsPage, with two placeholder rows. That markup was framed with the built desktop stylesheet from each commit.

LightDark
Before
After

Not verified on a Mac

  • The label and glyph in SF Pro, and the hover pill against the real window ground
  • The page's scroll and drag strip in the real window

🤖 Generated with Claude Code