refactor(desktop): migrate keyboard-shortcut reference onto the design system

Merged
CH
9d ago
+84-34

D34 of the design-system migration (Desktop stack, base feature/desktop-d33-about-update-page, #3411).

What

Settings › Keyboard shortcuts (apps/desktop/src/renderer/settings/shortcuts-page.tsx) moves onto @luke/ui:

  • Each menu-bar group is a SettingsSection, replacing the desktop's SettingsGroup.
  • Each command is a SettingsRow at the new SETTINGS_ROW_DENSITY.LIST. The command's name is the row's label and its chord sits in the row's controls. Each row is wrapped in a div that carries its search anchor, because the shared row takes no caller attributes (the same approach as About and Voice). Search landing still rings the whole row.
  • The chord keeps its 13px muted ink through a new .shortcut-value class on the desktop's own Shortcut (not a barrel control). It replaces the .settings-card custom-property rule.

No change to which groups and commands show. Gated commands still come from shownShortcutGroups(experiments), so a command whose experiment is off stays hidden. Every chord and its spoken reading are unchanged.

No caller here imported @luke/ui/compat. These selectors became unused and are removed: .settings-card { --shortcut-* }, .settings-card > .shortcut-row and .shortcut-name.

New shared variant: SETTINGS_ROW_DENSITY.LIST (approved by the orchestrator)

A card row for a reference list, read rather than set:

  • Same as CARD: 16px inline inset, the section's hairlines and card, and controls stacking below the label under 380px.
  • Least height 40px, through a new role, --luke-settings-row-list-min-height.
  • 8px block inset, through a new role, --luke-settings-row-list-block. The instruction was CARD's padding, but CARD's 12px block inset makes a one-line row 42px, so the 40px least height would never apply. 8px is what the page used before and lands rows at today's 40px. Easy to switch back if you'd rather have 12px.
  • Label at body weight (400) instead of 500.
  • The web profile keeps a card row's inset and has no least height.
  • Catalog: the Settings row example gains "List, a reference in a card" (apps/catalog/src/examples/settings-row.tsx).

Visible changes

  • Rows are 41px apart instead of 40px; the extra 1px is the shared section's hairline.
  • Group headings use the shared section heading spacing (a few px more above each card).
  • Command names stay at weight 400, and chords at 13px muted ink, as before.

Tests

  • No behaviour changed, so no tests were added; the new density is presentation only. Nothing tested this page's markup directly. Hiding gated commands lives in shownShortcutGroups, which this PR doesn't touch.
  • pnpm check:affected exits 0.

Evidence

Captured on Linux with headless Chrome at 1280×840, the same way as #3411. A throwaway, uncommitted jsdom test rendered the real WindowShortcutSections inside SettingsPage, with no experiments on. That markup was framed with the built desktop stylesheet. The ⌘/⇧/⌥ glyphs show as boxes because the Linux font lacks them.

LightDark
Before
After

Not verified on a Mac

  • modifier glyphs and type rendering in SF Pro, including the chord's cap-height alignment against the label
  • the page's scroll and drag strip in the real window

🤖 Generated with Claude Code