refactor(desktop): migrate plan board onto the design system

Merged
CH
8d ago
+65-34

D40 of the design-system migration (Desktop stack, base feature/desktop-d39-move-plan-dialog, #3419).

What

  • A column's + ("New issue in …") is the barrel IconButton, not a raw <button class="icon-button issue-column-new">. Its label, tooltip and press (opening the new issue's card with that column's status) are unchanged.
  • A column's head sets its name in the shared section role (Text, 13/18 semibold) and its count in the caption role (subtle), inside the same h2, so the column's heading still reads "Todo2" etc.
  • An empty column's "No issues" is Text in the caption role (muted), as the idle line was.
  • The board no longer borrows Factory's station classes (.factory-step, .factory-head, .factory-name, .factory-count, .factory-idle). Its column box and head are its own container layout (.issue-column, .issue-column-head) on --luke-* tokens, with the same values. Factory still uses those classes; D42 migrates them.
  • Kept: the cards (the sidebar's rows, .sidebar-task), since the board's arrow keys, focus return and context menu walk those; the board's scroller and column sizing.
  • Removed, now unused: .issue-column-new and .factory-count + .issue-column-new.

Visible changes

  • The + is the contract's 30px control (it was squeezed to 24px), held to the head's 24px line by a negative block margin, so the head and the cards don't move. Its hover fill is 3px taller and wider on each side.
  • The count is regular weight (400), not medium (500), as the caption role sets it, and sits 3px further from the edge (the + glyph doesn't move; the 8px gap now runs from the wider button's edge).
  • The column name and "No issues" take the roles' line heights (18px and 16px, not normal), so they shift by about 1px.

Tests

No behavior changed, so no new tests. issues-page.test.ts (45 tests, including the board's columns, arrow keys, + and focus return) passes; its column helpers now read each column's h2 and idle p instead of the removed Factory class names. pnpm check:affected exits 0.

Evidence

Captured on Linux with headless Chrome at 1280Ɨ840, the way #3416 was: a throwaway, uncommitted jsdom test rendered the real IssuesPage as a board (the existing test's harness, synthetic issues), framed in main.desktop-main with the desktop stylesheet built from each commit. "Before" is the base, #3419.

LightDark
Board, before
Board, after

Not captured: the + hovered or focused, and the tooltip.

Not verified on a Mac

  • The + staying no-drag (.luke-button is in the no-drag list).
  • SF Pro rendering of the heads; the board's sideways scroll and trackpad feel.

šŸ¤– Generated with Claude Code