fix: sort items in fuse (#670)

packages/devtools/client/components/ModuleInstallList.vue

@@ -21,17 +21,25 @@ const sortingFactors: Record<typeof sortingOptions[number], SortingFunction<Modu
   updated: (a, b) => a.stats.publishedAt - b.stats.publishedAt,
 }
 
-const sortedItems = computed(() => collection.value?.slice()
-  .sort((a, b) => sortingFactors[selectedSortingOption.value](a, b) * (ascendingOrder.value ? 1 : -1)))
+const sortedItems = computed(() => collection.value
+  ?.toSorted((a, b) => sortingFactors[selectedSortingOption.value](a, b) * (ascendingOrder.value ? 1 : -1)))
 
 const search = ref('')
-const fuse = computed(() => new Fuse(sortedItems.value || [], {
+const fuse = computed(() => new Fuse(collection.value || [], {
   keys: [
     'name',
     'description',
     'npm',
     'category',
   ],
+  sortFn: (a, b) => {
+    const itemA = collection.value?.[a.idx]
+    const itemB = collection.value?.[b.idx]
+    if (itemA && itemB)
+      return sortingFactors[selectedSortingOption.value](itemA, itemB) * (ascendingOrder.value ? 1 : -1)
+    return (a.score - b.score)
+  },
+  threshold: 0.2,
 }))
 
 const items = computed(() => {
@@ -49,7 +57,6 @@ const items = computed(() => {
       icon="i-carbon-intent-request-create"
       text="Install Module"
     />
-
     <NNavbar v-model:search="search" no-padding px-6 pb-5 pt-2>
       <template #actions>
         <NDropdown direction="end" n="sm primary">