Rearrange model position in Hub page (#2622)

* Rearrange model position in Hub page

* fix linting

* Update web/screens/ExploreModels/ExploreModelList/index.tsx

Co-authored-by: Louis <louis@jan.ai>

---------

Co-authored-by: Jack Tri Le <Jack>
Co-authored-by: Louis <louis@jan.ai>

.gitignore

@@ -1,5 +1,6 @@
 .vscode
 .env
+.idea
 
 # Jan inference
 error.log

web/screens/ExploreModels/ExploreModelList/index.tsx

@@ -1,50 +1,46 @@
+import { useMemo } from 'react'
+
 import { Model } from '@janhq/core'
 
+import { useAtomValue } from 'jotai'
+
 import ExploreModelItem from '@/screens/ExploreModels/ExploreModelItem'
 
+import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+
 type Props = {
   models: Model[]
 }
 
 const ExploreModelList: React.FC<Props> = ({ models }) => {
-  const takenModelIds: string[] = []
+  const downloadedModels = useAtomValue(downloadedModelsAtom)
-  const featuredModels = models
+  const sortedModels: Model[] = useMemo(() => {
-    .filter((m) => {
+    const featuredModels: Model[] = []
+    const remoteModels: Model[] = []
+    const localModels: Model[] = []
+    const remainingModels: Model[] = []
+    models.forEach((m) => {
       if (m.metadata?.tags?.includes('Featured')) {
-        takenModelIds.push(m.id)
+        featuredModels.push(m)
-        return m
+      } else if (m.format === 'api') {
+        remoteModels.push(m)
+      } else if (downloadedModels.map((m) => m.id).includes(m.id)) {
+        localModels.push(m)
+      } else {
+        remainingModels.push(m)
       }
     })
-    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+    featuredModels.sort((m1, m2) => m1.name.localeCompare(m2.name))
-
+    remoteModels.sort((m1, m2) => m1.name.localeCompare(m2.name))
-  const recommendedModels = models
+    localModels.sort((m1, m2) => m1.name.localeCompare(m2.name))
-    .filter((m) => {
+    remainingModels.sort((m1, m2) => m1.name.localeCompare(m2.name))
-      if (m.metadata?.tags?.includes('Recommended')) {
+    return [
-        takenModelIds.push(m.id)
+      ...featuredModels,
-        return m
+      ...remoteModels,
-      }
+      ...localModels,
-    })
+      ...remainingModels,
-    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+    ]
-
+  }, [models, downloadedModels])
-  const openAiModels = models
-    .filter((m) => {
-      if (m.engine === 'openai') {
-        takenModelIds.push(m.id)
-        return m
-      }
-    })
-    .sort((m1: Model, m2: Model) => m1.name.localeCompare(m2.name))
-
-  const remainingModels = models
-    .filter((m) => !takenModelIds.includes(m.id))
-    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
-
-  const sortedModels: Model[] = [
-    ...featuredModels,
-    ...recommendedModels,
-    ...openAiModels,
-    ...remainingModels,
-  ]
 
   return (
     <div className="relative h-full w-full flex-shrink-0">