wip(desktop): progress

2 files changed, 18 insertions, 8 deletions

diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index 83085e082..206eade0d 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  gap: 12px;
+  gap: 20px;
   padding: 0 10px;
 }
 
@@ -38,7 +38,7 @@
 [data-component="select-dialog"] {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 20px;
 
   [data-slot="select-dialog-empty-state"] {
     display: flex;
diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx
index 90c269eea..695791aad 100644
--- a/packages/ui/src/components/select-dialog.tsx
+++ b/packages/ui/src/components/select-dialog.tsx
@@ -1,4 +1,4 @@
-import { createEffect, Show, For, type JSX, splitProps } from "solid-js"
+import { createEffect, Show, For, type JSX, splitProps, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FilteredListProps, useFilteredList } from "@opencode-ai/ui/hooks"
 import { Dialog, DialogProps } from "./dialog"
@@ -21,7 +21,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
   const [dialog, others] = splitProps(props, ["trigger", "onOpenChange", "defaultOpen"])
   let closeButton!: HTMLButtonElement
   let inputRef: HTMLInputElement | undefined
-  let scrollRef: HTMLDivElement | undefined
+  let [scrollRef, setScrollRef] = createSignal<HTMLDivElement | undefined>(undefined)
   const [store, setStore] = createStore({
     mouseActive: false,
   })
@@ -38,18 +38,28 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
 
   createEffect(() => {
     filter()
-    scrollRef?.scrollTo(0, 0)
+    scrollRef()?.scrollTo(0, 0)
     reset()
   })
 
   createEffect(() => {
+    if (!scrollRef()) return
+    if (!others.current) return
+    const key = others.key(others.current)
+    requestAnimationFrame(() => {
+      const element = scrollRef()!.querySelector(`[data-key="${key}"]`)
+      element?.scrollIntoView({ block: "center" })
+    })
+  })
+
+  createEffect(() => {
     const all = flat()
     if (store.mouseActive || all.length === 0) return
     if (active() === others.key(all[0])) {
-      scrollRef?.scrollTo(0, 0)
+      scrollRef()?.scrollTo(0, 0)
       return
     }
-    const element = scrollRef?.querySelector(`[data-key="${active()}"]`)
+    const element = scrollRef()?.querySelector(`[data-key="${active()}"]`)
     element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
   })
 
@@ -120,7 +130,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
             />
           </Show>
         </div>
-        <Dialog.Body ref={scrollRef} data-component="select-dialog" class="no-scrollbar">
+        <Dialog.Body ref={setScrollRef} data-component="select-dialog" class="no-scrollbar">
           <Show
             when={flat().length > 0}
             fallback={