feat(ui): add action bar

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 -->

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 {

app/components/Package/ActionBar.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const { selectedPackages, selectedPackagesParam, clearSelectedPackages } = usePackageSelection()
+
+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 => {
+    if (selectedPackages.value.length === 0) {
+      return
+    }
+
+    e.preventDefault()
+    actionBar.value?.focus()
+  },
+)
+</script>
+
+<template>
+  <Transition name="action-bar-slide" appear>
+    <div
+      v-if="selectedPackages.length"
+      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-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) }}.
+          {{ $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-xs relative top-px" aria-label="Close action bar" />
+          </button>
+        </div>
+
+        <LinkBase
+          :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
+          variant="button-secondary"
+          classicon="i-lucide:git-compare"
+        >
+          Compare
+        </LinkBase>
+      </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>

app/components/Package/Card.vue

@@ -16,6 +16,11 @@ const props = defineProps<{
   searchQuery?: string
 }>()
 
+const { isPackageSelected, togglePackageSelection } = usePackageSelection()
+const isSelected = computed<boolean>(() => {
+  return isPackageSelected(props.result)
+})
+
 const emit = defineEmits<{
   clickKeyword: [keyword: string]
 }>()
@@ -39,16 +44,16 @@ const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
-  <BaseCard :isExactMatch="isExactMatch">
-    <div class="mb-2 flex items-baseline justify-start gap-2">
+  <BaseCard :selected="isSelected" :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"
       >
         <NuxtLink
           :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
@@ -59,28 +64,25 @@ 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="relative z-1">
+        <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>
-    </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 +126,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 +151,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">

app/components/Package/List.vue

@@ -179,7 +179,8 @@ defineExpose({
           <template #default="{ item, index }">
             <div class="pb-4">
               <PackageCard
-                :result="item as NpmSearchResult"
+                :key="item.package.name"
+                :result="item"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
                 :index="index"

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>
@@ -211,6 +214,22 @@ function getSortKeyLabelKey(key: SortKey): string {
 
           <ViewModeToggle v-model="viewMode" />
         </div>
+
+        <div
+          class="flex items-center order-3 border-is border-fg-subtle/20 ps-3"
+          v-if="selectedPackages.length"
+        >
+          <ButtonBase
+            variant="secondary"
+            @click="emit('toggleSelection')"
+            classicon="i-lucide:package-check"
+          >
+            {{ 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" />
+          </button>
+        </div>
       </div>
     </div>
 

app/components/Package/SelectionView.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  viewMode?: ViewMode
+}>()
+
+const { selectedPackages, clearSelectedPackages, selectedPackagesParam } = usePackageSelection()
+</script>
+
+<template>
+  <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">
+          {{ $t('filters.clear_all') }}
+        </ButtonBase>
+        <LinkBase
+          :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
+          variant="button-primary"
+          classicon="i-lucide:git-compare"
+        >
+          {{ $t('package.links.compare') }}
+        </LinkBase>
+      </div>
+    </header>
+
+    <p class="text-fg-muted text-sm font-mono">
+      {{ $t('action_bar.selection', selectedPackages.length) }}
+    </p>
+
+    <div class="mt-6">
+      <PackageList
+        v-if="selectedPackages.length > 0"
+        :view-mode="viewMode"
+        :results="selectedPackages"
+        search-context
+        heading-level="h2"
+        show-publisher
+      />
+    </div>
+  </section>
+</template>

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>

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,23 @@ 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">
+        <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>
 </template>
 

app/composables/usePackageSelection.ts

@@ -0,0 +1,32 @@
+export function usePackageSelection() {
+  const selectedPackages = useState<NpmSearchResult[]>('package_selection', () => [])
+  const selectedPackagesParam = computed<string>(() =>
+    selectedPackages.value.map(p => p.package.name).join(','),
+  )
+
+  function isPackageSelected(pkg: NpmSearchResult): boolean {
+    return selectedPackages.value.some(p => p.package.name === pkg.package.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, pkg]
+    }
+  }
+
+  function clearSelectedPackages() {
+    selectedPackages.value = []
+  }
+
+  return {
+    selectedPackages,
+    selectedPackagesParam,
+    clearSelectedPackages,
+    isPackageSelected,
+    togglePackageSelection,
+  }
+}