chore: cleanup theme stuff

Author: adamdotdevin

packages/app/src/context/command.tsx

@@ -3,7 +3,6 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { useTheme } from "@opencode-ai/ui/theme"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 
@@ -27,6 +26,7 @@ export interface CommandOption {
   suggested?: boolean
   disabled?: boolean
   onSelect?: (source?: "palette" | "keybind" | "slash") => void
+  onHighlight?: () => (() => void) | void
 }
 
 export function parseKeybind(config: string): Keybind[] {
@@ -116,32 +116,26 @@ export function formatKeybind(config: string): string {
 
 function DialogCommand(props: { options: CommandOption[] }) {
   const dialog = useDialog()
-  const theme = useTheme()
+  let cleanup: (() => void) | void
   let committed = false
 
   const handleMove = (option: CommandOption | undefined) => {
-    if (!option) return
-    if (option.id.startsWith("theme.set.")) {
-      const id = option.id.replace("theme.set.", "")
-      theme.previewTheme(id)
-    } else if (option.id.startsWith("theme.scheme.") && !option.id.includes("cycle")) {
-      const scheme = option.id.replace("theme.scheme.", "") as "light" | "dark" | "system"
-      theme.previewColorScheme(scheme)
-    }
+    cleanup?.()
+    cleanup = option?.onHighlight?.()
   }
 
   const handleSelect = (option: CommandOption | undefined) => {
     if (option) {
-      theme.commitPreview()
       committed = true
+      cleanup = undefined
       dialog.close()
       option.onSelect?.("palette")
     }
   }
 
   onCleanup(() => {
     if (!committed) {
-      theme.cancelPreview()
+      cleanup?.()
     }
   })
 

packages/app/src/pages/layout.tsx

@@ -49,7 +49,7 @@ import { Header } from "@/components/header"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
-import { useCommand } from "@/context/command"
+import { useCommand, type CommandOption } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
 
 export default function Layout(props: ParentProps) {
@@ -323,7 +323,7 @@ export default function Layout(props: ParentProps) {
   }
 
   command.register(() => {
-    const commands = [
+    const commands: CommandOption[] = [
       {
         id: "sidebar.toggle",
         title: "Toggle sidebar",
@@ -387,7 +387,11 @@ export default function Layout(props: ParentProps) {
         id: `theme.set.${id}`,
         title: `Use theme: ${definition.name ?? id}`,
         category: "Theme",
-        onSelect: () => theme.setTheme(id),
+        onSelect: () => theme.commitPreview(),
+        onHighlight: () => {
+          theme.previewTheme(id)
+          return () => theme.cancelPreview()
+        },
       })
     }
 
@@ -404,7 +408,11 @@ export default function Layout(props: ParentProps) {
         id: `theme.scheme.${scheme}`,
         title: `Use color scheme: ${colorSchemeLabel[scheme]}`,
         category: "Theme",
-        onSelect: () => theme.setColorScheme(scheme),
+        onSelect: () => theme.commitPreview(),
+        onHighlight: () => {
+          theme.previewColorScheme(scheme)
+          return () => theme.cancelPreview()
+        },
       })
     }