feat: add back button and fix keys

Author: MatteoGabriele

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>

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>

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

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

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,23 +559,33 @@ 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">
       <div class="flex items-center justify-between gap-4 mb-4">
         <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"