feat(ui): add action bar

Author: MatteoGabriele

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

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

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,14 +183,17 @@ defineExpose({
           <template #default="{ item, index }">
             <div class="pb-4">
               <PackageCard
-                :result="item as NpmSearchResult"
+                :result="item"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
                 :index="index"
                 :search-query="searchQuery"
                 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>

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>
 

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,
+  }
+}

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>

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

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

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