fix: favorites and recents stay visible when filtering models (#6053)

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

@@ -6,6 +6,7 @@ import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
 import { useDialog } from "@tui/ui/dialog"
 import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
 import { Keybind } from "@/util/keybind"
+import * as fuzzysort from "fuzzysort"
 
 export function useConnected() {
   const sync = useSync()
@@ -19,6 +20,7 @@ export function DialogModel(props: { providerID?: string }) {
   const sync = useSync()
   const dialog = useDialog()
   const [ref, setRef] = createSignal<DialogSelectRef<unknown>>()
+  const [query, setQuery] = createSignal("")
 
   const connected = useConnected()
   const providers = createDialogProviderOptions()
@@ -30,7 +32,7 @@ export function DialogModel(props: { providerID?: string }) {
   })
 
   const options = createMemo(() => {
-    const query = ref()?.filter
+    const q = query()
     const favorites = showExtra() ? local.model.favorite() : []
     const recents = local.model.recent()
 
@@ -42,8 +44,7 @@ export function DialogModel(props: { providerID?: string }) {
           .slice(0, 5)
       : []
 
-    const favoriteOptions = !query
-      ? favorites.flatMap((item) => {
+    const favoriteOptions = favorites.flatMap((item) => {
       const provider = sync.data.provider.find((x) => x.id === item.providerID)
       if (!provider) return []
       const model = provider.models[item.modelID]
@@ -73,10 +74,8 @@ export function DialogModel(props: { providerID?: string }) {
         },
       ]
     })
-      : []
 
-    const recentOptions = !query
-      ? recentList.flatMap((item) => {
+    const recentOptions = recentList.flatMap((item) => {
       const provider = sync.data.provider.find((x) => x.id === item.providerID)
       if (!provider) return []
       const model = provider.models[item.modelID]
@@ -106,12 +105,8 @@ export function DialogModel(props: { providerID?: string }) {
         },
       ]
     })
-      : []
 
-    return [
-      ...favoriteOptions,
-      ...recentOptions,
-      ...pipe(
+    const providerOptions = pipe(
       sync.data.provider,
       sortBy(
         (provider) => provider.id !== "opencode",
@@ -152,7 +147,6 @@ export function DialogModel(props: { providerID?: string }) {
             }
           }),
           filter((x) => {
-              if (query) return true
             const value = x.value
             const inFavorites = favorites.some(
               (item) => item.providerID === value.providerID && item.modelID === value.modelID,
@@ -170,8 +164,9 @@ export function DialogModel(props: { providerID?: string }) {
           ),
         ),
       ),
-      ),
-      ...(!connected()
+    )
+
+    const popularProviders = !connected()
       ? pipe(
           providers(),
           map((option) => {
@@ -182,8 +177,18 @@ export function DialogModel(props: { providerID?: string }) {
           }),
           take(6),
         )
-        : []),
-    ]
+      : []
+
+    // Apply fuzzy filtering to each section separately, maintaining section order
+    if (q) {
+      const filteredFavorites = fuzzysort.go(q, favoriteOptions, { keys: ["title"] }).map((x) => x.obj)
+      const filteredRecents = fuzzysort.go(q, recentOptions, { keys: ["title"] }).map((x) => x.obj)
+      const filteredProviders = fuzzysort.go(q, providerOptions, { keys: ["title", "category"] }).map((x) => x.obj)
+      const filteredPopular = fuzzysort.go(q, popularProviders, { keys: ["title"] }).map((x) => x.obj)
+      return [...filteredFavorites, ...filteredRecents, ...filteredProviders, ...filteredPopular]
+    }
+
+    return [...favoriteOptions, ...recentOptions, ...providerOptions, ...popularProviders]
   })
 
   const provider = createMemo(() =>
@@ -215,6 +220,8 @@ export function DialogModel(props: { providerID?: string }) {
         },
       ]}
       ref={setRef}
+      onFilter={setQuery}
+      skipFilter={true}
       title={title()}
       current={local.model.current()}
       options={options()}

packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -19,6 +19,7 @@ export interface DialogSelectProps<T> {
   onMove?: (option: DialogSelectOption<T>) => void
   onFilter?: (query: string) => void
   onSelect?: (option: DialogSelectOption<T>) => void
+  skipFilter?: boolean
   keybind?: {
     keybind: Keybind.Info
     title: string
@@ -74,7 +75,8 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
     const result = pipe(
       props.options,
       filter((x) => x.disabled !== true),
-      (x) => (!needle ? x : fuzzysort.go(needle, x, { keys: ["title", "category"] }).map((x) => x.obj)),
+      (x) =>
+        !needle || props.skipFilter ? x : fuzzysort.go(needle, x, { keys: ["title", "category"] }).map((x) => x.obj),
     )
     return result
   })