From a880463c2efacececf62d0f3313fe4917eb8913b Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 26 Feb 2026 16:09:24 +0100
Subject: [PATCH 01/11] feat(ui): add action bar

---
 app/components/BaseCard.vue                   |  2 +
 app/components/Package/ActionBar.vue          | 82 +++++++++++++++++++
 app/components/Package/Card.vue               | 66 ++++++++-------
 app/components/Package/List.vue               |  9 +-
 app/components/Package/ListToolbar.vue        | 19 +++++
 app/composables/usePackageSelection.ts        | 34 ++++++++
 app/pages/package-selection.vue               | 14 ++++
 i18n/locales/en.json                          |  4 +
 i18n/schema.json                              | 12 +++
 lunaria/files/en-GB.json                      |  4 +
 lunaria/files/en-US.json                      |  4 +
 .../middleware/canonical-redirects.global.ts  |  1 +
 12 files changed, 222 insertions(+), 29 deletions(-)
 create mode 100644 app/components/Package/ActionBar.vue
 create mode 100644 app/composables/usePackageSelection.ts
 create mode 100644 app/pages/package-selection.vue

diff --git a/app/components/BaseCard.vue b/app/components/BaseCard.vue
index ebe3e4512..2eb7f348b 100644
--- a/app/components/BaseCard.vue
+++ b/app/components/BaseCard.vue
@@ -2,6 +2,7 @@
 defineProps<{
   /** Whether this is an exact match for the query */
   isExactMatch?: boolean
+  selected?: boolean
 }>()
 </script>
 
@@ -10,6 +11,7 @@ defineProps<{
     class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
       'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
+      'bg-fg-subtle/15!': selected,
     }"
   >
     <!-- Glow effect for exact matches -->
diff --git a/app/components/Package/ActionBar.vue b/app/components/Package/ActionBar.vue
new file mode 100644
index 000000000..fc6002829
--- /dev/null
+++ b/app/components/Package/ActionBar.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const { selectedPackages, clearSelectedPackages } = usePackageSelection()
+const comparePackagesQuery = computed<string>(() =>
+  selectedPackages.value.map(pkg => pkg.package.name).join(','),
+)
+
+const shortcutKey = 'b'
+const actionBar = useTemplateRef('actionBarRef')
+onKeyStroke(
+  e => {
+    const target = e.target as HTMLElement
+    const isCheckbox = target.hasAttribute('data-package-card-checkbox')
+    return isKeyWithoutModifiers(e, shortcutKey) && (!isEditableElement(target) || isCheckbox)
+  },
+  e => {
+    e.preventDefault()
+    actionBar.value?.focus()
+  },
+)
+</script>
+
+<template>
+  <Transition name="action-bar-slide" appear>
+    <div
+      v-if="selectedPackages.length"
+      class="fixed bottom-12 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none"
+    >
+      <div
+        ref="actionBarRef"
+        tabindex="-1"
+        aria-keyshortcuts="b"
+        class="pointer-events-auto bg-bg shadow-2xl border border-fg-muted/20 p-2.5 min-w-[280px] rounded-xl flex gap-2 items-center justify-between animate-in"
+      >
+        <div aria-live="polite" aria-atomic="true" class="sr-only">
+          {{ $t('action_bar.selection', selectedPackages.length) }}.
+          {{ $t('action_bar.shortcut', { key: shortcutKey }) }}.
+        </div>
+
+        <div class="flex items-center gap-1 ms-2">
+          <span class="text-fg text-sm">
+            {{ $t('action_bar.selection', selectedPackages.length) }}
+          </span>
+          <button @click="clearSelectedPackages" class="flex items-center ms-2 hover:text-fg-muted">
+            <span class="i-lucide:x text-sm" aria-label="Close action bar" />
+          </button>
+        </div>
+
+        <span class="w-px h-8 bg-fg-subtle/40" />
+
+        <div>
+          <LinkBase
+            :to="{ name: 'compare', query: { packages: comparePackagesQuery } }"
+            variant="button-secondary"
+            classicon="i-lucide:git-compare"
+          >
+            Compare
+          </LinkBase>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/* Action bar slide/fade animation */
+.action-bar-slide-enter-active,
+.action-bar-slide-leave-active {
+  transition:
+    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.action-bar-slide-enter-from,
+.action-bar-slide-leave-to {
+  opacity: 0;
+  transform: translateY(40px) scale(0.98);
+}
+.action-bar-slide-enter-to,
+.action-bar-slide-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+</style>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 12d25268b..a47830fdd 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -14,8 +14,14 @@ 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', {
+  default: false,
+})
+
 const emit = defineEmits<{
   clickKeyword: [keyword: string]
 }>()
@@ -39,13 +45,23 @@ const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
-  <BaseCard :isExactMatch="isExactMatch">
-    <div class="mb-2 flex items-baseline justify-start gap-2">
+  <BaseCard :selected :isExactMatch="isExactMatch">
+    <header class="mb-4 flex items-baseline justify-between gap-2">
       <component
         :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"
@@ -59,28 +75,23 @@ const numberFormatter = useNumberFormatter()
           >{{ $t('search.exact_match') }}</span
         >
       </component>
-      <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-      <!-- Mobile: version next to package name -->
-      <div class="sm:hidden text-fg-subtle flex items-center gap-1.5 shrink-0">
-        <span
-          v-if="result.package.version"
-          class="font-mono text-xs truncate max-w-20"
-          :title="result.package.version"
-        >
-          v{{ result.package.version }}
-        </span>
-        <ProvenanceBadge
-          v-if="result.package.publisher?.trustedPublisher"
-          :provider="result.package.publisher.trustedPublisher.id"
-          :package-name="result.package.name"
-          :version="result.package.version"
-          :linked="false"
-          compact
-        />
+
+      <div class="flex items-center gap-4">
+        <div class="relative z-1">
+          <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"
+          />
+        </div>
       </div>
-    </div>
-    <div class="flex justify-start items-start gap-4 sm:gap-8">
-      <div class="min-w-0">
+    </header>
+
+    <div class="flex flex-col sm:flex-row sm:justify-start sm:items-start gap-6 sm:gap-8">
+      <div class="min-w-0 w-full">
         <p v-if="pkgDescription" class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3">
           <span v-html="pkgDescription" />
         </p>
@@ -124,10 +135,9 @@ const numberFormatter = useNumberFormatter()
           </div>
         </dl>
       </div>
-      <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-      <!-- Desktop: version and downloads on right side -->
-      <div class="hidden sm:flex flex-col gap-2 shrink-0">
-        <div class="text-fg-subtle flex items-start gap-2 justify-end">
+
+      <div class="flex flex-col gap-2 shrink-0">
+        <div class="text-fg-subtle flex items-start gap-2 sm:justify-end">
           <span
             v-if="result.package.version"
             class="font-mono text-xs truncate max-w-32"
@@ -150,7 +160,7 @@ const numberFormatter = useNumberFormatter()
         </div>
         <div
           v-if="result.downloads?.weekly"
-          class="text-fg-subtle gap-2 flex items-center justify-end"
+          class="text-fg-subtle gap-2 flex items-center sm:justify-end"
         >
           <span class="i-lucide:chart-line w-3.5 h-3.5" aria-hidden="true" />
           <span class="font-mono text-xs">
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 92fa300c0..2767d738c 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -147,10 +147,14 @@ function scrollToIndex(index: number, smooth = true) {
 defineExpose({
   scrollToIndex,
 })
+
+const { selectedPackages, isPackageSelected, togglePackageSelection } = usePackageSelection()
 </script>
 
 <template>
   <div>
+    <PackageActionBar />
+
     <!-- Table View -->
     <template v-if="viewMode === 'table'">
       <PackageTable
@@ -179,7 +183,7 @@ defineExpose({
           <template #default="{ item, index }">
             <div class="pb-4">
               <PackageCard
-                :result="item as NpmSearchResult"
+                :result="item"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
                 :index="index"
@@ -187,6 +191,9 @@ defineExpose({
                 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)"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index 8aad0a8e3..7414d2e00 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -43,6 +43,7 @@ const pageSize = defineModel<PageSize>('pageSize', { required: true })
 
 const emit = defineEmits<{
   'toggleColumn': [columnId: ColumnId]
+  'toggleSelection': []
   'resetColumns': []
   'clearFilter': [chip: FilterChip]
   'clearAllFilters': []
@@ -110,6 +111,8 @@ const sortKeyLabelKeys = computed<Record<SortKey, string>>(() => ({
 function getSortKeyLabelKey(key: SortKey): string {
   return sortKeyLabelKeys.value[key]
 }
+
+const { selectedPackages, clearSelectedPackages } = usePackageSelection()
 </script>
 
 <template>
@@ -227,6 +230,22 @@ function getSortKeyLabelKey(key: SortKey): string {
             @reset="emit('resetColumns')"
           />
         </div>
+
+        <div
+          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"
+            classicon="i-lucide:package-check"
+          >
+            View selected ({{ selectedPackages.length }})
+          </LinkBase>
+          <button @click="clearSelectedPackages" class="flex items-center ms-2">
+            <span class="i-lucide:x text-sm" aria-label="Close action bar" />
+          </button>
+        </div>
       </div>
     </div>
 
diff --git a/app/composables/usePackageSelection.ts b/app/composables/usePackageSelection.ts
new file mode 100644
index 000000000..18921630d
--- /dev/null
+++ b/app/composables/usePackageSelection.ts
@@ -0,0 +1,34 @@
+export function usePackageSelection() {
+  const selectedPackages = useState<NpmSearchResult[]>('selected_packages', () => [])
+
+  function findPackageIndex(pkg: NpmSearchResult): number {
+    return selectedPackages.value.findIndex(
+      selectedPackage => selectedPackage.package.name === pkg.package.name,
+    )
+  }
+
+  function isPackageSelected(pkg: NpmSearchResult): boolean {
+    return findPackageIndex(pkg) !== -1
+  }
+
+  function togglePackageSelection(pkg: NpmSearchResult) {
+    const itemIndex = findPackageIndex(pkg)
+
+    if (itemIndex !== -1) {
+      selectedPackages.value.splice(itemIndex, 1)
+    } else {
+      selectedPackages.value.push(pkg)
+    }
+  }
+
+  function clearSelectedPackages() {
+    selectedPackages.value = []
+  }
+
+  return {
+    selectedPackages,
+    clearSelectedPackages,
+    isPackageSelected,
+    togglePackageSelection,
+  }
+}
diff --git a/app/pages/package-selection.vue b/app/pages/package-selection.vue
new file mode 100644
index 000000000..c00a3e0c7
--- /dev/null
+++ b/app/pages/package-selection.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- <div class="container-sm w-full py-6">Package selection page</div> -->
+
+  <main class="flex-1 py-8">
+    <div class="container-sm">
+      <div class="flex items-center justify-between gap-4 mb-4">
+        <h1 class="font-mono text-2xl sm:text-3xl font-medium">selected packages</h1>
+        <SearchProviderToggle />
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 3e4354e48..cf0d5a412 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1195,5 +1195,9 @@
         "all": "all"
       }
     }
+  },
+  "action_bar": {
+    "selection": "0 selected | 1 selected | {count} selected",
+    "shortcut": "Press \"{key}\" to focus actions"
   }
 }
diff --git a/i18n/schema.json b/i18n/schema.json
index aa7681bc3..930dd7738 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -3592,6 +3592,18 @@
       },
       "additionalProperties": false
     },
+    "action_bar": {
+      "type": "object",
+      "properties": {
+        "selection": {
+          "type": "string"
+        },
+        "shortcut": {
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
     "$schema": {
       "type": "string"
     }
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 4ca9ba59d..43b74aab4 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -1160,5 +1160,9 @@
       "p1": "If you encounter an accessibility barrier on {app}, please let us know by opening an issue on our {link}. We take these reports seriously and will do our best to address them.",
       "link": "GitHub repository"
     }
+  },
+  "action_bar": {
+    "selection": "0 selected | 1 selected | {count} selected",
+    "shortcut": "Press \"{key}\" to focus actions"
   }
 }
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 69a66c3f7..2d9132d4d 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -1160,5 +1160,9 @@
       "p1": "If you encounter an accessibility barrier on {app}, please let us know by opening an issue on our {link}. We take these reports seriously and will do our best to address them.",
       "link": "GitHub repository"
     }
+  },
+  "action_bar": {
+    "selection": "0 selected | 1 selected | {count} selected",
+    "shortcut": "Press \"{key}\" to focus actions"
   }
 }
diff --git a/server/middleware/canonical-redirects.global.ts b/server/middleware/canonical-redirects.global.ts
index b6419f2e9..743c246d6 100644
--- a/server/middleware/canonical-redirects.global.ts
+++ b/server/middleware/canonical-redirects.global.ts
@@ -23,6 +23,7 @@ const pages = [
   '/package',
   '/package-code',
   '/package-docs',
+  '/package-selection',
   '/privacy',
   '/search',
   '/settings',

From 9c8a88cab199be8d00859ae5b974355a78f9d7a6 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 26 Feb 2026 16:40:34 +0100
Subject: [PATCH 02/11] feat: add selection page ui

---
 app/components/Package/List.vue |  2 --
 app/pages/package-selection.vue | 39 +++++++++++++++++++++++++++++----
 app/pages/search.vue            |  1 +
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 2767d738c..1a4535fbb 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -153,8 +153,6 @@ const { selectedPackages, isPackageSelected, togglePackageSelection } = usePacka
 
 <template>
   <div>
-    <PackageActionBar />
-
     <!-- Table View -->
     <template v-if="viewMode === 'table'">
       <PackageTable
diff --git a/app/pages/package-selection.vue b/app/pages/package-selection.vue
index c00a3e0c7..eb4e5841e 100644
--- a/app/pages/package-selection.vue
+++ b/app/pages/package-selection.vue
@@ -1,13 +1,44 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const router = useRouter()
+const canGoBack = useCanGoBack()
 
-<template>
-  <!-- <div class="container-sm w-full py-6">Package selection page</div> -->
+const { selectedPackages } = usePackageSelection()
+</script>
 
+<template>
   <main class="flex-1 py-8">
     <div class="container-sm">
       <div class="flex items-center justify-between gap-4 mb-4">
         <h1 class="font-mono text-2xl sm:text-3xl font-medium">selected packages</h1>
-        <SearchProviderToggle />
+        <button
+          type="button"
+          class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
+          @click="router.back()"
+          v-if="canGoBack"
+        >
+          <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+          <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+        </button>
+      </div>
+
+      <p class="text-fg-muted text-sm mt-4 font-mono">
+        {{
+          $t(
+            'search.found_packages',
+            { count: $n(selectedPackages.length) },
+            selectedPackages.length,
+          )
+        }}
+      </p>
+
+      <div class="mt-6">
+        <PackageList
+          v-if="selectedPackages.length > 0"
+          :results="selectedPackages"
+          search-context
+          heading-level="h2"
+          show-publisher
+        />
       </div>
     </div>
   </main>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 21cd2c3bd..a5a84efd7 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -533,6 +533,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
+  <PackageActionBar />
   <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">

From ed13532d89aa22d09e39990399892e31c25c2844 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Thu, 26 Feb 2026 22:29:22 +0100
Subject: [PATCH 03/11] feat: add packages in route query

---
 app/components/Package/ActionBar.vue     | 14 +++++----
 app/components/Package/Card.vue          | 15 +---------
 app/components/Package/List.vue          |  7 ++---
 app/components/Package/ListToolbar.vue   |  8 +++---
 app/components/Package/SelectionView.vue | 31 ++++++++++++++++++++
 app/composables/usePackageSelection.ts   | 36 ++++++++++++++++--------
 app/pages/search.vue                     | 20 +++++++++++--
 7 files changed, 90 insertions(+), 41 deletions(-)
 create mode 100644 app/components/Package/SelectionView.vue

diff --git a/app/components/Package/ActionBar.vue b/app/components/Package/ActionBar.vue
index fc6002829..312c34baf 100644
--- a/app/components/Package/ActionBar.vue
+++ b/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>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index a47830fdd..22ee88d64 100644
--- a/app/components/Package/Card.vue
+++ b/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"
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 1a4535fbb..8d06a0163 100644
--- a/app/components/Package/List.vue
+++ b/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>
diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index 7414d2e00..42049c0f3 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/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>
diff --git a/app/components/Package/SelectionView.vue b/app/components/Package/SelectionView.vue
new file mode 100644
index 000000000..e455d37e3
--- /dev/null
+++ b/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>
diff --git a/app/composables/usePackageSelection.ts b/app/composables/usePackageSelection.ts
index 18921630d..99bdf84a6 100644
--- a/app/composables/usePackageSelection.ts
+++ b/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,
diff --git a/app/pages/search.vue b/app/pages/search.vue
index a5a84efd7..2f36254d8 100644
--- a/app/pages/search.vue
+++ b/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"

From 812f68526adb116de9efa384ea748dacc14d2d94 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 09:56:53 +0100
Subject: [PATCH 04/11] chore: clean composable

---
 app/components/Package/ActionBar.vue   |  7 +------
 app/composables/usePackageSelection.ts | 18 ++++++++----------
 app/pages/search.vue                   |  2 +-
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/app/components/Package/ActionBar.vue b/app/components/Package/ActionBar.vue
index 312c34baf..d58210729 100644
--- a/app/components/Package/ActionBar.vue
+++ b/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>
diff --git a/app/composables/usePackageSelection.ts b/app/composables/usePackageSelection.ts
index 99bdf84a6..f1f2255c6 100644
--- a/app/composables/usePackageSelection.ts
+++ b/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]
     }
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 2f36254d8..08d63bbb5 100644
--- a/app/pages/search.vue
+++ b/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">

From 287a4a76d375af1ec371ae90d08ea26b3c7963f4 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 14:42:19 +0100
Subject: [PATCH 05/11] feat: add back button and fix keys

---
 app/components/Package/ActionBar.vue     | 24 +++++++--------
 app/components/Package/List.vue          |  5 ++--
 app/components/Package/SelectionView.vue | 30 ++++++++++++-------
 app/composables/usePackageSelection.ts   | 38 ++++++++----------------
 app/pages/search.vue                     | 37 ++++++++++++++++-------
 5 files changed, 72 insertions(+), 62 deletions(-)

diff --git a/app/components/Package/ActionBar.vue b/app/components/Package/ActionBar.vue
index d58210729..c982cc8b0 100644
--- a/app/components/Package/ActionBar.vue
+++ b/app/components/Package/ActionBar.vue
@@ -20,13 +20,13 @@ onKeyStroke(
   <Transition name="action-bar-slide" appear>
     <div
       v-if="selectedPackages.length"
-      class="fixed bottom-12 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none"
+      class="fixed bottom-10 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none"
     >
       <div
         ref="actionBarRef"
         tabindex="-1"
         aria-keyshortcuts="b"
-        class="pointer-events-auto bg-bg shadow-2xl border border-fg-muted/20 p-2.5 min-w-[280px] rounded-xl flex gap-2 items-center justify-between animate-in"
+        class="pointer-events-auto bg-bg shadow-xl shadow-accent/5 border border-fg-muted/20 p-2.5 min-w-[300px] rounded-xl flex gap-2 items-center justify-between animate-in"
       >
         <div aria-live="polite" aria-atomic="true" class="sr-only">
           {{ $t('action_bar.selection', selectedPackages.length) }}.
@@ -38,21 +38,17 @@ onKeyStroke(
             {{ $t('action_bar.selection', selectedPackages.length) }}
           </span>
           <button @click="clearSelectedPackages" class="flex items-center ms-2 hover:text-fg-muted">
-            <span class="i-lucide:x text-sm" aria-label="Close action bar" />
+            <span class="i-lucide:x text-xs relative top-px" aria-label="Close action bar" />
           </button>
         </div>
 
-        <span class="w-px h-8 bg-fg-subtle/40" />
-
-        <div>
-          <LinkBase
-            :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
-            variant="button-secondary"
-            classicon="i-lucide:git-compare"
-          >
-            Compare
-          </LinkBase>
-        </div>
+        <LinkBase
+          :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
+          variant="button-secondary"
+          classicon="i-lucide:git-compare"
+        >
+          Compare
+        </LinkBase>
       </div>
     </div>
   </Transition>
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 8d06a0163..2170b16a4 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -181,6 +181,7 @@ const { isPackageSelected, togglePackageSelection } = usePackageSelection()
           <template #default="{ item, index }">
             <div class="pb-4">
               <PackageCard
+                :key="item.package.name"
                 :result="item"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
@@ -189,8 +190,8 @@ const { isPackageSelected, togglePackageSelection } = usePackageSelection()
                 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.package.name)"
-                @update:selected="togglePackageSelection(item.package.name)"
+                :selected="isPackageSelected(item)"
+                @update:selected="togglePackageSelection(item)"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
diff --git a/app/components/Package/SelectionView.vue b/app/components/Package/SelectionView.vue
index e455d37e3..c0ad93ba6 100644
--- a/app/components/Package/SelectionView.vue
+++ b/app/components/Package/SelectionView.vue
@@ -3,25 +3,35 @@ defineProps<{
   viewMode?: ViewMode
 }>()
 
-const { selectedPackages } = usePackageSelection()
-const packages = ref<NpmSearchResult[]>([])
+const { selectedPackages, clearSelectedPackages, selectedPackagesParam } = usePackageSelection()
 </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>
+    <header class="mb-6 flex items-center justify-end">
+      <div class="flex items-center gap-2">
+        <ButtonBase variant="secondary" @click="clearSelectedPackages" classicon="i-lucide:x"
+          >Clear all</ButtonBase
+        >
+        <LinkBase
+          :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
+          variant="button-primary"
+          classicon="i-lucide:git-compare"
+        >
+          Compare
+        </LinkBase>
+      </div>
+    </header>
 
-    {{ selectedPackages }}
+    <p class="text-fg-muted text-sm font-mono">
+      {{ $t('action_bar.selection', selectedPackages.length) }}
+    </p>
 
     <div class="mt-6">
       <PackageList
-        v-if="packages.length > 0"
+        v-if="selectedPackages.length > 0"
         :view-mode="viewMode"
-        :results="packages"
+        :results="selectedPackages"
         search-context
         heading-level="h2"
         show-publisher
diff --git a/app/composables/usePackageSelection.ts b/app/composables/usePackageSelection.ts
index f1f2255c6..eeef29b08 100644
--- a/app/composables/usePackageSelection.ts
+++ b/app/composables/usePackageSelection.ts
@@ -1,34 +1,20 @@
 export function usePackageSelection() {
-  const selectedPackagesParam = useRouteQuery<string>('selection', '', {
-    mode: 'replace',
-  })
+  const selectedPackages = useState<NpmSearchResult[]>('package_selection', () => [])
+  const selectedPackagesParam = computed<string>(() =>
+    selectedPackages.value.map(p => p.package.name).join(','),
+  )
 
-  const selectedPackages = computed<string[]>({
-    get() {
-      if (!selectedPackagesParam) {
-        return []
-      }
-
-      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 isPackageSelected(name: string): boolean {
-    return selectedPackages.value.includes(name)
+  function isPackageSelected(pkg: NpmSearchResult): boolean {
+    return selectedPackages.value.some(p => p.package.name === pkg.package.name)
   }
 
-  function togglePackageSelection(name: string) {
-    if (isPackageSelected(name)) {
-      selectedPackages.value = selectedPackages.value.filter(selected => selected !== name)
+  function togglePackageSelection(pkg: NpmSearchResult) {
+    if (isPackageSelected(pkg)) {
+      selectedPackages.value = selectedPackages.value.filter(
+        selected => selected.package.name !== pkg.package.name,
+      )
     } else {
-      selectedPackages.value = [...selectedPackages.value, name]
+      selectedPackages.value = [...selectedPackages.value, pkg]
     }
   }
 
diff --git a/app/pages/search.vue b/app/pages/search.vue
index cbdc68197..6ed60ad48 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -10,13 +10,20 @@ import { normalizeSearchParam } from '#shared/utils/url'
 const route = useRoute()
 
 const { selectedPackages } = usePackageSelection()
-const selectionView = useRouteQuery<string>('selection-view', '', { mode: 'push' })
+const isSelectioView = ref<boolean>(false)
 
-function toggleSelection() {
-  selectionView.value = selectionView.value === 'true' ? '' : 'true'
-}
+watch(selectedPackages, packages => {
+  if (packages.length === 0) {
+    isSelectioView.value = false
+  }
+})
 
-const isSelectioView = computed<boolean>(() => selectionView.value === 'true')
+function showSelectionView() {
+  isSelectioView.value = true
+}
+function hideSelectionView() {
+  isSelectioView.value = false
+}
 
 // Preferences (persisted to localStorage)
 const {
@@ -552,7 +559,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <PackageActionBar />
+  <PackageActionBar v-if="!isSelectioView" />
 
   <main class="flex-1 py-8 search-page" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
     <div class="container-sm">
@@ -560,15 +567,25 @@ defineOgImageComponent('Default', {
         <h1 class="font-mono text-2xl sm:text-3xl font-medium">
           {{ $t('search.title') }}
         </h1>
-        <SearchProviderToggle />
+        <button
+          v-if="isSelectioView"
+          type="button"
+          class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+          @click="hideSelectionView"
+        >
+          <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+          <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+        </button>
+        <SearchProviderToggle v-else />
       </div>
 
       <PackageSelectionView
-        :view-mode="viewMode"
+        @back="hideSelectionView"
         v-if="isSelectioView && selectedPackages.length"
+        :view-mode="viewMode"
       />
 
-      <section v-if="query" class="results-layout">
+      <section v-else-if="query" class="results-layout">
         <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
 
         <div
@@ -637,7 +654,7 @@ defineOgImageComponent('Default', {
               :disabled-sort-keys="disabledSortKeys"
               search-context
               @toggle-column="toggleColumn"
-              @toggle-selection="toggleSelection"
+              @toggle-selection="showSelectionView"
               @reset-columns="resetColumns"
               @clear-filter="handleClearFilter"
               @clear-all-filters="clearAllFilters"

From 8743c798312c8468b33b773d550f3695bda392ae Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 15:04:02 +0100
Subject: [PATCH 06/11] refactor: copy

---
 app/components/Package/ListToolbar.vue        |  2 +-
 app/components/Package/SelectionView.vue      |  8 ++--
 app/pages/package-selection.vue               | 45 -------------------
 i18n/locales/en.json                          |  1 +
 i18n/schema.json                              |  3 ++
 lunaria/files/en-GB.json                      |  1 +
 lunaria/files/en-US.json                      |  1 +
 .../middleware/canonical-redirects.global.ts  |  1 -
 8 files changed, 11 insertions(+), 51 deletions(-)
 delete mode 100644 app/pages/package-selection.vue

diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index 9e25e09bf..8b0361d8d 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -224,7 +224,7 @@ const { selectedPackages, clearSelectedPackages } = usePackageSelection()
             @click="emit('toggleSelection')"
             classicon="i-lucide:package-check"
           >
-            View selected ({{ selectedPackages.length }})
+            {{ t('filters.view_selected') }} ({{ selectedPackages.length }})
           </ButtonBase>
           <button @click="clearSelectedPackages" class="flex items-center ms-2">
             <span class="i-lucide:x text-sm" aria-label="Close action bar" />
diff --git a/app/components/Package/SelectionView.vue b/app/components/Package/SelectionView.vue
index c0ad93ba6..6b122f390 100644
--- a/app/components/Package/SelectionView.vue
+++ b/app/components/Package/SelectionView.vue
@@ -10,15 +10,15 @@ const { selectedPackages, clearSelectedPackages, selectedPackagesParam } = usePa
   <section>
     <header class="mb-6 flex items-center justify-end">
       <div class="flex items-center gap-2">
-        <ButtonBase variant="secondary" @click="clearSelectedPackages" classicon="i-lucide:x"
-          >Clear all</ButtonBase
-        >
+        <ButtonBase variant="secondary" @click="clearSelectedPackages" classicon="i-lucide:x">
+          {{ $t('filters.clear_all') }}
+        </ButtonBase>
         <LinkBase
           :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
           variant="button-primary"
           classicon="i-lucide:git-compare"
         >
-          Compare
+          {{ $t('package.links.compare') }}
         </LinkBase>
       </div>
     </header>
diff --git a/app/pages/package-selection.vue b/app/pages/package-selection.vue
deleted file mode 100644
index eb4e5841e..000000000
--- a/app/pages/package-selection.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-const canGoBack = useCanGoBack()
-
-const { selectedPackages } = usePackageSelection()
-</script>
-
-<template>
-  <main class="flex-1 py-8">
-    <div class="container-sm">
-      <div class="flex items-center justify-between gap-4 mb-4">
-        <h1 class="font-mono text-2xl sm:text-3xl font-medium">selected packages</h1>
-        <button
-          type="button"
-          class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
-          @click="router.back()"
-          v-if="canGoBack"
-        >
-          <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-          <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
-        </button>
-      </div>
-
-      <p class="text-fg-muted text-sm mt-4 font-mono">
-        {{
-          $t(
-            'search.found_packages',
-            { count: $n(selectedPackages.length) },
-            selectedPackages.length,
-          )
-        }}
-      </p>
-
-      <div class="mt-6">
-        <PackageList
-          v-if="selectedPackages.length > 0"
-          :results="selectedPackages"
-          search-context
-          heading-level="h2"
-          show-publisher
-        />
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4909cae0b..4848d397b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -773,6 +773,7 @@
       "secure": "Without warnings",
       "insecure": "With warnings"
     },
+    "view_selected": "View selected",
     "sort": {
       "label": "Sort packages",
       "toggle_direction": "Toggle sort direction",
diff --git a/i18n/schema.json b/i18n/schema.json
index db08c2db2..b0dfadb66 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2323,6 +2323,9 @@
           },
           "additionalProperties": false
         },
+        "view_selected": {
+          "type": "string"
+        },
         "sort": {
           "type": "object",
           "properties": {
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 33dcdc0e2..fcace7e99 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -772,6 +772,7 @@
       "secure": "Without warnings",
       "insecure": "With warnings"
     },
+    "view_selected": "View selected",
     "sort": {
       "label": "Sort packages",
       "toggle_direction": "Toggle sort direction",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 94b6cf60b..519ad4d46 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -772,6 +772,7 @@
       "secure": "Without warnings",
       "insecure": "With warnings"
     },
+    "view_selected": "View selected",
     "sort": {
       "label": "Sort packages",
       "toggle_direction": "Toggle sort direction",
diff --git a/server/middleware/canonical-redirects.global.ts b/server/middleware/canonical-redirects.global.ts
index 743c246d6..b6419f2e9 100644
--- a/server/middleware/canonical-redirects.global.ts
+++ b/server/middleware/canonical-redirects.global.ts
@@ -23,7 +23,6 @@ const pages = [
   '/package',
   '/package-code',
   '/package-docs',
-  '/package-selection',
   '/privacy',
   '/search',
   '/settings',

From 7700125e72febe07c002b90503c6f8f8eb4812b6 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 15:27:12 +0100
Subject: [PATCH 07/11] feat: add table selection

---
 app/components/Package/Card.vue     | 25 ++++++++++++-------------
 app/components/Package/List.vue     |  4 ----
 app/components/Package/Table.vue    |  4 ++++
 app/components/Package/TableRow.vue | 16 ++++++++++++++++
 i18n/locales/en.json                |  3 ++-
 i18n/schema.json                    |  3 +++
 lunaria/files/en-GB.json            |  3 ++-
 lunaria/files/en-US.json            |  3 ++-
 shared/types/preferences.ts         |  1 +
 9 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 22ee88d64..ce5efdfc0 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -16,8 +16,9 @@ const props = defineProps<{
   searchQuery?: string
 }>()
 
-const selected = defineModel<boolean>('selected', {
-  default: false,
+const { isPackageSelected, togglePackageSelection } = usePackageSelection()
+const isSelected = computed<boolean>(() => {
+  return isPackageSelected(props.result)
 })
 
 const emit = defineEmits<{
@@ -43,7 +44,7 @@ const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
-  <BaseCard :selected :isExactMatch="isExactMatch">
+  <BaseCard :selected="isSelected" :isExactMatch="isExactMatch">
     <header class="mb-4 flex items-baseline justify-between gap-2">
       <component
         :is="headingLevel ?? 'h3'"
@@ -64,16 +65,14 @@ const numberFormatter = useNumberFormatter()
         >
       </component>
 
-      <div class="flex items-center gap-4">
-        <div class="relative z-1">
-          <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"
-            type="checkbox"
-            :checked="!!selected"
-            v-model="selected"
-          />
-        </div>
+      <div class="relative z-1">
+        <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"
+          type="checkbox"
+          :checked="isSelected"
+          @change="togglePackageSelection(result)"
+        />
       </div>
     </header>
 
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 2170b16a4..c7bc5f885 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -147,8 +147,6 @@ function scrollToIndex(index: number, smooth = true) {
 defineExpose({
   scrollToIndex,
 })
-
-const { isPackageSelected, togglePackageSelection } = usePackageSelection()
 </script>
 
 <template>
@@ -190,8 +188,6 @@ const { isPackageSelected, togglePackageSelection } = usePackageSelection()
                 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)"
-                @update:selected="togglePackageSelection(item)"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index 63ec2f70f..3f7e93d45 100644
--- a/app/components/Package/Table.vue
+++ b/app/components/Package/Table.vue
@@ -102,6 +102,7 @@ const columnLabels = computed(() => ({
   maintenanceScore: t('filters.columns.maintenance_score'),
   combinedScore: t('filters.columns.combined_score'),
   security: t('filters.columns.security'),
+  selection: t('filters.columns.selection'),
 }))
 
 function getColumnLabel(id: ColumnId): string {
@@ -299,6 +300,9 @@ function getColumnLabel(id: ColumnId): string {
           >
             {{ getColumnLabel('security') }}
           </th>
+          <th class="w-8">
+            <span class="sr-only">{{ getColumnLabel('selection') }}</span>
+          </th>
         </tr>
       </thead>
       <tbody>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 3e3768602..b47972569 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -17,6 +17,10 @@ const pkg = computed(() => props.result.package)
 const score = computed(() => props.result.score)
 
 const updatedDate = computed(() => props.result.package.date)
+const { isPackageSelected, togglePackageSelection } = usePackageSelection()
+const isSelected = computed<boolean>(() => {
+  return isPackageSelected(props.result)
+})
 
 function formatDownloads(count?: number): string {
   if (count === undefined) return '-'
@@ -196,6 +200,18 @@ const allMaintainersText = computed(() => {
       </span>
       <span v-else class="text-fg-subtle"> - </span>
     </td>
+
+    <td class="pe-2 relative z-1">
+      <div class="flex items-center justify-center h-full">
+        <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"
+          type="checkbox"
+          :checked="isSelected"
+          @change="togglePackageSelection(result)"
+        />
+      </div>
+    </td>
   </tr>
 </template>
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4848d397b..ec09af7c9 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -807,7 +807,8 @@
       "popularity_score": "Popularity score",
       "maintenance_score": "Maintenance score",
       "combined_score": "Combined score",
-      "security": "Security"
+      "security": "Security",
+      "selection": "Select package"
     },
     "view_mode": {
       "label": "View mode",
diff --git a/i18n/schema.json b/i18n/schema.json
index b0dfadb66..e861ae4d2 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2427,6 +2427,9 @@
             },
             "security": {
               "type": "string"
+            },
+            "selection": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index fcace7e99..3445afbcf 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -806,7 +806,8 @@
       "popularity_score": "Popularity score",
       "maintenance_score": "Maintenance score",
       "combined_score": "Combined score",
-      "security": "Security"
+      "security": "Security",
+      "selection": "Select package"
     },
     "view_mode": {
       "label": "View mode",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 519ad4d46..0ffdd2335 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -806,7 +806,8 @@
       "popularity_score": "Popularity score",
       "maintenance_score": "Maintenance score",
       "combined_score": "Combined score",
-      "security": "Security"
+      "security": "Security",
+      "selection": "Select package"
     },
     "view_mode": {
       "label": "View mode",
diff --git a/shared/types/preferences.ts b/shared/types/preferences.ts
index d95b18af0..3f79b9c4f 100644
--- a/shared/types/preferences.ts
+++ b/shared/types/preferences.ts
@@ -20,6 +20,7 @@ export type ColumnId =
   | 'maintenanceScore'
   | 'combinedScore'
   | 'security'
+  | 'selection'
 
 export interface ColumnConfig {
   id: ColumnId

From bab24a2c9860bceeab0b93267fb5b937c0c2bd22 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 16:42:33 +0100
Subject: [PATCH 08/11] feat: add label

---
 app/components/Package/Card.vue     | 19 ++++++++++++-------
 app/components/Package/TableRow.vue | 19 ++++++++++++-------
 i18n/locales/en.json                |  3 ++-
 i18n/schema.json                    |  3 +++
 lunaria/files/en-GB.json            |  3 ++-
 lunaria/files/en-US.json            |  3 ++-
 6 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index ce5efdfc0..5cb334505 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -66,13 +66,18 @@ const numberFormatter = useNumberFormatter()
       </component>
 
       <div class="relative z-1">
-        <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"
-          type="checkbox"
-          :checked="isSelected"
-          @change="togglePackageSelection(result)"
-        />
+        <label>
+          <span class="sr-only">
+            {{ $t('package.card.select') }}
+          </span>
+          <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"
+            type="checkbox"
+            :checked="isSelected"
+            @change="togglePackageSelection(result)"
+          />
+        </label>
       </div>
     </header>
 
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index b47972569..3b0ae3697 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -203,13 +203,18 @@ const allMaintainersText = computed(() => {
 
     <td class="pe-2 relative z-1">
       <div class="flex items-center justify-center h-full">
-        <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"
-          type="checkbox"
-          :checked="isSelected"
-          @change="togglePackageSelection(result)"
-        />
+        <label>
+          <span class="sr-only">
+            {{ $t('package.card.select') }}
+          </span>
+          <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"
+            type="checkbox"
+            :checked="isSelected"
+            @change="togglePackageSelection(result)"
+          />
+        </label>
       </div>
     </td>
   </tr>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index ec09af7c9..37d92053b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -284,7 +284,8 @@
       "published": "Published",
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
-      "license": "License"
+      "license": "License",
+      "select": "Select package"
     },
     "versions": {
       "title": "Versions",
diff --git a/i18n/schema.json b/i18n/schema.json
index e861ae4d2..d6c0e6264 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -858,6 +858,9 @@
             },
             "license": {
               "type": "string"
+            },
+            "select": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 3445afbcf..578daf1ae 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -283,7 +283,8 @@
       "published": "Published",
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
-      "license": "License"
+      "license": "License",
+      "select": "Select package"
     },
     "versions": {
       "title": "Versions",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 0ffdd2335..93c5c2b20 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -283,7 +283,8 @@
       "published": "Published",
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
-      "license": "License"
+      "license": "License",
+      "select": "Select package"
     },
     "versions": {
       "title": "Versions",

From 481fc12ec9c1d64253051f2587c5001a68de2611 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 18:04:34 +0100
Subject: [PATCH 09/11] test: add a11y check

---
 test/nuxt/a11y.spec.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index c797b2577..b5eba3b01 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -208,6 +208,8 @@ import {
   DiffSkipBlock,
   DiffTable,
   DiffViewerPanel,
+  PackageActionBar,
+  PackageSelectionView,
 } from '#components'
 
 // Server variant components must be imported directly to test the server-side render
@@ -3317,6 +3319,32 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageActionBar', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageActionBar)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageSelectionView', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageSelectionView)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations changing view mode', async () => {
+      const component = await mountSuspended(PackageSelectionView, {
+        props: {
+          viewMode: 'table',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {

From 5e926abeba0a89d642277febac6c5188f396033b Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 18:09:43 +0100
Subject: [PATCH 10/11] fix: types

---
 app/components/ColumnPicker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 35d3abc35..54d160278 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -54,6 +54,7 @@ const columnLabels = computed(() => ({
   maintenanceScore: $t('filters.columns.maintenance_score'),
   combinedScore: $t('filters.columns.combined_score'),
   security: $t('filters.columns.security'),
+  selection: $t('filters.columns.selection'),
 }))
 
 function getColumnLabel(id: ColumnId): string {

From d04f0d2d437020d512c19f8d7d67f2ec855a6ed3 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Fri, 27 Feb 2026 18:46:49 +0100
Subject: [PATCH 11/11] fix: only trigger when action bar is visible

---
 app/components/Package/ActionBar.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/components/Package/ActionBar.vue b/app/components/Package/ActionBar.vue
index c982cc8b0..b579ee963 100644
--- a/app/components/Package/ActionBar.vue
+++ b/app/components/Package/ActionBar.vue
@@ -10,6 +10,10 @@ onKeyStroke(
     return isKeyWithoutModifiers(e, shortcutKey) && (!isEditableElement(target) || isCheckbox)
   },
   e => {
+    if (selectedPackages.value.length === 0) {
+      return
+    }
+
     e.preventDefault()
     actionBar.value?.focus()
   },