fix: hidden sort filter when searching model

web-app/src/routes/hub/index.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
 import { route } from '@/constants/routes'
 import { useModelSources } from '@/hooks/useModelSources'
 import { cn } from '@/lib/utils'
 import {
   useState,
   useMemo,
   useEffect,
@@ -12,39 +12,39 @@
   useCallback,
   useRef,
 } from 'react'
 import { Button } from '@/components/ui/button'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { Card, CardItem } from '@/containers/Card'
 import { RenderMarkdown } from '@/containers/RenderMarkdown'
 import { extractModelName, extractDescription } from '@/lib/models'
 import {
   IconDownload,
   IconFileCode,
   IconSearch,
   IconTool,
 } from '@tabler/icons-react'
 import { Switch } from '@/components/ui/switch'
 import Joyride, { CallBackProps, STATUS } from 'react-joyride'
 import { CustomTooltipJoyRide } from '@/containers/CustomeTooltipJoyRide'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import {
   CatalogModel,
   pullModel,
   fetchHuggingFaceRepo,
   convertHfRepoToCatalogModel,
 } from '@/services/models'
 import { useDownloadStore } from '@/hooks/useDownloadStore'
 import { Progress } from '@/components/ui/progress'
 import HeaderPage from '@/containers/HeaderPage'
 import { Loader } from 'lucide-react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 import Fuse from 'fuse.js'
 import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 
 type ModelProps = {
   model: CatalogModel
@@ -52,31 +52,31 @@
 type SearchParams = {
   repo: string
 }
 const defaultModelQuantizations = ['iq4_xs', 'q4_k_m']
 
 export const Route = createFileRoute(route.hub.index as any)({
   component: Hub,
   validateSearch: (search: Record<string, unknown>): SearchParams => ({
     repo: search.repo as SearchParams['repo'],
   }),
 })
 
 function Hub() {
   const parentRef = useRef(null)
   const { huggingfaceToken } = useGeneralSetting()
 
   const { t } = useTranslation()
   const sortOptions = [
     { value: 'newest', name: t('hub:sortNewest') },
     { value: 'most-downloaded', name: t('hub:sortMostDownloaded') },
   ]
   const searchOptions = useMemo(() => {
     return {
       includeScore: true,
       // Search in `author` and in `tags` array
       keys: ['model_name', 'quants.model_id'],
     }
   }, [])
 
   const { sources, fetchSources, loading } = useModelSources()
 
@@ -146,14 +146,16 @@
     }
     // Apply downloaded filter
     if (showOnlyDownloaded) {
-      filtered = filtered?.map((model) => ({
-        ...model,
-        quants: model.quants.filter((variant) =>
-          llamaProvider?.models.some(
-            (m: { id: string }) => m.id === variant.model_id
-          )
-        )
-      })).filter((model) => model.quants.length > 0)
+      filtered = filtered
+        ?.map((model) => ({
+          ...model,
+          quants: model.quants.filter((variant) =>
+            llamaProvider?.models.some(
+              (m: { id: string }) => m.id === variant.model_id
+            )
+          ),
+        }))
+        .filter((model) => model.quants.length > 0)
     }
     // Add HuggingFace repo at the beginning if available
     if (huggingFaceRepo) {
@@ -428,43 +430,44 @@
   const isLastStep = currentStepIndex === steps.length - 1
 
   const renderFilter = () => {
-    return (
-      <>
-        <DropdownMenu>
-          <DropdownMenuTrigger>
-            <span className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium">
-              {
-                sortOptions.find((option) => option.value === sortSelected)
-                  ?.name
-              }
+    if (searchValue.length === 0)
+      return (
+        <>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <span className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium">
+                {
+                  sortOptions.find((option) => option.value === sortSelected)
+                    ?.name
+                }
+              </span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="bottom" align="end">
+              {sortOptions.map((option) => (
+                <DropdownMenuItem
+                  className={cn(
+                    'cursor-pointer my-0.5',
+                    sortSelected === option.value && 'bg-main-view-fg/5'
+                  )}
+                  key={option.value}
+                  onClick={() => setSortSelected(option.value)}
+                >
+                  {option.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={showOnlyDownloaded}
+              onCheckedChange={setShowOnlyDownloaded}
+            />
+            <span className="text-xs text-main-view-fg/70 font-medium whitespace-nowrap">
+              {t('hub:downloaded')}
             </span>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side="bottom" align="end">
-            {sortOptions.map((option) => (
-              <DropdownMenuItem
-                className={cn(
-                  'cursor-pointer my-0.5',
-                  sortSelected === option.value && 'bg-main-view-fg/5'
-                )}
-                key={option.value}
-                onClick={() => setSortSelected(option.value)}
-              >
-                {option.name}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <div className="flex items-center gap-2">
-          <Switch
-            checked={showOnlyDownloaded}
-            onCheckedChange={setShowOnlyDownloaded}
-          />
-          <span className="text-xs text-main-view-fg/70 font-medium whitespace-nowrap">
-            {t('hub:downloaded')}
-          </span>
-        </div>
-      </>
-    )
+          </div>
+        </>
+      )
   }
 
   return (