From 95cc1a6af68212af767ef3eaeef30b56c7b56d3a Mon Sep 17 00:00:00 2001
From: Ramazan Sancar <ramazansancar4545@gmail.com>
Date: Mon, 10 Feb 2025 21:04:08 +0000
Subject: [PATCH 1/5] [Feature] Filtering of available modules in the "Install
 New Module" list. closes #780

---
 .../client/components/ModuleInstallList.vue   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index d01f6d3006..8679b30b11 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -4,17 +4,19 @@ import Fuse from 'fuse.js'
 import { computed, ref } from 'vue'
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
-import { useModulesList } from '~/composables/state-modules'
+import { useInstalledModules, useModulesList } from '~/composables/state-modules'
 
 type SortingFunction<T> = (a: T, b: T) => number
 
 const emit = defineEmits(['close'])
 
 const collection = useModulesList()
+const installedModules = useInstalledModules()
 
 const sortingOptions = ['downloads', 'stars', 'updated', 'created'] as const
 const ascendingOrder = ref(false)
 const selectedSortingOption = ref<typeof sortingOptions[number]>(sortingOptions[0])
+const installedFilter = ref(false)
 
 const sortingFactors: Record<typeof sortingOptions[number], SortingFunction<ModuleStaticInfo>> = {
   downloads: (a, b) => a.stats.downloads - b.stats.downloads,
@@ -45,9 +47,13 @@ const fuse = computed(() => new Fuse(collection.value || [], {
 }))
 
 const items = computed(() => {
+  let filteredItems = sortedItems.value
+  if (installedFilter.value) {
+    filteredItems = (filteredItems || []).filter(item => !installedModules.value.some(installed => installed.name === item.name))
+  }
   if (!search.value)
-    return sortedItems.value
-  return fuse.value.search(search.value).map(r => r.item)
+    return filteredItems
+  return fuse.value.search(search.value).map(r => r.item).filter(item => filteredItems?.includes(item))
 })
 </script>
 
@@ -59,7 +65,7 @@ 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>
+    <NNavbar v-model:search="search" no-padding px-6 pb-3 pt-2>
       <template #actions>
         <NDropdown direction="end" n="sm primary">
           <template #trigger="{ click }">
@@ -94,8 +100,11 @@ const items = computed(() => {
               </span>
             </NButton>
           </div>
-        </NDropdown>
+        </NDropdown> {{ items?.length }}/{{ collection?.length }}
       </template>
+      <NCheckbox v-model="installedFilter" n="primary md">
+        <span op75>Filter installed</span>
+      </NCheckbox>
     </NNavbar>
 
     <div flex-auto of-auto flex="~ col gap-2" pl6 pr4>

From bf72558e4fe3085ddcd27decadc1cf98efa855f4 Mon Sep 17 00:00:00 2001
From: Ramazan Sancar <ramazansancar4545@gmail.com>
Date: Tue, 11 Feb 2025 11:03:29 +0300
Subject: [PATCH 2/5] [Improvement] Improvement in search & filter information

---
 packages/devtools/client/components/ModuleInstallList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 8679b30b11..285bc24beb 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -100,11 +100,15 @@ const items = computed(() => {
               </span>
             </NButton>
           </div>
-        </NDropdown> {{ items?.length }}/{{ collection?.length }}
+        </NDropdown>
       </template>
       <NCheckbox v-model="installedFilter" n="primary md">
         <span op75>Filter installed</span>
       </NCheckbox>
+      <div flex="~ gap1" text-sm op50>
+        <span v-if="search || installedFilter">{{ items.length }} matched · </span>
+        <span>{{ collection?.length }} modules in total</span>
+      </div>
     </NNavbar>
 
     <div flex-auto of-auto flex="~ col gap-2" pl6 pr4>

From 4ca38c4564c0edf20da60c5954f48a772e8db37f Mon Sep 17 00:00:00 2001
From: Ramazan Sancar <ramazansancar4545@gmail.com>
Date: Tue, 11 Feb 2025 11:07:46 +0300
Subject: [PATCH 3/5] [FIX] CI error fixed.

---
 packages/devtools/client/components/ModuleInstallList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 285bc24beb..d9de40fb75 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -106,7 +106,7 @@ const items = computed(() => {
         <span op75>Filter installed</span>
       </NCheckbox>
       <div flex="~ gap1" text-sm op50>
-        <span v-if="search || installedFilter">{{ items.length }} matched · </span>
+        <span v-if="search || installedFilter">{{ items?.length }} matched · </span>
         <span>{{ collection?.length }} modules in total</span>
       </div>
     </NNavbar>

From ee2a6e4b80c9a40843ad94cac4d5c992a03f456f Mon Sep 17 00:00:00 2001
From: Ramazan Sancar <ramazansancar4545@gmail.com>
Date: Wed, 12 Feb 2025 18:14:52 +0000
Subject: [PATCH 4/5] [Improvement] Checkbox text for hide installed modules
 improvement.

---
 packages/devtools/client/components/ModuleInstallList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index d9de40fb75..38f8dcf2a7 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -103,7 +103,7 @@ const items = computed(() => {
         </NDropdown>
       </template>
       <NCheckbox v-model="installedFilter" n="primary md">
-        <span op75>Filter installed</span>
+        <span op75>Hide installed modules</span>
       </NCheckbox>
       <div flex="~ gap1" text-sm op50>
         <span v-if="search || installedFilter">{{ items?.length }} matched · </span>

From 72cca6ca728898a84519a7e9b4179671d3668432 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Sun, 16 Feb 2025 15:22:51 +0800
Subject: [PATCH 5/5] chore: update

---
 .../client/components/ModuleInstallList.vue    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 38f8dcf2a7..35fb51cfd8 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -16,7 +16,7 @@ const installedModules = useInstalledModules()
 const sortingOptions = ['downloads', 'stars', 'updated', 'created'] as const
 const ascendingOrder = ref(false)
 const selectedSortingOption = ref<typeof sortingOptions[number]>(sortingOptions[0])
-const installedFilter = ref(false)
+const excludeInstalled = ref(true)
 
 const sortingFactors: Record<typeof sortingOptions[number], SortingFunction<ModuleStaticInfo>> = {
   downloads: (a, b) => a.stats.downloads - b.stats.downloads,
@@ -48,7 +48,7 @@ const fuse = computed(() => new Fuse(collection.value || [], {
 
 const items = computed(() => {
   let filteredItems = sortedItems.value
-  if (installedFilter.value) {
+  if (excludeInstalled.value) {
     filteredItems = (filteredItems || []).filter(item => !installedModules.value.some(installed => installed.name === item.name))
   }
   if (!search.value)
@@ -102,12 +102,14 @@ const items = computed(() => {
           </div>
         </NDropdown>
       </template>
-      <NCheckbox v-model="installedFilter" n="primary md">
-        <span op75>Hide installed modules</span>
-      </NCheckbox>
-      <div flex="~ gap1" text-sm op50>
-        <span v-if="search || installedFilter">{{ items?.length }} matched · </span>
-        <span>{{ collection?.length }} modules in total</span>
+      <div flex="~ items-center gap-2">
+        <NCheckbox v-model="excludeInstalled" n="primary md">
+          <span op75>Exclude installed modules</span>
+        </NCheckbox>
+        <div flex="~ gap1" text-sm op50>
+          <span v-if="search || excludeInstalled">{{ items?.length }} matched · </span>
+          <span>{{ collection?.length }} modules in total</span>
+        </div>
       </div>
     </NNavbar>