fix(desktop): show a check on the active theme and color mode in ⌘K

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.
This commit is contained in:
Brooklyn Nicholson 2026-07-27 20:56:03 -05:00
parent 71e7eb3c16
commit 69f72f2b7c

View file

@ -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>
)
})}