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

Merged
CH
9d ago
+51-32

D29 of the design-system migration (Desktop stack, base feature/desktop-d28-voice-key-binding-editor, #3407).

What

Settings › Notifications (apps/desktop/src/renderer/settings/notifications-section.tsx) moves off the old settings-group / settings-row / settings-copy markup onto @luke/ui:

  • The page's one group is a SettingsSection with no title, as Appearance's first group is. The schema row (Notify me when…) is unchanged; it already rendered through the shared adapters (F40).
  • Test notification is a SettingsRow. Its note ("Luke notifies only when its window is in the background.") is the description. Once macOS showed a notification, the green-dot "notifications are on" line stands on its own line under the note.
  • Once macOS refused one, the refusal is the next SettingsRow's description, in the attention tint, with no label of its own (as before).
  • Send test notification and Open System Settings are the outline Button. Open System Settings carries its external glyph in the button's icon slot.
  • Added .settings-state-line in settings.css: it puts a .settings-state on its own line inside a row's description. No selector became unused: .settings-group, .settings-row, .settings-copy and .settings-state still have other callers.

No caller here imported @luke/ui/compat. No @luke/ui API changed.

What stays the same: which lines show for unknown / on / off, their wording (Electron named in a dev build), and both presses.

Visible changes

  • Both buttons use the shared outline button's regular weight. They were bold toolbar-button bordered-button.
  • Open System Settings' external glyph now leads the words at the control icon size (15px). It used to trail them at 9px. Button only has a leading icon slot, and adding a trailing one would be a shared prop change.
  • Rows take the SettingsRow contract: 52px minimum height and caption leading. The Test notification row is about 3px shorter.

Tests

  • The existing notifications-section.test.ts (jsdom, through SettingsPanel) passes unchanged. It covers the test press, the unknown state saying nothing, the off state with Open System Settings, the Electron wording, and the on state. No behaviour changed, so I added no tests.
  • pnpm check:affected exits 0.

Evidence

Captured on Linux with headless Chrome at 1280×840, as #3406 and #3407 did. A throwaway, uncommitted test rendered the real NotificationsSection three times inside SettingsPage, with the built desktop stylesheet. From top to bottom: on (packaged), off (packaged), off (dev build, naming Electron).

LightDark
Before
After

Not verified on a Mac

  • SF Pro rendering.
  • A real notification posted through Electron, macOS's answer to it, and System Settings opening. Only the jsdom tests cover the presses.
  • Focus rings with keyboard versus pointer focus in Electron.

🤖 Generated with Claude Code

Open workspace in Conductor