refactor: clean up dialog-model.tsx per code review

- Extract duplicated favorite/recent option builder into toOptions helper
- Simplify showExtra memo to single boolean expression
- Simplify title memo with optional chaining
- Remove dead ref signal and unused DialogSelectRef import
- Inline intermediate variables (q, value aliases)
- Use implicit returns in map callbacks

packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx

@@ -2,7 +2,7 @@ import { createMemo, createSignal } from "solid-js"
 import { useLocal } from "@tui/context/local"
 import { useSync } from "@tui/context/sync"
 import { map, pipe, flatMap, entries, filter, sortBy, take } from "remeda"
-import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
+import { DialogSelect } from "@tui/ui/dialog-select"
 import { useDialog } from "@tui/ui/dialog"
 import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
 import { useKeybind } from "../context/keybind"
@@ -20,21 +20,15 @@ export function DialogModel(props: { providerID?: string }) {
   const sync = useSync()
   const dialog = useDialog()
   const keybind = useKeybind()
-  const [ref, setRef] = createSignal<DialogSelectRef<unknown>>()
   const [query, setQuery] = createSignal("")
 
   const connected = useConnected()
   const providers = createDialogProviderOptions()
 
-  const showExtra = createMemo(() => {
+  const showExtra = createMemo(() => connected() && !props.providerID)
-    if (!connected()) return false
-    if (props.providerID) return false
-    return true
-  })
 
   const options = createMemo(() => {
-    const q = query()
+    const needle = query().trim()
-    const needle = q.trim()
     const showSections = showExtra() && needle.length === 0
     const favorites = connected() ? local.model.favorite() : []
     const recents = local.model.recent()
@@ -45,71 +39,33 @@ export function DialogModel(props: { providerID?: string }) {
         )
       : []
 
-    const favoriteOptions = showSections
+    function toOptions(items: typeof favorites, category: string) {
-      ? favorites.flatMap((item) => {
+      if (!showSections) return []
-          const provider = sync.data.provider.find((x) => x.id === item.providerID)
+      return items.flatMap((item) => {
-          if (!provider) return []
+        const provider = sync.data.provider.find((x) => x.id === item.providerID)
-          const model = provider.models[item.modelID]
+        if (!provider) return []
-          if (!model) return []
+        const model = provider.models[item.modelID]
-          return [
+        if (!model) return []
-            {
+        return [
-              key: item,
+          {
-              value: {
+            key: item,
-                providerID: provider.id,
+            value: { providerID: provider.id, modelID: model.id },
-                modelID: model.id,
+            title: model.name ?? item.modelID,
-              },
+            description: provider.name,
-              title: model.name ?? item.modelID,
+            category,
-              description: provider.name,
+            disabled: provider.id === "opencode" && model.id.includes("-nano"),
-              category: "Favorites",
+            footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
-              disabled: provider.id === "opencode" && model.id.includes("-nano"),
+            onSelect: () => {
-              footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
+              dialog.clear()
-              onSelect: () => {
+              local.model.set({ providerID: provider.id, modelID: model.id }, { recent: true })
-                dialog.clear()
-                local.model.set(
-                  {
-                    providerID: provider.id,
-                    modelID: model.id,
-                  },
-                  { recent: true },
-                )
-              },
             },
-          ]
+          },
-        })
+        ]
-      : []
+      })
+    }
 
-    const recentOptions = showSections
+    const favoriteOptions = toOptions(favorites, "Favorites")
-      ? recentList.flatMap((item) => {
+    const recentOptions = toOptions(recentList, "Recent")
-          const provider = sync.data.provider.find((x) => x.id === item.providerID)
-          if (!provider) return []
-          const model = provider.models[item.modelID]
-          if (!model) return []
-          return [
-            {
-              key: item,
-              value: {
-                providerID: provider.id,
-                modelID: model.id,
-              },
-              title: model.name ?? item.modelID,
-              description: provider.name,
-              category: "Recent",
-              disabled: provider.id === "opencode" && model.id.includes("-nano"),
-              footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
-              onSelect: () => {
-                dialog.clear()
-                local.model.set(
-                  {
-                    providerID: provider.id,
-                    modelID: model.id,
-                  },
-                  { recent: true },
-                )
-              },
-            },
-          ]
-        })
-      : []
 
     const providerOptions = pipe(
       sync.data.provider,
@@ -123,45 +79,26 @@ export function DialogModel(props: { providerID?: string }) {
           entries(),
           filter(([_, info]) => info.status !== "deprecated"),
           filter(([_, info]) => (props.providerID ? info.providerID === props.providerID : true)),
-          map(([model, info]) => {
+          map(([model, info]) => ({
-            const value = {
+            value: { providerID: provider.id, modelID: model },
-              providerID: provider.id,
+            title: info.name ?? model,
-              modelID: model,
+            description: favorites.some((item) => item.providerID === provider.id && item.modelID === model)
-            }
+              ? "(Favorite)"
-            return {
+              : undefined,
-              value,
+            category: connected() ? provider.name : undefined,
-              title: info.name ?? model,
+            disabled: provider.id === "opencode" && model.includes("-nano"),
-              description: favorites.some(
+            footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
-                (item) => item.providerID === value.providerID && item.modelID === value.modelID,
+            onSelect() {
-              )
+              dialog.clear()
-                ? "(Favorite)"
+              local.model.set({ providerID: provider.id, modelID: model }, { recent: true })
-                : undefined,
+            },
-              category: connected() ? provider.name : undefined,
+          })),
-              disabled: provider.id === "opencode" && model.includes("-nano"),
-              footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
-              onSelect() {
-                dialog.clear()
-                local.model.set(
-                  {
-                    providerID: provider.id,
-                    modelID: model,
-                  },
-                  { recent: true },
-                )
-              },
-            }
-          }),
           filter((x) => {
             if (!showSections) return true
-            const value = x.value
+            if (favorites.some((item) => item.providerID === x.value.providerID && item.modelID === x.value.modelID))
-            const inFavorites = favorites.some(
+              return false
-              (item) => item.providerID === value.providerID && item.modelID === value.modelID,
+            if (recents.some((item) => item.providerID === x.value.providerID && item.modelID === x.value.modelID))
-            )
+              return false
-            if (inFavorites) return false
-            const inRecents = recents.some(
-              (item) => item.providerID === value.providerID && item.modelID === value.modelID,
-            )
-            if (inRecents) return false
             return true
           }),
           sortBy(
@@ -175,12 +112,10 @@ export function DialogModel(props: { providerID?: string }) {
     const popularProviders = !connected()
       ? pipe(
           providers(),
-          map((option) => {
+          map((option) => ({
-            return {
+            ...option,
-              ...option,
+            category: "Popular providers",
-              category: "Popular providers",
+          })),
-            }
-          }),
           take(6),
         )
       : []
@@ -199,13 +134,11 @@ export function DialogModel(props: { providerID?: string }) {
     props.providerID ? sync.data.provider.find((x) => x.id === props.providerID) : null,
   )
 
-  const title = createMemo(() => {
+  const title = createMemo(() => provider()?.name ?? "Select model")
-    if (provider()) return provider()!.name
-    return "Select model"
-  })
 
   return (
-    <DialogSelect
+    <DialogSelect<ReturnType<typeof options>[number]["value"]>
+      options={options()}
       keybind={[
         {
           keybind: keybind.all.model_provider_list?.[0],
@@ -223,12 +156,10 @@ export function DialogModel(props: { providerID?: string }) {
           },
         },
       ]}
-      ref={setRef}
       onFilter={setQuery}
       skipFilter={true}
       title={title()}
       current={local.model.current()}
-      options={options()}
     />
   )
 }