From 804ad5897f17cd5f002fbd0c124d5301205efcfb Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Wed, 10 Dec 2025 07:46:10 -0600
Subject: [PATCH] wip(desktop): progress

---
 .../desktop/src/components/prompt-input.tsx   |  3 ++-
 packages/ui/src/components/select-dialog.css  |  4 ++--
 packages/ui/src/components/select-dialog.tsx  | 22 ++++++++++++++-----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index bbd638e44..8579647da 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/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
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={