fix: hub ui no result search found (#4739)

web/screens/Hub/ModelList/index.tsx

@@ -5,11 +5,20 @@ import ModelItem from '@/screens/Hub/ModelList/ModelItem'
 type Props = {
   models: ModelSource[]
   onSelectedModel: (model: ModelSource) => void
+  filterOption?: string
 }
 
-const ModelList = ({ models, onSelectedModel }: Props) => {
+const ModelList = ({ models, onSelectedModel, filterOption }: Props) => {
   return (
     <div className="w-full">
+      {models.length === 0 && filterOption === 'on-device' ? (
+        <div className="my-4 p-2 text-center">
+          <span className="text-[hsla(var(--text-tertiary))]">
+            No results found
+          </span>
+        </div>
+      ) : (
+        <>
           {models.map((model) => (
             <ModelItem
               key={model.id}
@@ -17,6 +26,8 @@ const ModelList = ({ models, onSelectedModel }: Props) => {
               onSelectedModel={() => onSelectedModel(model)}
             />
           ))}
+        </>
+      )}
     </div>
   )
 }

web/screens/Hub/index.tsx

@@ -404,9 +404,17 @@ const HubScreen = () => {
                       <div
                         className={twMerge(
                           'invisible absolute mt-2 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg',
-                          searchedModels.length > 0 && 'visible'
+                          searchValue.length > 0 && 'visible'
                         )}
                       >
+                        {searchedModels.length === 0 ? (
+                          <div className="p-2 text-center">
+                            <span className="text-[hsla(var(--text-tertiary))]">
+                              No results found
+                            </span>
+                          </div>
+                        ) : (
+                          <>
                             {searchedModels.map((model) => (
                               <div
                                 key={model.id}
@@ -432,6 +440,8 @@ const HubScreen = () => {
                                 </span>
                               </div>
                             ))}
+                          </>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -523,6 +533,7 @@ const HubScreen = () => {
                       <ModelList
                         models={sortedModels}
                         onSelectedModel={(model) => setSelectedModel(model)}
+                        filterOption={filterOption}
                       />
                     )}
                     {(filterOption === 'cloud' || filterOption === 'all') && (