From 69f72f2b7c31d5d3f7a10d4d9750f305e320a331 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 27 Jul 2026 20:56:03 -0500
Subject: [PATCH] =?UTF-8?q?fix(desktop):=20show=20a=20check=20on=20the=20a?=
 =?UTF-8?q?ctive=20theme=20and=20color=20mode=20in=20=E2=8C=98K?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The theme picker computed `active` per row but nothing rendered it — the
`active?: boolean` field and its trailing check were stripped in 8f73d0d94
and the computation was left behind, so the palette offered no way to tell
which skin was already applied. That matters more than it sounds: the
desktop persists its own skin in localStorage and only seeds (never
applies) the backend's `skin:` at connect, so config and window can
legitimately disagree.

Restore the field and render a trailing check, and mark the root-search
theme rows and both color-mode lists the same way so every appearance
picker in the palette reports its own current value.
---
 .../desktop/src/app/command-palette/index.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/app/command-palette/index.tsx b/apps/desktop/src/app/command-palette/index.tsx
index 55e19fc9d665..50c28148cabf 100644
--- a/apps/desktop/src/app/command-palette/index.tsx
+++ b/apps/desktop/src/app/command-palette/index.tsx
@@ -16,6 +16,7 @@ import {
   AppWindow,
   Archive,
   BarChart3,
+  Check,
   ChevronLeft,
   ChevronRight,
   Clock,
@@ -90,6 +91,8 @@ import { PetInlineToggle, PetPalettePage } from './pet-palette-page'
 interface PaletteItem {
   /** Keybind action id — its live combo renders as a hotkey hint. */
   action?: string
+  /** Renders a trailing check: this row IS the current setting (theme, mode). */
+  active?: boolean
   icon: IconComponent
   id: string
   /** Keep the palette open after running (live-preview pickers like theme/mode). */
@@ -301,7 +304,7 @@ export function CommandPalette() {
   const bindings = useStore($bindings)
   const worktrees = useStore($repoWorktrees)
   const navigate = useNavigate()
-  const { availableThemes, resolvedMode, setMode, setTheme, themeName } = useTheme()
+  const { availableThemes, mode, resolvedMode, setMode, setTheme, themeName } = useTheme()
   const [search, setSearch] = useState('')
   const [page, setPage] = useState<string | null>(null)
 
@@ -666,6 +669,7 @@ export function CommandPalette() {
     result.push({
       heading: t.settings.appearance.themeTitle,
       items: availableThemes.map(theme => ({
+        active: themeName === theme.name,
         icon: Palette,
         id: `search-theme-${theme.name}`,
         keepOpen: true,
@@ -686,6 +690,7 @@ export function CommandPalette() {
     result.push({
       heading: t.settings.appearance.colorMode,
       items: THEME_MODES.map(entry => ({
+        active: mode === entry.mode,
         icon: entry.icon,
         id: `search-mode-${entry.mode}`,
         keepOpen: true,
@@ -764,13 +769,15 @@ export function CommandPalette() {
     configFieldLabel,
     go,
     mcpServers,
+    mode,
     resolvedMode,
     search,
     sessions,
     setMode,
     setTheme,
     settingsSectionLabel,
-    t
+    t,
+    themeName
   ])
 
   const groups = useMemo(() => [...baseGroups, ...searchGroups], [baseGroups, searchGroups])
@@ -824,6 +831,7 @@ export function CommandPalette() {
           {
             heading: t.settings.appearance.colorMode,
             items: THEME_MODES.map(entry => ({
+              active: mode === entry.mode,
               icon: entry.icon,
               id: `mode-${entry.mode}`,
               keepOpen: true,
@@ -848,7 +856,7 @@ export function CommandPalette() {
         groups: []
       }
     }),
-    [availableThemes, resolvedMode, setMode, setTheme, t, themeName]
+    [availableThemes, mode, resolvedMode, setMode, setTheme, t, themeName]
   )
 
   const activePage = page ? subPages[page] : null
@@ -965,6 +973,11 @@ export function CommandPalette() {
                                 className={cn('size-3.5 shrink-0 text-muted-foreground/70', !combo && 'ml-auto')}
                               />
                             )}
+                            {item.active && (
+                              <Check
+                                className={cn('size-3.5 shrink-0 text-primary', !combo && !item.to && 'ml-auto')}
+                              />
+                            )}
                           </CommandItem>
                         )
                       })}