Theme selector UX (current theme indicator and easier selection) (#4623)

Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: Aiden Cline <[email protected]>

2 files changed, 18 insertions, 5 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx b/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx
index 5240603f8..c6d22be7b 100644
--- a/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx
@@ -14,10 +14,6 @@ export function DialogThemeList() {
   let ref: DialogSelectRef<string>
   const initial = theme.selected
 
-  onMount(() => {
-    theme.set(Object.keys(theme.all())[0])
-  })
-
   onCleanup(() => {
     if (!confirmed) theme.set(initial)
   })
@@ -26,6 +22,7 @@ export function DialogThemeList() {
     <DialogSelect
       title="Themes"
       options={options}
+      current={initial}
       onMove={(opt) => {
         theme.set(opt.value)
       }}
diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
index 987bbd0b9..ca4ec322e 100644
--- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
+++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
@@ -50,6 +50,15 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
     filter: "",
   })
 
+  createEffect(() => {
+    if (props.current) {
+      const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, props.current))
+      if (currentIndex >= 0) {
+        setStore("selected", currentIndex)
+      }
+    }
+  })
+
   let input: InputRenderable
 
   const filtered = createMemo(() => {
@@ -88,7 +97,14 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
 
   createEffect(() => {
     store.filter
-    setStore("selected", 0)
+    if (store.filter.length > 0) {
+      setStore("selected", 0)
+    } else if (props.current) {
+      const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, props.current))
+      if (currentIndex >= 0) {
+        setStore("selected", currentIndex)
+      }
+    }
     scroll.scrollTo(0)
   })