wip(desktop): progress

packages/desktop/src/components/prompt-input.tsx

@@ -461,7 +461,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               items={local.model.list()}
               current={local.model.current()}
               filterKeys={["provider.name", "name", "id"]}
-              groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)}
+              // groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)}
+              groupBy={(x) => x.provider.name}
               sortGroupsBy={(a, b) => {
                 const order = ["opencode", "anthropic", "github-copilot", "openai", "google", "openrouter", "vercel"]
                 if (a.category === "Recent" && b.category !== "Recent") return -1

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;

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={