Merge branch 'main' of github.com:harlan-zw/fork-npmx.dev into feat/og-image-v6

Author: harlan-zw

.storybook/main.ts

@@ -8,10 +8,10 @@ const config = {
   features: {
     backgrounds: false,
   },
-  async viteFinal(config) {
-    config.plugins ??= []
+  async viteFinal(newConfig) {
+    newConfig.plugins ??= []
 
-    config.plugins.push({
+    newConfig.plugins.push({
       name: 'ignore-internals',
       transform(_, id) {
         if (id.includes('/app/pages/blog/') && id.endsWith('.md')) {
@@ -23,7 +23,7 @@ const config = {
     // vue-docgen-api can crash on components that import types from other
     // .vue files (it tries to parse the SFC with @babel/parser as plain TS).
     // This wrapper catches those errors so the build doesn't fail.
-    const docgenPlugin = config.plugins?.find(
+    const docgenPlugin = newConfig.plugins?.find(
       (p): p is Extract<typeof p, { name: string }> =>
         !!p && typeof p === 'object' && 'name' in p && p.name === 'storybook:vue-docgen-plugin',
     )
@@ -48,7 +48,7 @@ const config = {
       }
     }
 
-    return config
+    return newConfig
   },
 } satisfies StorybookConfig
 

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/Compare/ComparisonGrid.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 
 /** Total column count including the optional no-dep column */
 const totalColumns = computed(() => props.columns.length + (props.showNoDependency ? 1 : 0))
+const visibleColumns = computed(() => Math.min(totalColumns.value, 4))
 
 /** Compute plain-text tooltip for a replacement column */
 function getReplacementTooltip(col: ComparisonGridColumn): string {
@@ -30,32 +31,43 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
   <div class="overflow-x-auto">
     <div
       class="comparison-grid"
-      :class="[totalColumns === 4 ? 'min-w-[800px]' : 'min-w-[600px]', `columns-${totalColumns}`]"
-      :style="{ '--columns': totalColumns }"
+      :style="{
+        '--package-count': totalColumns,
+        '--visible-columns': visibleColumns,
+      }"
     >
       <!-- Header row -->
       <div class="comparison-header">
-        <div class="comparison-label" />
+        <div class="comparison-label relative bg-bg" />
 
         <!-- Package columns -->
-        <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
-          <span class="inline-flex items-center gap-1.5 truncate">
+        <div
+          v-for="col in columns"
+          :key="col.name"
+          class="comparison-cell comparison-cell-header min-w-0"
+        >
+          <div class="flex items-start justify-center gap-1.5 min-w-0">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm truncate"
-              block
+              class="flex min-w-0 flex-col items-center text-center text-sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
-              {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
+              <span class="min-w-0 break-words line-clamp-1">
+                {{ col.name }}
+              </span>
+              <span v-if="col.version" class="text-fg-muted line-clamp-1">
+                @{{ col.version }}
+              </span>
             </LinkBase>
+
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb mt-0.5 h-3.5 w-3.5 shrink-0 cursor-help text-amber-500"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
             </TooltipApp>
-          </span>
+          </div>
         </div>
 
         <!-- "No dep" column (always last) -->
@@ -100,29 +112,30 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
 
 <style scoped>
 .comparison-grid {
+  --label-column-width: 140px;
+  --package-column-width: calc((100% - var(--label-column-width)) / var(--visible-columns));
   display: grid;
   gap: 0;
-}
-
-.comparison-grid.columns-2 {
-  grid-template-columns: minmax(120px, 180px) repeat(2, 1fr);
-}
-
-.comparison-grid.columns-3 {
-  grid-template-columns: minmax(120px, 160px) repeat(3, 1fr);
-}
-
-.comparison-grid.columns-4 {
-  grid-template-columns: minmax(100px, 140px) repeat(4, 1fr);
+  grid-template-columns:
+    var(--label-column-width)
+    repeat(var(--package-count), minmax(var(--package-column-width), var(--package-column-width)));
 }
 
 .comparison-header {
   display: contents;
 }
 
 .comparison-header > .comparison-label {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
+  z-index: 3;
+}
+
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+  isolation: isolate;
 }
 
 .comparison-header > .comparison-cell-header {

app/components/Compare/FacetBarChart.vue

@@ -178,8 +178,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
               bold: false,
               color: colors.value.fg,
               value: {
-                formatter: ({ config }) => {
-                  return config?.datapoint?.formattedValue ?? '0'
+                formatter: ({ config: formatterConfig }) => {
+                  return formatterConfig?.datapoint?.formattedValue ?? '0'
                 },
               },
             },

app/components/Compare/FacetRow.vue

@@ -88,7 +88,9 @@ function isCellLoading(index: number): boolean {
 <template>
   <div class="contents">
     <!-- Label cell -->
-    <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
+    <div
+      class="comparison-label relative bg-bg flex items-center gap-1.5 px-4 py-3 border-b border-border"
+    >
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
         <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
@@ -151,3 +153,13 @@ function isCellLoading(index: number): boolean {
     </div>
   </div>
 </template>
+
+<style lang="css" scoped>
+.comparison-label {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  inline-size: var(--label-column-width);
+  min-inline-size: var(--label-column-width);
+}
+</style>

app/components/Package/ActionBar.vue

@@ -0,0 +1,87 @@
+<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>
+    <section
+      v-if="selectedPackages.length"
+      aria-labelledby="action-bar-title"
+      class="group fixed bottom-10 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none focus:outline-none"
+      tabindex="-1"
+      aria-keyshortcuts="b"
+      ref="actionBarRef"
+    >
+      <h3 id="action-bar-title" class="sr-only">
+        {{ $t('action_bar.title') }}
+      </h3>
+      <div
+        class="group-focus:outline-accent group-focus:outline-2 group-focus:outline-offset-2 pointer-events-auto bg-bg shadow-2xl shadow-accent/20 border-2 border-accent/60 p-3 min-w-[300px] rounded-xl flex gap-3 items-center justify-between animate-in ring-1 ring-accent/30"
+      >
+        <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-2">
+          <span class="text-fg font-semibold text-sm flex items-center gap-1.5">
+            {{ $t('action_bar.selection', selectedPackages.length) }}
+          </span>
+          <button
+            @click="clearSelectedPackages"
+            class="flex items-center ms-1 text-fg-muted hover:(text-fg bg-accent/10) p-1.5 rounded-lg transition-colors"
+            :aria-label="$t('action_bar.button_close_aria_label')"
+          >
+            <span class="i-lucide:x text-sm" aria-hidden="true" />
+          </button>
+        </div>
+
+        <LinkBase
+          :to="{ name: 'compare', query: { packages: selectedPackagesParam } }"
+          variant="button-secondary"
+          classicon="i-lucide:git-compare"
+        >
+          {{ $t('package.links.compare') }}
+        </LinkBase>
+      </div>
+    </section>
+  </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, canSelectMore } = usePackageSelection()
+const isSelected = computed<boolean>(() => {
+  return isPackageSelected(props.result.package.name)
+})
+
 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,17 @@ 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>
-    </div>
-    <div class="flex justify-start items-start gap-4 sm:gap-8">
-      <div class="min-w-0">
+
+      <PackageSelectionCheckbox
+        :package-name="result.package.name"
+        :disabled="!canSelectMore && !isSelected"
+        :checked="isSelected"
+        @change="togglePackageSelection"
+      />
+    </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 +118,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 +143,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">