refactor(desktop): migrate workspace github connections onto the design system

Merged
CH
5d ago
+95-66

D20 of the design-system migration (Desktop stack, base feature/desktop-d19-workspace-invitations, #3398).

What

  • GitHub's row in Settings › Workspace › Integrations is @luke/ui's SettingsRow:
    • leading: GitHub's ProviderMark in the .settings-row-mark box
    • label: "GitHub"; description: the line for the reader's role and whether anything is connected
    • control (owner/admin): Connect, or Manage on GitHub with its external-link glyph, as the outline Button. This replaces toolbar-button bordered-button
    • a member's row has no control
  • Each connected account is a SettingsRow, led by its WorkspaceTile (the account's GitHub picture, its letter until it loads). The login is the label, and Connected or "Suspended or removed on GitHub." (the .settings-state dot and attention tint) is the description. The inset under GitHub's row is now container layout (.workspace-github-account), not a modifier on the window's row.
  • A page the browser could not open is still shown under the row as .error-message role="alert", inside a .workspace-github column. This is the same pattern as API keys, Members and Invitations.
  • The Integrations group (SettingsGroup, its GITHUB_REPOSITORIES anchor) and Linear's row stay as they are. Linear's row is D21's; the group moves with it, so this PR doesn't put a SettingsSection around a row that still draws the window's own layout.
  • Behaviour is unchanged: Connect and Manage on GitHub both send the one WORKSPACE_GITHUB_CONNECT, there is no menu or right-click, and accounts are listed first-linked first, falling back to the legacy single github.

Selectors

  • Removed: .settings-card > .settings-row.settings-row-nested and .settings-row-nested > .settings-row-mark > .workspace-tile. Nothing else used them.
  • Added: .workspace-github-account, which insets the row past the parent's mark and gap so its hairline starts at the parent's words, then pulls the row back by its own inline padding so the tile stands where the hairline starts. Also added .workspace-github-account .settings-row-mark > .workspace-tile, the 18px tile.
  • .workspace-github joins .api-key, .workspace-identity, .workspace-member, .workspace-invite-row and their > .error-message rule.

Visible changes

  • Connect and Manage on GitHub use the shared outline Button face (weight 500, like Rename, Copy link and Invite), not the bold toolbar-button.
  • Manage on GitHub's external-link glyph now comes before the words (the barrel Button's icon slot), not after.
  • Connected account rows now use the contract's 52px row min-height, up from 44px.
  • Labels use the label role (13/18, 500) instead of strong (13/1.35). Descriptions use the caption role (12/16, subtle) instead of small. This matches the Members and Invitations rows above.
  • Below a 380px row, Connect or Manage on GitHub drops below the words, as the shared row contract requires.

Tests

  • workspace-page.test.ts: rowNamed and rowWords read a shared row's label and description as well as the window's own strong/small, since Linear's row still draws those. The member right-click loop walks both kinds of row. No behaviour assertion changed.
  • settings-link.test.ts: the landed group's GitHub row is found by the shared row's label.
  • No new tests: no user-visible behaviour changed.
  • pnpm check:affected exits 0.

Evidence

Captured on Linux with headless Chrome at 1280×840. The real WorkspacePage was rendered in jsdom by a throwaway, uncommitted copy of the page's test, using synthetic workspaces: acme-org connected and acme-labs suspended. Its Integrations group was placed in the built desktop stylesheet inside the SettingsPage frame. Each shot shows two cases stacked.

LightDark
Owner: connected + suspended accounts; unconnected, after the browser could not be opened
Member: connected + suspended accounts; unconnected

Not verified on a Mac

  • SF Pro rendering of the rows and the button
  • The account pictures loading from github.com inside Electron's CSP; the shots show the letter tiles
  • Connect and Manage on GitHub opening the browser against a live workspace, which was covered only by the tests
  • The search-result ring landing on the Integrations group in the real window

🤖 Generated with Claude Code

Open workspace in Conductor