feat: add virtual scroll to links dropdown

Enhances dropdown performance by implementing virtual scrolling with VList from virtua/vue library. This optimization improves rendering efficiency for large link lists by only rendering visible items.

components/dashboard/Filters.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { useUrlSearchParams } from '@vueuse/core'
+import { useUrlSearchParams, watchDebounced } from '@vueuse/core'
 import { safeDestr } from 'destr'
 import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { VList } from 'virtua/vue'
 
 const emit = defineEmits(['change'])
 
@@ -17,9 +18,9 @@ onMounted(() => {
   getLinks()
 })
 
-watch(selectedLinks, (value) => {
+watchDebounced(selectedLinks, (value) => {
   emit('change', 'slug', value.join(','))
-})
+}, { debounce: 500, maxWait: 1000 })
 
 function restoreFilters() {
   const searchParams = useUrlSearchParams('history')
@@ -57,11 +58,13 @@ onBeforeMount(() => {
         <CommandEmpty>No link found.</CommandEmpty>
         <CommandList>
           <CommandGroup>
+            <VList
+              v-slot="{ item: link }"
+              :data="links"
+              :style="{ height: '292px' }"
+            >
               <CommandItem
-              v-for="link in links"
-              :key="link.slug"
                 :value="link.slug"
-              @select="isOpen = false"
               >
                 <Check
                   :class="cn(
@@ -71,6 +74,7 @@ onBeforeMount(() => {
                 />
                 {{ link.slug }}
               </CommandItem>
+            </VList>
           </CommandGroup>
         </CommandList>
       </Command>