chore: clean composable

Author: MatteoGabriele

app/components/Package/ActionBar.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-defineProps<{
-  hide?: boolean
-}>()
-
 const { selectedPackages, selectedPackagesParam, clearSelectedPackages } = usePackageSelection()
 
 const shortcutKey = 'b'
@@ -23,7 +19,7 @@ onKeyStroke(
 <template>
   <Transition name="action-bar-slide" appear>
     <div
-      v-if="selectedPackages.length && !hide"
+      v-if="selectedPackages.length"
       class="fixed bottom-12 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none"
     >
       <div
@@ -53,7 +49,6 @@ onKeyStroke(
             :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
             variant="button-secondary"
             classicon="i-lucide:git-compare"
-            :disabled="selectedPackages.length > 4"
           >
             Compare
           </LinkBase>

app/composables/usePackageSelection.ts

@@ -9,26 +9,24 @@ export function usePackageSelection() {
         return []
       }
 
-      return selectedPackagesParam.value.split(',').map(p => p.trim())
+      return selectedPackagesParam.value
+        .split(',')
+        .map(p => p.trim())
+        .filter(p => p.length > 0)
+        .slice(0, 4)
     },
     set(value) {
       selectedPackagesParam.value = value.length > 0 ? value.join(',') : ''
     },
   })
 
-  function findPackageIndex(name: string): number {
-    return selectedPackages.value.findIndex(selectedPackage => selectedPackage === name)
-  }
-
   function isPackageSelected(name: string): boolean {
-    return findPackageIndex(name) !== -1
+    return selectedPackages.value.includes(name)
   }
 
   function togglePackageSelection(name: string) {
-    const itemIndex = findPackageIndex(name)
-
-    if (itemIndex !== -1) {
-      selectedPackages.value = selectedPackages.value.filter((_, i) => i !== itemIndex)
+    if (isPackageSelected(name)) {
+      selectedPackages.value = selectedPackages.value.filter(selected => selected !== name)
     } else {
       selectedPackages.value = [...selectedPackages.value, name]
     }

app/pages/search.vue

@@ -542,7 +542,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <PackageActionBar :hide="isSelectioView" />
+  <PackageActionBar />
 
   <main class="flex-1 py-8" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
     <div class="container-sm">