From c57de76f28e39de742c4e2b5ea248040877db011 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 16 May 2026 21:33:31 +0200
Subject: [PATCH 1/2] fix: package comparison broken on org and user pages

---
 app/components/Package/Card.vue          |  2 ++
 app/components/Package/List.vue          |  4 ++++
 app/components/Package/SelectionView.vue |  1 +
 app/components/Package/Table.vue         |  4 +++-
 app/components/Package/TableRow.vue      |  4 +++-
 app/composables/usePackageSelection.ts   | 18 ++++++++++++++
 app/pages/org/[org].vue                  | 30 ++++++++++++++++++++++++
 app/pages/search.vue                     |  1 +
 8 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 9887418b8e..f7b06fb26a 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   searchQuery?: string
 }>()
 
+const { selectable } = usePackageSelectionContext()
 const { isPackageSelected, togglePackageSelection, canSelectMore } = usePackageSelection()
 const isSelected = computed<boolean>(() => {
   return isPackageSelected(props.result.package.name)
@@ -65,6 +66,7 @@ const numberFormatter = useNumberFormatter()
       </component>
 
       <PackageSelectionCheckbox
+        v-if="selectable"
         :package-name="result.package.name"
         :disabled="!canSelectMore && !isSelected"
         :checked="isSelected"
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 4e8f75536c..0ba9b6331a 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -33,6 +33,8 @@ const props = defineProps<{
   currentPage?: number
   /** When true, shows search-specific UI (relevance sort, no filters) */
   searchContext?: boolean
+  /** Whether package cards should show selection checkboxes. */
+  selectable?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -46,6 +48,8 @@ const emit = defineEmits<{
   'clickKeyword': [keyword: string]
 }>()
 
+providePackageSelectionContext(props.selectable ?? false)
+
 // Reference to WindowVirtualizer for infinite scroll detection
 const listRef = useTemplateRef<WindowVirtualizerHandle>('listRef')
 
diff --git a/app/components/Package/SelectionView.vue b/app/components/Package/SelectionView.vue
index 80d58bb37a..ae458c22ed 100644
--- a/app/components/Package/SelectionView.vue
+++ b/app/components/Package/SelectionView.vue
@@ -52,6 +52,7 @@ const { data, pending } = useAsyncData(
         :view-mode="viewMode"
         :results="data"
         heading-level="h2"
+        selectable
       />
       <p v-else class="text-fg-muted text-sm">
         {{ $t('filters.table.no_packages') }}
diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index 60c2b896b7..e053f36ce5 100644
--- a/app/components/Package/Table.vue
+++ b/app/components/Package/Table.vue
@@ -96,6 +96,8 @@ const columnLabels = computed(() => ({
 function getColumnLabel(id: ColumnId): string {
   return columnLabels.value[id]
 }
+
+const { selectable } = usePackageSelectionContext()
 </script>
 
 <template>
@@ -103,7 +105,7 @@ function getColumnLabel(id: ColumnId): string {
     <table class="w-full text-start">
       <thead class="border-b border-border">
         <tr>
-          <th scope="col" class="w-8">
+          <th scope="col" class="w-8" v-if="selectable">
             <span class="sr-only">{{ getColumnLabel('selection') }}</span>
           </th>
           <!-- Name (always visible) -->
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 600c10e708..42fe4b62b0 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -33,6 +33,8 @@ const allMaintainersText = computed(() => {
 })
 
 const compactNumberFormatter = useCompactNumberFormatter()
+
+const { selectable } = usePackageSelectionContext()
 </script>
 
 <template>
@@ -41,7 +43,7 @@ const compactNumberFormatter = useCompactNumberFormatter()
     tabindex="0"
     :data-result-index="index"
   >
-    <td class="ps-3">
+    <td class="ps-3" v-if="selectable">
       <PackageSelectionCheckbox
         :package-name="result.package.name"
         :disabled="!canSelectMore && !isSelected"
diff --git a/app/composables/usePackageSelection.ts b/app/composables/usePackageSelection.ts
index d677f4288a..5bfa0c4ed1 100644
--- a/app/composables/usePackageSelection.ts
+++ b/app/composables/usePackageSelection.ts
@@ -75,3 +75,21 @@ export function usePackageSelection() {
     openSelectionView,
   }
 }
+
+const PACKAGE_SELECTION_CONTEXT_KEY = Symbol('packageSelectionContext')
+
+export interface PackageSelectionContext {
+  selectable: Readonly<Ref<boolean>>
+}
+
+export function providePackageSelectionContext(selectable: boolean | Ref<boolean>) {
+  const value = computed(() => (isRef(selectable) ? selectable.value : selectable))
+  provide(PACKAGE_SELECTION_CONTEXT_KEY, { selectable: value })
+}
+
+export function usePackageSelectionContext(): PackageSelectionContext {
+  const context = inject<PackageSelectionContext>(PACKAGE_SELECTION_CONTEXT_KEY, {
+    selectable: computed(() => false),
+  })
+  return context
+}
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index 79392646b7..47c2fa2fc9 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -5,6 +5,7 @@ import { debounce } from 'perfect-debounce'
 
 definePageMeta({
   name: 'org',
+  preserveScrollOnQuery: true,
 })
 
 const route = useRoute('org')
@@ -128,6 +129,15 @@ const activeTab = shallowRef<'members' | 'teams'>('members')
 // Canonical URL for this org page
 const canonicalUrl = computed(() => `https://npmx.dev/@${orgName.value}`)
 
+const { selectedPackages, showSelectionView, openSelectionView, closeSelectionView } =
+  usePackageSelection()
+
+watch(selectedPackages, newSelectedPackages => {
+  if (newSelectedPackages.length === 0) {
+    closeSelectionView()
+  }
+})
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -152,6 +162,8 @@ defineOgImage(
 </script>
 
 <template>
+  <PackageActionBar v-if="!showSelectionView" />
+
   <main class="container flex-1 py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
@@ -259,6 +271,22 @@ defineOgImage(
       </p>
     </div>
 
+    <section v-else-if="showSelectionView && selectedPackages.length">
+      <header class="flex justify-end mb-4">
+        <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"
+          @click="closeSelectionView"
+          :aria-label="$t('nav.back')"
+        >
+          <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>
+      </header>
+
+      <PackageSelectionView :view-mode="viewMode" />
+    </section>
+
     <!-- Package list -->
     <section v-else-if="packages.length > 0" :aria-label="$t('org.page.packages_title')">
       <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
@@ -282,6 +310,7 @@ defineOgImage(
         @clear-filter="handleClearFilter"
         @clear-all-filters="clearAllFilters"
         @update:text="setTextFilter"
+        @toggle-selection="openSelectionView"
         @update:search-scope="setSearchScope"
         @update:download-range="setDownloadRange"
         @update:security="setSecurity"
@@ -306,6 +335,7 @@ defineOgImage(
           :page-size="pageSize"
           :current-page="currentPage"
           @click-keyword="toggleKeyword"
+          selectable
         />
 
         <!-- Pagination controls -->
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 1de97475b5..6209335792 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -895,6 +895,7 @@ onBeforeUnmount(() => {
             @load-more="loadMore"
             @page-change="handlePageChange"
             @click-keyword="toggleKeyword"
+            selectable
           />
 
           <PaginationControls

From 5c90c27041537264b4747cc56fcb9ae754356118 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 16 May 2026 23:08:42 +0200
Subject: [PATCH 2/2] fix: remove skeleton if not selectable

---
 app/components/Package/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index e053f36ce5..9bba226cee 100644
--- a/app/components/Package/Table.vue
+++ b/app/components/Package/Table.vue
@@ -267,7 +267,7 @@ const { selectable } = usePackageSelectionContext()
         <!-- Loading skeleton rows -->
         <template v-if="isLoading && results.length === 0">
           <tr v-for="i in 5" :key="`skeleton-${i}`" class="border-b border-border">
-            <td class="py-3 px-3 w-8">
+            <td v-if="selectable" class="py-3 px-3 w-8">
               <div class="h-4 w-4 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td class="py-3 px-3">