Skip to content

feat(review): add System option to the theme mode toggle#1047

Open
alexanderkreidich wants to merge 3 commits into
backnotprop:mainfrom
alexanderkreidich:feat/review-system-theme-toggle
Open

feat(review): add System option to the theme mode toggle#1047
alexanderkreidich wants to merge 3 commits into
backnotprop:mainfrom
alexanderkreidich:feat/review-system-theme-toggle

Conversation

@alexanderkreidich

Copy link
Copy Markdown

Summary

The code review editor's Options menu only offered Light/Dark, while ThemeProvider already supports a system mode and the plan editor menu + Settings theme tab already expose it. This PR brings the review menu in line and fixes two issues surfaced along the way.

Changes

  • ReviewHeaderMenu.tsx — theme picker now maps light / dark / system, using the shared themeIcons (removed local duplicate Sun/Moon SVGs). Highlighting uses the stored mode directly instead of collapsing system to its resolved mode, so the System button highlights correctly.
  • ActionMenu.tsx — widened the default dropdown panel w-56w-64. The three-button segmented control overflowed the 224px panel (the "System" label clipped past the container edge). PlanHeaderMenu and ReviewHeaderMenu are the only ActionMenu consumers, and both render the three-button row.
  • themeRegistry.ts + both header menus — added getUnsupportedMode() and disabled the incompatible mode button for dark-only/light-only color themes, instead of letting the toggle silently no-op. The highlight follows the mode actually rendered.

Validation

  • bun run typecheck — clean
  • bun test — 1619 pass, 0 fail
  • Built in documented order (apps/review build → build:hook) and manually verified in the browser: System option renders inside the container, follows macOS appearance changes live, and persists across reloads.

UI verification

System theme toggle in the review editor Options menu

The review editor Options menu only offered Light/Dark, while the plan
editor menu and Settings theme tab already exposed the System mode that
ThemeProvider supports. Bring the review menu in line:

- map over light/dark/system with the shared themeIcons (SystemIcon)
- highlight the stored mode directly instead of collapsing system to
  the resolved mode, so the System button shows as selected
- drop the local Sun/Moon SVG duplicates in favor of the shared icons
The Options dropdown defaults to w-56 (224px), which is too narrow for
the Light/Dark/System segmented control — the System button clipped past
the panel edge. Bump the default to w-64; PlanHeaderMenu and
ReviewHeaderMenu are the only ActionMenu consumers and both render the
three-button theme row.
Dark-only palettes silently ignore light mode (and vice versa) in
ThemeProvider, letting the toggle no-op. Add getUnsupportedMode() to the
theme registry and use it in both header menus to disable the dead
button and highlight the mode actually rendered.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant