From 9df07fc2cdc59cefb2054c52a130d7767e84cf17 Mon Sep 17 00:00:00 2001
From: sasha <kredich05@gmail.com>
Date: Tue, 14 Jul 2026 18:09:54 +0300
Subject: [PATCH 1/3] feat(review): add System option to theme mode toggle

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
---
 .../components/ReviewHeaderMenu.tsx           | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/review-editor/components/ReviewHeaderMenu.tsx b/packages/review-editor/components/ReviewHeaderMenu.tsx
index 35dcf5f96..698f41ae2 100644
--- a/packages/review-editor/components/ReviewHeaderMenu.tsx
+++ b/packages/review-editor/components/ReviewHeaderMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   ActionMenu,
   ActionMenuDivider,
@@ -6,6 +6,7 @@ import {
   ActionMenuSectionLabel,
 } from '@plannotator/ui/components/ActionMenu';
 import { useTheme } from '@plannotator/ui/components/ThemeProvider';
+import { SunIcon, MoonIcon, SystemIcon } from '@plannotator/ui/components/icons/themeIcons';
 import { MenuVersionSection } from '@plannotator/ui/components/MenuVersionSection';
 import { TextShimmer } from '@plannotator/ui/components/TextShimmer';
 import { modKey } from '@plannotator/ui/utils/platform';
@@ -37,10 +38,7 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
   origin,
   isWSL = false,
 }) => {
-  const { theme, resolvedMode, setTheme } = useTheme();
-  const activeTheme = useMemo<'light' | 'dark'>(() => {
-    return theme === 'system' ? resolvedMode : theme;
-  }, [resolvedMode, theme]);
+  const { theme, setTheme } = useTheme();
 
   const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
 
@@ -80,7 +78,7 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
           <div className="px-3 py-2 space-y-1.5">
             <ActionMenuSectionLabel>Theme</ActionMenuSectionLabel>
             <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-0.5">
-              {(['light', 'dark'] as const).map((mode) => (
+              {(['light', 'dark', 'system'] as const).map((mode) => (
                 <button
                   key={mode}
                   onClick={() => {
@@ -88,12 +86,12 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
                     setTheme(mode);
                   }}
                   className={`flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
-                    activeTheme === mode
+                    theme === mode
                       ? 'bg-background text-foreground shadow-sm'
                       : 'text-muted-foreground hover:text-foreground'
                   }`}
                 >
-                  {mode === 'light' ? <SunIcon /> : <MoonIcon />}
+                  {mode === 'light' ? <SunIcon /> : mode === 'dark' ? <MoonIcon /> : <SystemIcon />}
                   <span className="capitalize">{mode}</span>
                 </button>
               ))}
@@ -181,19 +179,6 @@ const ExportIcon = () => (
   </svg>
 );
 
-const SunIcon = () => (
-  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25M12 18.75V21M3 12h2.25M18.75 12H21M5.636 5.636l1.591 1.591M16.773 16.773l1.591 1.591M5.636 18.364l1.591-1.591M16.773 7.227l1.591-1.591" />
-    <circle cx="12" cy="12" r="3.25" />
-  </svg>
-);
-
-const MoonIcon = () => (
-  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M21 12.79A9 9 0 1111.21 3c-.18.57-.21 1.19-.21 1.82A8 8 0 0019.18 13c.63 0 1.25-.03 1.82-.21z" />
-  </svg>
-);
-
 const FileTreeMenuIcon = () => (
   <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />

From c216b5bcacbebdea5d54034a94d6f61485f6ee47 Mon Sep 17 00:00:00 2001
From: sasha <kredich05@gmail.com>
Date: Tue, 14 Jul 2026 18:27:18 +0300
Subject: [PATCH 2/3] fix(ui): widen ActionMenu panel to fit three theme mode
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 packages/ui/components/ActionMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/ActionMenu.tsx b/packages/ui/components/ActionMenu.tsx
index 3ca1f8883..fd6eb26ad 100644
--- a/packages/ui/components/ActionMenu.tsx
+++ b/packages/ui/components/ActionMenu.tsx
@@ -50,7 +50,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       })}
 
       {isOpen && (
-        <div className={panelClassName ?? 'absolute top-full right-0 mt-1 w-56 rounded-lg border border-border bg-popover py-1 shadow-xl z-[70]'}>
+        <div className={panelClassName ?? 'absolute top-full right-0 mt-1 w-64 rounded-lg border border-border bg-popover py-1 shadow-xl z-[70]'}>
           {children({ closeMenu: () => setIsOpen(false) })}
         </div>
       )}

From b36df617abbde6d082d3aa6aa6ccc68542c230d1 Mon Sep 17 00:00:00 2001
From: sasha <kredich05@gmail.com>
Date: Tue, 14 Jul 2026 18:27:18 +0300
Subject: [PATCH 3/3] fix(ui): disable incompatible mode button for single-mode
 color themes

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.
---
 .../components/ReviewHeaderMenu.tsx            | 18 ++++++++++++++----
 packages/ui/components/PlanHeaderMenu.tsx      | 18 ++++++++++++++----
 packages/ui/utils/themeRegistry.ts             | 13 +++++++++++++
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/review-editor/components/ReviewHeaderMenu.tsx b/packages/review-editor/components/ReviewHeaderMenu.tsx
index 698f41ae2..585ab21d0 100644
--- a/packages/review-editor/components/ReviewHeaderMenu.tsx
+++ b/packages/review-editor/components/ReviewHeaderMenu.tsx
@@ -7,6 +7,7 @@ import {
 } from '@plannotator/ui/components/ActionMenu';
 import { useTheme } from '@plannotator/ui/components/ThemeProvider';
 import { SunIcon, MoonIcon, SystemIcon } from '@plannotator/ui/components/icons/themeIcons';
+import { getUnsupportedMode } from '@plannotator/ui/utils/themeRegistry';
 import { MenuVersionSection } from '@plannotator/ui/components/MenuVersionSection';
 import { TextShimmer } from '@plannotator/ui/components/TextShimmer';
 import { modKey } from '@plannotator/ui/utils/platform';
@@ -38,7 +39,12 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
   origin,
   isWSL = false,
 }) => {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme, colorTheme } = useTheme();
+  const unsupportedMode = getUnsupportedMode(colorTheme);
+  // When the palette can't render the stored mode, the UI is forced to the
+  // opposite — highlight the mode actually shown instead of the dead one.
+  const highlightedTheme =
+    theme === unsupportedMode ? (unsupportedMode === 'light' ? 'dark' : 'light') : theme;
 
   const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
 
@@ -81,14 +87,18 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
               {(['light', 'dark', 'system'] as const).map((mode) => (
                 <button
                   key={mode}
+                  disabled={mode === unsupportedMode}
+                  title={mode === unsupportedMode ? 'Not supported by the current color theme' : undefined}
                   onClick={() => {
                     closeMenu();
                     setTheme(mode);
                   }}
                   className={`flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
-                    theme === mode
-                      ? 'bg-background text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground'
+                    mode === unsupportedMode
+                      ? 'text-muted-foreground opacity-40 cursor-not-allowed'
+                      : highlightedTheme === mode
+                        ? 'bg-background text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground'
                   }`}
                 >
                   {mode === 'light' ? <SunIcon /> : mode === 'dark' ? <MoonIcon /> : <SystemIcon />}
diff --git a/packages/ui/components/PlanHeaderMenu.tsx b/packages/ui/components/PlanHeaderMenu.tsx
index d5243b36e..940550207 100644
--- a/packages/ui/components/PlanHeaderMenu.tsx
+++ b/packages/ui/components/PlanHeaderMenu.tsx
@@ -7,6 +7,7 @@ import {
 } from './ActionMenu';
 import { useTheme } from './ThemeProvider';
 import { SunIcon, MoonIcon, SystemIcon } from './icons/themeIcons';
+import { getUnsupportedMode } from '../utils/themeRegistry';
 import { ReviewAgentsIcon } from './ReviewAgentsIcon';
 import { MenuVersionSection } from './MenuVersionSection';
 import { TextShimmer } from './TextShimmer';
@@ -58,7 +59,12 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   bearConfigured,
   octarineConfigured,
 }) => {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme, colorTheme } = useTheme();
+  const unsupportedMode = getUnsupportedMode(colorTheme);
+  // When the palette can't render the stored mode, the UI is forced to the
+  // opposite — highlight the mode actually shown instead of the dead one.
+  const highlightedTheme =
+    theme === unsupportedMode ? (unsupportedMode === 'light' ? 'dark' : 'light') : theme;
 
   const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
 
@@ -104,14 +110,18 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
               {(['light', 'dark', 'system'] as const).map((mode) => (
                 <button
                   key={mode}
+                  disabled={mode === unsupportedMode}
+                  title={mode === unsupportedMode ? 'Not supported by the current color theme' : undefined}
                   onClick={() => {
                     closeMenu();
                     setTheme(mode);
                   }}
                   className={`flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
-                    theme === mode
-                      ? 'bg-background text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground'
+                    mode === unsupportedMode
+                      ? 'text-muted-foreground opacity-40 cursor-not-allowed'
+                      : highlightedTheme === mode
+                        ? 'bg-background text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground'
                   }`}
                 >
                   {mode === 'light' ? <SunIcon /> : mode === 'dark' ? <MoonIcon /> : <SystemIcon />}
diff --git a/packages/ui/utils/themeRegistry.ts b/packages/ui/utils/themeRegistry.ts
index a9da074a3..0941821dd 100644
--- a/packages/ui/utils/themeRegistry.ts
+++ b/packages/ui/utils/themeRegistry.ts
@@ -565,3 +565,16 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
     },
   },
 ];
+
+/**
+ * The mode a color theme cannot render, or null if it supports both.
+ * Dark-only palettes silently ignore light mode (and vice versa) in
+ * ThemeProvider — callers use this to disable the incompatible mode
+ * button instead of letting the toggle no-op.
+ */
+export function getUnsupportedMode(themeId: string): 'light' | 'dark' | null {
+  const info = BUILT_IN_THEMES.find(t => t.id === themeId);
+  if (info?.modeSupport === 'dark-only') return 'light';
+  if (info?.modeSupport === 'light-only') return 'dark';
+  return null;
+}