feat(desktop): redesign PR detail header, fix dark-mode colors, and rebuild the merge dropdown

Merged
AV
3mo ago
+357-243

Summary

  • Redesign the PR detail header to match the target design (tab bar, title row, byline) and hide affordances that aren't wired up yet (Share, "..." overflow).
  • Fix PR state colors (badge, PRIcon, checks, diff stats) so they respond to the app's actual theme switch instead of a dead dark: variant that only tracked OS prefers-color-scheme.
  • Rebuild the Merge dropdown with per-method descriptions, an optional merge comment, and add a fully-functional Force merge plus a stubbed Enable auto-merge.

Why / Context

This app's globals.css never defines @custom-variant dark, so every dark:-prefixed Tailwind utility in the PR badge/icons/diff stats fell back to Tailwind's default prefers-color-scheme gate — it tracked the OS appearance setting, not this app's own theme switcher, and silently never activated when the two disagreed. That's why the state badge rendered its light-mode colors even with the app's own theme set to dark.

How It Works

  • Header is now three rows: tab bar (Summary/Code + list-collapse toggle), title + actions (GitHub link, Start Workspace, Merge), and a byline (state badge with icon, avatar, author, #number, relative time).
  • Every dark-mode color override moved from dark: (media-query gated, broken) to the Tailwind arbitrary variant [.dark_&], which targets the real .dark class the theme store puts on <html>. Dark hex values are hand-tuned (Figma only specs the "open" badge state) and shared between the badge, PRIcon, CHECK_STATUS_ICONS (also used by the v2-workspace sidebar's ChecksSection), and the list-row diff stats, so a PR's state/checks/diff read as one consistent palette.
  • Merge dropdown: two-line method items (label + description) match the target design; an optional comment textarea passes through as GitHub's commit_message (new optional param on the mergePR tRPC procedure). Force merge is shown only when checks have failed and reuses the existing merge mutation — GitHub enforces the bypass via permissions, not a distinct API flag, so no new backend was needed. Enable auto-merge is shown only when checks are pending and is UI-only for now (toast) — real auto-merge needs GitHub's GraphQL enable/disablePullRequestAutoMerge mutations plus PR auto-merge-state tracking this app doesn't fetch today.

Manual QA Checklist

Header

  • Summary/Code tabs toggle correctly (real "Summary"/"Code" text, not CSS capitalize on lowercase — caught and fixed during review since it broke accessible-name lookup)
  • Code tab shows a "coming soon" placeholder instead of an inert no-op
  • List/detail collapse toggles work with tooltips removed
  • Title truncates correctly at narrow widths

Colors

  • Badge matches Figma exactly in light mode (pixel-verified via computed style: #dcfae8 / #00a558, border-width: 0)
  • Badge/PRIcon/checks/diff-stat colors respond to the app's real theme switch — verified by toggling the actual theme store (useThemeStore.getState().setTheme(...)), not just OS media emulation
  • Checks-panel failure red and list-row diff-deletion red now match exactly (#f87171), confirmed via computed style on both

Merge dropdown

  • Force merge only appears when checksStatus === "failure"; confirmation dialog shows the correct warning copy ("Checks haven't passed yet — this overrides them") and was cancelled without executing a real merge against the live repo
  • Enable auto-merge only appears when checksStatus === "pending"; click shows a toast, no crash
  • No console errors across all interactions (checked via CDP Runtime.consoleAPICalled)

Testing

  • bun run typecheck — apps/desktop, packages/host-service
  • bunx biome check --write on every touched file
  • Manual: CDP-driven verification against the running dev app throughout (screenshots + computed-style assertions), including toggling the app's real theme store rather than relying on OS dark mode

Design Decisions

  • Dark palette is hand-tuned, not literal Figma output: Figma only specs the "open" badge state. Closed/merged were deliberately softened off raw rose/violet (less pink/magenta) after a design-review pass; checks/diff share one canonical green/red sourced from the workspace sidebar's existing ChecksSection colors rather than inventing a second palette.
  • [.dark_&] over a global Tailwind config fix: this app's dark: gap likely affects other components too, but fixing it globally (adding @custom-variant dark to apps/desktop/src/renderer/globals.css) has much broader blast radius than this PR's scope — scoped it to just the touched components instead.
  • Force merge defaults to "squash" rather than prompting for a method again, matching the target design where it's a single action, not a nested method picker.

Known Limitations

  • Enable auto-merge is visual-only — needs GitHub's GraphQL auto-merge mutations and PR-state tracking to become real.
  • Share and the "..." (close/reopen) menu are hidden pending further design; the underlying close/reopen mutations remain wired in the code, just unreachable from the UI for now.
  • The dark/light dark: gap (media-query vs. theme-class) likely affects other components outside this PR's scope — worth a follow-up sweep.

Claude-Session: https://claude.ai/code/session_018s6aMRhQuJTWMekyCoeFVA

Summary by cubic

Redesigns the PR detail header and merge dropdown in apps/desktop, and fixes dark-mode colors to follow the in-app theme. Previously dark styles tracked the OS; now [.dark_&] targets the app’s .dark class so colors match the theme switch.

  • Header: three-row layout with tabs (Summary/Code), title and actions (GitHub, Start Workspace, Merge), and a byline (state badge + icon, author, #number, relative time). Shows Skeletons while loading; fixes “now ago” to display “now.” Code tab shows a placeholder.
  • Merge dropdown: method items include short descriptions and an optional comment passed to GitHub as commit_message. Shows Force merge when checks fail (squash by default; reuses existing merge API) and a “Enable auto-merge” stub when checks are pending; separator only renders when these options appear.
  • Colors and icons: replace dark: with [.dark_&] and share a tuned dark palette across the state badge, PRIcon, CHECK_STATUS_ICONS, and list-row diff stats; unify diff +/- colors with checks. Increase PRIcon stroke width to 2.
  • List view: move the checks summary inline with the relative time; keep diff stats on their own line with unified colors.
  • API: mergePR accepts an optional commitMessage; no changes required for existing callers.
  • UI polish: remove tooltips from split-view toggles; hide Share and overflow (close/reopen) until functional.

Summary by CodeRabbit

  • New Features

    • Redesigned pull request details with Summary and Code tabs.
    • Added GitHub link and Start Workspace action.
    • Added merge comments, force-merge controls, auto-merge messaging, and optional merge commit messages.
    • Added explanatory confirmation prompts for force merges.
    • Added loading skeletons and relative creation timestamps.

  • Bug Fixes

    • Improved dark-mode colors for pull request states and check indicators.
    • Updated pull request icons for clearer visibility.
    • Improved pull request list metadata layout.

  • Style

    • Simplified list and detail toggle controls by removing unnecessary tooltip overlays.