fix(app): redesign model selection dialog (#44383)

packages/app/src/providers/models/manage.tsx

@@ -7,6 +7,7 @@ import { Switch } from "@opencode-ai/ui/switch"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { For, Show, type Component } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLocal } from "@/providers/models/selection"
 import { popularProviders } from "@/providers/catalog/providers"
 import { useLanguage } from "@/runtime/i18n/language"
@@ -23,6 +24,7 @@ export const DialogManageModels: Component = () => {
   const local = useLocal()
   const language = useLanguage()
   const dialog = useDialog()
+  const [store, setStore] = createStore({ collapsed: {} as Record<string, boolean> })
   const directory = () => decode64(local.slug())
 
   const handleConnectProvider = () => {
@@ -120,16 +122,38 @@ export const DialogManageModels: Component = () => {
                 }
               >
                 <For each={list.grouped.latest}>
-                  {(group) => (
-                    <div class="settings-section" data-component="settings-models-provider">
-                      <div class="settings-models-group-header justify-between">
-                        <div class="flex min-w-0 items-center gap-2">
-                          <ProviderIcon id={group.category} width={16} height={16} class="ml-4 shrink-0" />
-                          <h3 class="settings-section-title">{group.items[0].provider.name}</h3>
-                        </div>
-                        <div>
+                  {(group) => {
+                    const searching = () => list.filter().length > 0
+                    const expanded = () => searching() || !store.collapsed[group.category]
+
+                    return (
+                      <div
+                        class="settings-section"
+                        data-component="settings-models-provider"
+                        data-expanded={expanded() ? "" : undefined}
+                      >
+                        <div class="settings-models-group-header justify-between">
+                          <button
+                            type="button"
+                            class="settings-models-group-trigger"
+                            aria-expanded={expanded()}
+                            disabled={searching()}
+                            onClick={() => setStore("collapsed", group.category, expanded())}
+                          >
+                            <span class="settings-models-group-chevron">
+                              <Icon
+                                name="chevron-down"
+                                size="small"
+                                classList={{ "-rotate-90 rtl:rotate-90": !expanded() }}
+                              />
+                            </span>
+                            <span class="settings-models-group-label">
+                              <ProviderIcon id={group.category} width={16} height={16} class="shrink-0" />
+                              <span class="settings-section-title">{group.items[0].provider.name}</span>
+                            </span>
+                          </button>
                           <Switch
-                            class="mr-6"
+                            class="me-6"
                             checked={providerVisible(group.category)}
                             onChange={(checked) => setProviderVisibility(group.category, checked)}
                             hideLabel
@@ -137,26 +161,28 @@ export const DialogManageModels: Component = () => {
                             {group.items[0].provider.name}
                           </Switch>
                         </div>
+                        <Show when={expanded()}>
+                          <SettingsList>
+                            <For each={group.items}>
+                              {(item) => (
+                                <SettingsRow title={item.name} description="">
+                                  <div>
+                                    <Switch
+                                      checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
+                                      onChange={(checked) => setModelVisibility(item, checked)}
+                                      hideLabel
+                                    >
+                                      {item.name}
+                                    </Switch>
+                                  </div>
+                                </SettingsRow>
+                              )}
+                            </For>
+                          </SettingsList>
+                        </Show>
                       </div>
-                      <SettingsList>
-                        <For each={group.items}>
-                          {(item) => (
-                            <SettingsRow title={item.name} description="">
-                              <div>
-                                <Switch
-                                  checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
-                                  onChange={(checked) => setModelVisibility(item, checked)}
-                                  hideLabel
-                                >
-                                  {item.name}
-                                </Switch>
-                              </div>
-                            </SettingsRow>
-                          )}
-                        </For>
-                      </SettingsList>
-                    </div>
-                  )}
+                    )
+                  }}
                 </For>
               </Show>
             </Show>

packages/app/src/providers/models/select-dialog.tsx

@@ -10,9 +10,10 @@ import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/d
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Menu } from "@opencode-ai/ui/menu"
+import { TextInput } from "@opencode-ai/ui/text-input"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { ModelTooltip } from "./tooltip"
 import { useLanguage } from "@/runtime/i18n/language"
 import { decode64 } from "@/runtime/persistence/base64"
@@ -20,6 +21,8 @@ import { handleDocumentSearchKeydown } from "@/shell/commands/search-keydown"
 import { createMenuDismissController } from "@/shell/commands/menu-dismiss"
 import { createEventListener } from "@solid-primitives/event-listener"
 import { matchesModelSearch } from "./search"
+import { SettingsList } from "@/settings/list"
+import "@/settings/settings.css"
 
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
@@ -44,70 +47,182 @@ const sortModelGroups = (a: { category: string; items: ModelItem[] }, b: { categ
 
 const ModelList: Component<{
   provider?: string
-  class?: string
   onSelect: () => void
-  action?: JSX.Element
   model?: ModelState
 }> = (props) => {
-  const model = props.model ?? useLocal().model
   const language = useLanguage()
+  const controller = createModelSelectorController({
+    model: props.model,
+    provider: () => props.provider,
+    onSelect: props.onSelect,
+  })
+  const [store, setStore] = createStore({
+    search: "",
+    active: "",
+    collapsed: {} as Record<string, boolean>,
+  })
+  const models = createMemo(() => controller.models(store.search))
+  const groups = createMemo(() => controller.groups(models()))
+  const expanded = (provider: string) => store.search.length > 0 || !store.collapsed[provider]
+  const visibleModels = () => models().filter((item) => expanded(item.provider.id))
+  let scrollRef: HTMLDivElement | undefined
 
-  const models = createMemo(() =>
-    model
-      .list()
-      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
-      .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
-  )
+  const setSearch = (value: string) => {
+    const first = controller.models(value).find((item) => value.length > 0 || !store.collapsed[item.provider.id])
+    setStore({ search: value, active: first ? modelKey(first) : "" })
+  }
+  const moveActive = (delta: number) => {
+    const keys = visibleModels().map(modelKey)
+    if (keys.length === 0) return
+    const index = keys.indexOf(store.active)
+    const start = index === -1 ? (delta > 0 ? -1 : 0) : index
+    setStore("active", keys[(start + delta + keys.length) % keys.length])
+    queueMicrotask(() => {
+      scrollRef
+        ?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(store.active)}"]`)
+        ?.scrollIntoView({ block: "nearest" })
+    })
+  }
+  const selectActive = () => {
+    const item = visibleModels().find((item) => modelKey(item) === store.active)
+    if (item) controller.select(item)
+  }
 
   return (
-    <List
-      class={`flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
-      search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true, action: props.action }}
-      emptyMessage={language.t("dialog.model.empty")}
-      key={(x) => `${x.provider.id}:${x.id}`}
-      items={models}
-      current={model.current()}
-      filterKeys={["provider.name", "name", "id"]}
-      sortBy={(a, b) => a.name.localeCompare(b.name)}
-      groupBy={(x) => x.provider.name}
-      sortGroupsBy={(a, b) => {
-        const aProvider = a.items[0].provider.id
-        const bProvider = b.items[0].provider.id
-        if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
-        if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
-        return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
-      }}
-      itemWrapper={(item, node) => (
-        <Tooltip
-          appearance="standard"
-          class="w-full"
-          placement="right-start"
-          gutter={12}
-          openDelay={0}
-          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
-        >
-          {node}
-        </Tooltip>
-      )}
-      onSelect={(x) => {
-        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
-          recent: true,
-        })
-        props.onSelect()
-      }}
-    >
-      {(i) => (
-        <div class="w-full flex items-center gap-x-2 text-13-regular">
-          <span class="truncate">{i.name}</span>
-          <Show when={isFree(i.provider.id, i.cost)}>
-            <Badge appearance="standard">{language.t("model.tag.free")}</Badge>
-          </Show>
-          <Show when={i.latest}>
-            <Badge appearance="standard">{language.t("model.tag.latest")}</Badge>
+    <div class="flex min-h-0 flex-1 flex-col">
+      <div class="shrink-0 px-4 pt-px pb-3">
+        <div class="relative">
+          <TextInput
+            type="search"
+            appearance="base"
+            class="!w-full self-stretch"
+            placeholder={language.t("dialog.model.search.placeholder")}
+            value={store.search}
+            autofocus
+            spellcheck={false}
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            onInput={(event) => setSearch(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.altKey || event.metaKey) return
+              if (event.key === "ArrowDown") {
+                event.preventDefault()
+                moveActive(1)
+                return
+              }
+              if (event.key === "ArrowUp") {
+                event.preventDefault()
+                moveActive(-1)
+                return
+              }
+              if (event.key === "Enter" && !event.isComposing) {
+                event.preventDefault()
+                selectActive()
+              }
+            }}
+            aria-label={language.t("dialog.model.search.placeholder")}
+          />
+          <Show when={store.search}>
+            <IconButton
+              type="button"
+              variant="ghost-muted"
+              size="small"
+              class="settings-tab-search-clear"
+              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+              onClick={() => setSearch("")}
+              aria-label={language.t("common.clear")}
+            />
           </Show>
         </div>
-      )}
-    </List>
+      </div>
+      <div class="relative min-h-0 flex-1">
+        <div ref={(element) => (scrollRef = element)} class="settings-panel settings-models h-full px-4 pt-4 pb-4">
+          <Show
+            when={models().length > 0}
+            fallback={<div class="settings-models-status">{language.t("dialog.model.empty")}</div>}
+          >
+            <For each={groups()}>
+              {(group) => {
+                const searching = () => store.search.length > 0
+                const open = () => expanded(group.category)
+
+                return (
+                  <section class="settings-section" data-expanded={open() ? "" : undefined}>
+                    <h3 class="settings-models-group-header">
+                      <button
+                        type="button"
+                        class="settings-models-group-trigger"
+                        aria-expanded={open()}
+                        disabled={searching()}
+                        onClick={() => setStore("collapsed", group.category, open())}
+                      >
+                        <span class="settings-models-group-chevron">
+                          <Icon name="chevron-down" size="small" classList={{ "-rotate-90 rtl:rotate-90": !open() }} />
+                        </span>
+                        <span class="settings-models-group-label">
+                          <ProviderIcon id={group.category} width={16} height={16} class="shrink-0" />
+                          <span class="settings-section-title">{group.items[0].provider.name}</span>
+                        </span>
+                      </button>
+                    </h3>
+                    <Show when={open()}>
+                      <SettingsList>
+                        <For each={group.items}>
+                          {(item) => (
+                            <button
+                              type="button"
+                              data-component="settings-row"
+                              data-option-key={modelKey(item)}
+                              class="-mx-4 w-[calc(100%+32px)] px-4 text-start first:rounded-t-lg last:rounded-b-lg hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+                              classList={{ "bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
+                              onMouseEnter={() => setStore("active", modelKey(item))}
+                              onMouseLeave={() => setStore("active", "")}
+                              onClick={() => controller.select(item)}
+                            >
+                              <div data-slot="settings-row-copy">
+                                <div data-slot="settings-row-title" class="flex items-center gap-2">
+                                  <Tooltip
+                                    placement="right-start"
+                                    gutter={12}
+                                    openDelay={0}
+                                    value={
+                                      <ModelTooltip
+                                        model={item}
+                                        latest={item.latest}
+                                        free={isFree(item.provider.id, item.cost)}
+                                        v2
+                                      />
+                                    }
+                                  >
+                                    <span class="min-w-0 truncate">{item.name}</span>
+                                  </Tooltip>
+                                  <Show when={isFree(item.provider.id, item.cost)}>
+                                    <Badge class="shrink-0">{language.t("model.tag.free")}</Badge>
+                                  </Show>
+                                  <Show when={item.latest}>
+                                    <Badge class="shrink-0">{language.t("model.tag.latest")}</Badge>
+                                  </Show>
+                                </div>
+                              </div>
+                              <div data-slot="settings-row-control" class="size-4">
+                                <Show when={controller.current() === modelKey(item)}>
+                                  <Icon name="check" size="small" class="shrink-0 text-v2-icon-icon-base" />
+                                </Show>
+                              </div>
+                            </button>
+                          )}
+                        </For>
+                      </SettingsList>
+                    </Show>
+                  </section>
+                )
+              }}
+            </For>
+          </Show>
+        </div>
+      </div>
+    </div>
   )
 }
 
@@ -431,18 +546,25 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
   }
 
   return (
-    <Dialog>
-      <DialogHeader hideClose>
+    <Dialog size="large" variant="settings">
+      <DialogHeader hideClose closeLabel={language.t("common.close")}>
         <DialogTitle>{language.t("dialog.model.select.title")}</DialogTitle>
-        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
+        <Button icon="plus" onClick={provider}>
           {language.t("command.provider.connect")}
         </Button>
       </DialogHeader>
-      <DialogBody>
+      <DialogBody class="flex min-h-0 flex-1 flex-col">
         <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
-        <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
-          {language.t("dialog.model.manage")}
-        </Button>
+        <div class="shrink-0 border-t border-v2-border-border-muted px-4 py-3">
+          <button
+            type="button"
+            class="flex h-9 w-full items-center gap-2 rounded-md px-3 text-left text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-base hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+            onClick={manage}
+          >
+            <Icon name="outline-sliders" size="small" />
+            <span class="min-w-0 flex-1 truncate">{language.t("dialog.model.manage")}</span>
+          </button>
+        </div>
       </DialogBody>
     </Dialog>
   )