refactor(desktop): migrate integration connection controls onto the design system
D26 of the design-system migration (Desktop stack, base feature/desktop-d25-integration-tool-details, #3404).
What
Settings › Integrations' connection controls (apps/desktop/src/renderer/settings/integrations-page.tsx) move off hand-rolled toolbar-button buttons onto @luke/ui's Button:
- Connect, Reconnect (expired sign-in, or a connection its server refused) and Try again (a failed or unfinished sign-in): the outline variant.
- Reopen and Cancel, while a sign-in waits on the browser: quiet and outline variants, as before.
- Each one stays disabled while a grant or a cancel is out, as before. They don't use
busy, because that would rename the button while it's out. - The row's line (
.settings-state: the connected dot, the attention tint, the gap) now reads--luke-space-6,--luke-color-completeand--luke-color-attentioninstead of the legacy aliases. The values are the same.
What's unchanged:
- Disconnect (⋯ → confirm dialog), Reconnect in the ⋯, Add another account and Rename were already on
MenuRow/ConfirmDialogfrom earlier rows. - The rename field keeps
TaskNameField, as Settings › Workspace does.
No caller here imported @luke/ui/compat. No selector became unused: .toolbar-button, .bordered-button, .quiet-button and .settings-state all still have other callers.
Visible changes
- The button labels use the contract's label weight, 500. They were 600.
- Reopen uses the quiet button's standard ink. It was muted.
- Button widths shift by a pixel or two from the weight change.
Tests
- No new tests, because no user-visible behaviour changed.
- The existing
integrations-page.test.tspasses unchanged (42 tests). It covers Connect, the browser wait's Reopen/Cancel, Try again, Reconnect on the row and in the ⋯, Disconnect's confirm, Add another account and Rename. pnpm check:affectedexits 0.
Evidence
Captured on Linux with headless Chrome at 1280×840, using #3403/#3404's method:
- A throwaway, uncommitted copy of the page's test rendered the real
IntegrationsSectionwith synthetic states: Linear connected with a tool, Notion expired, Slack refused, Granola waiting on the browser, the rest not connected. - That output was framed in
SettingsPagemarkup with the built desktop stylesheet.
Two Linux-only artifacts:
- The ⌘ glyph is missing because Linux has no font for it.
- In dark, the Notion and Mercury marks are dark because the frame lacks the window's mark inks. This is the same before and after.
| Light | Dark | |
|---|---|---|
| Before |  |  |
| After |  |  |
Not verified on a Mac
- SF Pro rendering of the buttons.
- The real browser sign-in round trip. Only the jsdom tests cover it.
🤖 Generated with Claude Code
Summary by cubic
Moves Settings › Integrations connection controls from hand-rolled toolbar-button buttons onto @luke/ui's Button. Connect, Reconnect, Try again, and Cancel now use the outline variant, and Reopen the quiet one beside Cancel. Each stays disabled while a grant or cancel is pending, without busy, so the label never renames mid-flight. The row's connected dot, attention tint, and gap now read --luke-space-6, --luke-color-complete, and --luke-color-attention, which hold the same values as the legacy aliases.
Visible changes
- Button labels drop from weight 600 to the contract's 500, Reopen's ink is no longer muted, and widths shift by a pixel or two.
- The existing
integrations-page.test.tssuite (42 tests) passes unchanged, covering Connect, Reopen/Cancel, Try again, Reconnect, Disconnect, Rename, and Add another account.