Fix(themes): typing in the Themes picker never applies a theme you did not pick

Found while recording the 2.78.0 diagram clip: from Gruvbox Hard dark,
Cmd+Shift+P, Themes, then typing l switched the app to Nord Light with
no row highlighted, and the next keystroke kept it there. Each new
filter runs two effects in one commit: one re-syncs the highlight onto
the current theme, which lands on the next render, and the preview one
read `active` in the same commit, still an index into the previous
list. It previewed whatever sat at that index in the new list, and the
next re-sync found that theme current and locked onto it. Choosing
Themes from the recent commands, with an empty query, could do the same
with an index from the command list.

The preview now remembers the mode and the list it last saw and skips
the commit in which either changed (and the first render), so it only
follows an `active` that was set against the list it indexes. Arrows,
the pointer and Enter preview and keep exactly as before, and Escape
still reverts.

The same take showed the theme search could not find "apple light" or
"gruvbox dark hard": rankItems scores each field alone and the query
spans two. rankThemes (lib/themes.ts) adds the row read as one phrase,
family, mode, flavor, label, below the label's weight, so typing a
label still ranks it first.

Tests: rankThemes (family plus mode or flavor, a label first, every
theme for an empty query). In the built app over CDP with isolated
stores, from Gruvbox Hard dark: typing "light" leaves the theme alone,
ArrowDown previews Apple Light and Escape reverts, "apple light" lists
Apple Light first, and Themes from the recents keeps the theme; six
runs passed. One earlier run read the theme 500 ms after ArrowDown
before it repainted, with the machine at a load average of about 38.

Author: adibhanna

packages/app-core/src/components/CommandPalette.tsx

@@ -18,7 +18,7 @@ import {
   canReturnToCommandList,
   shouldRefocusEditorAfterCommand
 } from '../lib/command-palette-mode'
-import { THEMES, type ThemeFamily, type ThemeMode, type ThemeOption } from '../lib/themes'
+import { rankThemes, type ThemeFamily, type ThemeMode, type ThemeOption } from '../lib/themes'
 import {
   buildVaultSwitcherEntries,
   newWindowVaultRows,
@@ -104,15 +104,7 @@ export function CommandPalette(): JSX.Element {
     return [...recentCommands, ...ranked.filter((c) => !recentSet.has(c.id))]
   }, [allCommands, query, recentCommands])
 
-  const themeResults = useMemo<ThemeOption[]>(
-    () =>
-      rankItems(THEMES, query, [
-        { get: (t) => t.label, weight: 1 },
-        { get: (t) => t.family, weight: 0.9 },
-        { get: (t) => t.variant, weight: 0.6 }
-      ]),
-    [query]
-  )
+  const themeResults = useMemo<ThemeOption[]>(() => rankThemes(query), [query])
 
   const vaultOptions = useMemo<VaultRow[]>(() => {
     const entries = buildVaultSwitcherEntries({
@@ -208,7 +200,19 @@ export function CommandPalette(): JSX.Element {
   }, [active])
 
   /* -------- Theme preview on active change -------- */
+  // A new filter or mode re-syncs `active` in the effect above, but that lands
+  // on the next render: in this one `active` still indexes the previous list
+  // (or the command list), and previewing it applied a theme nobody had
+  // highlighted (typing `l` from Gruvbox Hard dark switched to Nord Light),
+  // which the next re-sync then locked onto. So a preview waits until `active`
+  // was set against the list it indexes, including on the first render.
+  const previewBasisRef = useRef<{ mode: Mode; results: ThemeOption[] } | null>(null)
   useEffect(() => {
+    const basis = previewBasisRef.current
+    if (!basis || basis.mode !== mode || basis.results !== themeResults) {
+      previewBasisRef.current = { mode, results: themeResults }
+      return
+    }
     if (mode !== 'theme') return
     if (active < 0) return
     const theme = themeResults[active]

packages/app-core/src/lib/themes.test.ts

@@ -2,7 +2,7 @@
 import { readFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
-import { THEMES, resolveAuto } from './themes'
+import { THEMES, rankThemes, resolveAuto } from './themes'
 
 const css = readFileSync(
   fileURLToPath(new URL('../styles/index.css', import.meta.url)),
@@ -77,3 +77,17 @@ describe('built-in theme registry ↔ CSS', () => {
     }
   })
 })
+
+describe('rankThemes', () => {
+  it('finds a family named together with its mode or flavor', () => {
+    expect(rankThemes('apple light')[0]?.id).toBe('apple-light')
+    expect(rankThemes('apple dark')[0]?.id).toBe('apple-dark')
+    expect(rankThemes('gruvbox dark hard')[0]?.id).toBe('dark-hard')
+    expect(rankThemes('tokyo night')[0]?.family).toBe('tokyo-night')
+  })
+
+  it('still ranks a whole label first, and lists every theme for an empty query', () => {
+    expect(rankThemes('light')[0]?.id).toBe('apple-light')
+    expect(rankThemes('')).toHaveLength(THEMES.length)
+  })
+})

packages/app-core/src/lib/themes.ts

@@ -9,6 +9,8 @@
  *                                                        dark, dark dimmed, dark high-contrast
  */
 
+import { rankItems } from './fuzzy-score'
+
 export type ThemeFamily =
   | 'apple'
   | 'gruvbox'
@@ -189,3 +191,19 @@ export function resolveAuto(
   // github
   return targetMode === 'dark' ? 'github-dark' : 'github-light'
 }
+
+/** The Themes picker's ranking. Each field is scored on its own, so a query
+ *  that names a family together with its mode or flavor ("apple light",
+ *  "gruvbox dark hard") matched none of them and the list came up empty. The
+ *  last field reads a row as one phrase, family first, the way people say it. */
+export function rankThemes(query: string, themes: readonly ThemeOption[] = THEMES): ThemeOption[] {
+  return rankItems([...themes], query, [
+    { get: (t) => t.label, weight: 1 },
+    { get: (t) => t.family, weight: 0.9 },
+    { get: (t) => t.variant, weight: 0.6 },
+    {
+      get: (t) => [t.family.replace(/-/g, ' '), t.mode, t.variant, t.label].filter(Boolean).join(' '),
+      weight: 0.8
+    }
+  ])
+}