feat: add packages in route query

Author: MatteoGabriele

app/components/Package/ActionBar.vue

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

app/components/Package/Card.vue

@@ -14,8 +14,6 @@ const props = defineProps<{
   filters?: StructuredFilters
   /** Search query for highlighting exact matches */
   searchQuery?: string
-  /** Shows checkbox to all cards and the click will work as selection */
-  forceSelection?: boolean
 }>()
 
 const selected = defineModel<boolean>('selected', {
@@ -51,20 +49,10 @@ const numberFormatter = useNumberFormatter()
         :is="headingLevel ?? 'h3'"
         class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
       >
-        <button
-          v-if="forceSelection"
-          @click="selected = !selected"
-          class="after:content-[''] after:absolute after:inset-0 cursor-pointer"
-          :data-result-index="index"
-          dir="ltr"
-        >
-          {{ result.package.name }}
-        </button>
         <NuxtLink
-          v-else
           :to="packageRoute(result.package.name)"
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
-          class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
+          class="decoration-none after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
           dir="ltr"
           >{{ result.package.name }}</NuxtLink
@@ -81,7 +69,6 @@ const numberFormatter = useNumberFormatter()
           <input
             data-package-card-checkbox
             class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
-            :class="{ 'opacity-100!': forceSelection }"
             type="checkbox"
             :checked="!!selected"
             v-model="selected"

app/components/Package/List.vue

@@ -148,7 +148,7 @@ defineExpose({
   scrollToIndex,
 })
 
-const { selectedPackages, isPackageSelected, togglePackageSelection } = usePackageSelection()
+const { isPackageSelected, togglePackageSelection } = usePackageSelection()
 </script>
 
 <template>
@@ -189,9 +189,8 @@ const { selectedPackages, isPackageSelected, togglePackageSelection } = usePacka
                 class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
                 :filters="filters"
                 :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-                :selected="isPackageSelected(item)"
-                :force-selection="selectedPackages.length > 0"
-                @update:selected="togglePackageSelection(item)"
+                :selected="isPackageSelected(item.package.name)"
+                @update:selected="togglePackageSelection(item.package.name)"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>

app/components/Package/ListToolbar.vue

@@ -235,13 +235,13 @@ const { selectedPackages, clearSelectedPackages } = usePackageSelection()
           class="flex items-center order-3 border-is border-fg-subtle/20 ps-3"
           v-if="selectedPackages.length"
         >
-          <LinkBase
-            to="/package-selection"
-            variant="button-secondary"
+          <ButtonBase
+            variant="secondary"
+            @click="emit('toggleSelection')"
             classicon="i-lucide:package-check"
           >
             View selected ({{ selectedPackages.length }})
-          </LinkBase>
+          </ButtonBase>
           <button @click="clearSelectedPackages" class="flex items-center ms-2">
             <span class="i-lucide:x text-sm" aria-label="Close action bar" />
           </button>

app/components/Package/SelectionView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  viewMode?: ViewMode
+}>()
+
+const { selectedPackages } = usePackageSelection()
+const packages = ref<NpmSearchResult[]>([])
+</script>
+
+<template>
+  <section>
+    <p class="text-fg-muted text-sm mt-4 font-mono">
+      {{
+        $t('search.found_packages', { count: $n(selectedPackages.length) }, selectedPackages.length)
+      }}
+    </p>
+
+    {{ selectedPackages }}
+
+    <div class="mt-6">
+      <PackageList
+        v-if="packages.length > 0"
+        :view-mode="viewMode"
+        :results="packages"
+        search-context
+        heading-level="h2"
+        show-publisher
+      />
+    </div>
+  </section>
+</template>

app/composables/usePackageSelection.ts

@@ -1,23 +1,36 @@
 export function usePackageSelection() {
-  const selectedPackages = useState<NpmSearchResult[]>('selected_packages', () => [])
+  const selectedPackagesParam = useRouteQuery<string>('selection', '', {
+    mode: 'replace',
+  })
 
-  function findPackageIndex(pkg: NpmSearchResult): number {
-    return selectedPackages.value.findIndex(
-      selectedPackage => selectedPackage.package.name === pkg.package.name,
-    )
+  const selectedPackages = computed<string[]>({
+    get() {
+      if (!selectedPackagesParam) {
+        return []
+      }
+
+      return selectedPackagesParam.value.split(',').map(p => p.trim())
+    },
+    set(value) {
+      selectedPackagesParam.value = value.length > 0 ? value.join(',') : ''
+    },
+  })
+
+  function findPackageIndex(name: string): number {
+    return selectedPackages.value.findIndex(selectedPackage => selectedPackage === name)
   }
 
-  function isPackageSelected(pkg: NpmSearchResult): boolean {
-    return findPackageIndex(pkg) !== -1
+  function isPackageSelected(name: string): boolean {
+    return findPackageIndex(name) !== -1
   }
 
-  function togglePackageSelection(pkg: NpmSearchResult) {
-    const itemIndex = findPackageIndex(pkg)
+  function togglePackageSelection(name: string) {
+    const itemIndex = findPackageIndex(name)
 
     if (itemIndex !== -1) {
-      selectedPackages.value.splice(itemIndex, 1)
+      selectedPackages.value = selectedPackages.value.filter((_, i) => i !== itemIndex)
     } else {
-      selectedPackages.value.push(pkg)
+      selectedPackages.value = [...selectedPackages.value, name]
     }
   }
 
@@ -27,6 +40,7 @@ export function usePackageSelection() {
 
   return {
     selectedPackages,
+    selectedPackagesParam,
     clearSelectedPackages,
     isPackageSelected,
     togglePackageSelection,

app/pages/search.vue

@@ -10,6 +10,15 @@ import { normalizeSearchParam } from '#shared/utils/url'
 const route = useRoute()
 const router = useRouter()
 
+const { selectedPackages } = usePackageSelection()
+const selectionView = useRouteQuery<string>('selection-view', '', { mode: 'push' })
+
+function toggleSelection() {
+  selectionView.value = selectionView.value === 'true' ? '' : 'true'
+}
+
+const isSelectioView = computed<boolean>(() => selectionView.value === 'true')
+
 // Preferences (persisted to localStorage)
 const {
   viewMode,
@@ -533,7 +542,8 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <PackageActionBar />
+  <PackageActionBar :hide="isSelectioView" />
+
   <main class="flex-1 py-8" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
     <div class="container-sm">
       <div class="flex items-center justify-between gap-4 mb-4">
@@ -543,7 +553,12 @@ defineOgImageComponent('Default', {
         <SearchProviderToggle />
       </div>
 
-      <section v-if="query">
+      <PackageSelectionView
+        :view-mode="viewMode"
+        v-if="isSelectioView && selectedPackages.length"
+      />
+
+      <section v-else-if="query">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
 
@@ -606,6 +621,7 @@ defineOgImageComponent('Default', {
               :disabled-sort-keys="disabledSortKeys"
               search-context
               @toggle-column="toggleColumn"
+              @toggle-selection="toggleSelection"
               @reset-columns="resetColumns"
               @clear-filter="handleClearFilter"
               @clear-all-filters="clearAllFilters"