Merge branch 'main' into feat/i18n-at

Author: trueberryless

CONTRIBUTING.md

@@ -752,6 +752,23 @@ pnpm test:browser:ui     # Run with Playwright UI
 
 Make sure to read about [Playwright best practices](https://playwright.dev/docs/best-practices) and don't rely on classes/IDs but try to follow user-replicable behaviour (like selecting an element based on text content instead).
 
+#### Updating snapshots
+
+Some tests use image snapshots that must match the CI environment (Linux). If you need to update them, and aren't running Linux, you can use Docker to run in the same environment:
+
+```bash
+docker run --rm \
+  -e CI=true \
+  -e NODE_OPTIONS="--max-old-space-size=4096" \
+  -v $(pwd):/work \
+  -w /work \
+  mcr.microsoft.com/playwright:v1.58.2-noble \
+  sh -c "npm install -g pnpm && pnpm install && pnpm vp run build:test && pnpm vp run test:browser:prebuilt --update-snapshots"
+```
+
+> [!NOTE]
+> If the build runs out of memory, increase `--max-old-space-size` to `8192`.
+
 ### Test fixtures (mocking external APIs)
 
 E2E tests use a fixture system to mock external API requests, ensuring tests are deterministic and don't hit real APIs. This is handled at two levels:

app/components/ColumnPicker.vue

@@ -49,10 +49,6 @@ const columnLabels = computed(() => ({
   updated: $t('filters.columns.published'),
   maintainers: $t('filters.columns.maintainers'),
   keywords: $t('filters.columns.keywords'),
-  qualityScore: $t('filters.columns.quality_score'),
-  popularityScore: $t('filters.columns.popularity_score'),
-  maintenanceScore: $t('filters.columns.maintenance_score'),
-  combinedScore: $t('filters.columns.combined_score'),
   security: $t('filters.columns.security'),
   selection: $t('filters.columns.selection'),
 }))

app/components/Package/List.vue

@@ -112,6 +112,12 @@ watch(
   { immediate: true },
 )
 
+// Tracks how many items came from the last new-search batch.
+// Items at index < newSearchBatchSize are from the new search → no animation.
+// Items at index >= newSearchBatchSize were loaded via scroll → animate with stagger.
+// Using an index threshold avoids any timing dependency on nextTick / virtual list paint.
+const newSearchBatchSize = shallowRef(Infinity)
+
 // Reset scroll state when results change significantly (new search)
 watch(
   () => props.results,
@@ -123,6 +129,7 @@ watch(
       (oldResults.length > 0 && newResults[0]?.package.name !== oldResults[0]?.package.name)
     ) {
       hasScrolledToInitial.value = false
+      newSearchBatchSize.value = newResults.length
     }
   },
 )
@@ -172,9 +179,16 @@ defineExpose({
                 :show-publisher="showPublisher"
                 :index="index"
                 :search-query="searchQuery"
-                class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
+                :class="
+                  index >= newSearchBatchSize &&
+                  'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+                "
+                :style="
+                  index >= newSearchBatchSize
+                    ? { animationDelay: `${Math.min((index - newSearchBatchSize) * 0.02, 0.3)}s` }
+                    : {}
+                "
                 :filters="filters"
-                :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
@@ -224,8 +238,15 @@ defineExpose({
             :show-publisher="showPublisher"
             :index="index"
             :search-query="searchQuery"
-            class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
-            :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+            :class="
+              index >= newSearchBatchSize &&
+              'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+            "
+            :style="
+              index >= newSearchBatchSize
+                ? { animationDelay: `${Math.min((index - newSearchBatchSize) * 0.02, 0.3)}s` }
+                : {}
+            "
             :filters="filters"
             @click-keyword="emit('clickKeyword', $event)"
           />

app/components/Package/ListToolbar.vue

@@ -102,10 +102,6 @@ const sortKeyLabelKeys = computed<Record<SortKey, string>>(() => ({
   'downloads-year': t('filters.sort.downloads_year'),
   'updated': t('filters.sort.published'),
   'name': t('filters.sort.name'),
-  'quality': t('filters.sort.quality'),
-  'popularity': t('filters.sort.popularity'),
-  'maintenance': t('filters.sort.maintenance'),
-  'score': t('filters.sort.score'),
 }))
 
 function getSortKeyLabelKey(key: SortKey): string {

app/components/Package/Table.vue

@@ -37,21 +37,13 @@ const columnToSortKey: Record<string, SortKey> = {
   name: 'name',
   downloads: 'downloads-week',
   updated: 'updated',
-  qualityScore: 'quality',
-  popularityScore: 'popularity',
-  maintenanceScore: 'maintenance',
-  combinedScore: 'score',
 }
 
 // Default direction for each column
 const columnDefaultDirection: Record<string, 'asc' | 'desc'> = {
   name: 'asc',
   downloads: 'desc',
   updated: 'desc',
-  qualityScore: 'desc',
-  popularityScore: 'desc',
-  maintenanceScore: 'desc',
-  combinedScore: 'desc',
 }
 
 function isColumnSorted(id: string): boolean {
@@ -97,10 +89,6 @@ const columnLabels = computed(() => ({
   updated: t('filters.columns.published'),
   maintainers: t('filters.columns.maintainers'),
   keywords: t('filters.columns.keywords'),
-  qualityScore: t('filters.columns.quality_score'),
-  popularityScore: t('filters.columns.popularity_score'),
-  maintenanceScore: t('filters.columns.maintenance_score'),
-  combinedScore: t('filters.columns.combined_score'),
   security: t('filters.columns.security'),
   selection: t('filters.columns.selection'),
 }))
@@ -264,38 +252,6 @@ function getColumnLabel(id: ColumnId): string {
             {{ getColumnLabel('keywords') }}
           </th>
 
-          <th
-            v-if="isColumnVisible('qualityScore')"
-            scope="col"
-            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
-          >
-            {{ getColumnLabel('qualityScore') }}
-          </th>
-
-          <th
-            v-if="isColumnVisible('popularityScore')"
-            scope="col"
-            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
-          >
-            {{ getColumnLabel('popularityScore') }}
-          </th>
-
-          <th
-            v-if="isColumnVisible('maintenanceScore')"
-            scope="col"
-            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
-          >
-            {{ getColumnLabel('maintenanceScore') }}
-          </th>
-
-          <th
-            v-if="isColumnVisible('combinedScore')"
-            scope="col"
-            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
-          >
-            {{ getColumnLabel('combinedScore') }}
-          </th>
-
           <th
             v-if="isColumnVisible('security')"
             scope="col"

app/components/Package/TableRow.vue

@@ -14,19 +14,13 @@ const emit = defineEmits<{
 }>()
 
 const pkg = computed(() => props.result.package)
-const score = computed(() => props.result.score)
 
 const updatedDate = computed(() => props.result.package.date)
 const { isPackageSelected, togglePackageSelection, canSelectMore } = usePackageSelection()
 const isSelected = computed<boolean>(() => {
   return isPackageSelected(props.result.package.name)
 })
 
-function formatScore(value?: number): string {
-  if (value === undefined || value === 0) return '-'
-  return Math.round(value * 100).toString()
-}
-
 function isColumnVisible(id: string): boolean {
   return props.columns.find(c => c.id === id)?.visible ?? false
 }
@@ -163,38 +157,6 @@ const compactNumberFormatter = useCompactNumberFormatter()
       <span v-else class="text-fg-subtle">-</span>
     </td>
 
-    <!-- Quality Score -->
-    <td
-      v-if="isColumnVisible('qualityScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
-    >
-      {{ formatScore(score?.detail?.quality) }}
-    </td>
-
-    <!-- Popularity Score -->
-    <td
-      v-if="isColumnVisible('popularityScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
-    >
-      {{ formatScore(score?.detail?.popularity) }}
-    </td>
-
-    <!-- Maintenance Score -->
-    <td
-      v-if="isColumnVisible('maintenanceScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
-    >
-      {{ formatScore(score?.detail?.maintenance) }}
-    </td>
-
-    <!-- Combined Score -->
-    <td
-      v-if="isColumnVisible('combinedScore')"
-      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
-    >
-      {{ formatScore(score?.final) }}
-    </td>
-
     <!-- Security -->
     <td v-if="isColumnVisible('security')" class="py-2 px-3">
       <span v-if="result.flags?.insecure" class="text-syntax-kw">

app/composables/npm/search-utils.ts

@@ -11,7 +11,6 @@ export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult {
       author: meta.author,
       maintainers: meta.maintainers,
     },
-    score: { final: 0, detail: { quality: 0, popularity: 0, maintenance: 0 } },
     searchScore: 0,
     downloads: meta.weeklyDownloads !== undefined ? { weekly: meta.weeklyDownloads } : undefined,
     updated: meta.date,

app/composables/npm/useAlgoliaSearch.ts

@@ -91,14 +91,6 @@ function hitToSearchResult(hit: AlgoliaHit): NpmSearchResult {
           }))
         : [],
     },
-    score: {
-      final: 0,
-      detail: {
-        quality: hit.popular ? 1 : 0,
-        popularity: hit.downloadsRatio,
-        maintenance: 0,
-      },
-    },
     searchScore: 0,
     downloads: {
       weekly: Math.round(hit.downloadsLast30Days / 4.3),

app/composables/useGlobalSearch.ts

@@ -4,6 +4,8 @@ import { debounce } from 'perfect-debounce'
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
+const SEARCH_DEBOUNCE_MS = 100
+
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { settings } = useSettings()
   const { searchProvider } = useSearchProvider()
@@ -27,10 +29,14 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   // Syncs instantly when instantSearch is on, but only on Enter press when off
   const committedSearchQuery = useState<string>('committed-search-query', () => searchQuery.value)
 
+  const commitSearchQuery = debounce((val: string) => {
+    committedSearchQuery.value = val
+  }, SEARCH_DEBOUNCE_MS)
+
   // This is basically doing instant search as user types
   watch(searchQuery, val => {
     if (settings.value.instantSearch) {
-      committedSearchQuery.value = val
+      commitSearchQuery(val)
     }
   })
 
@@ -71,10 +77,11 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
     })
   }
 
-  const updateUrlQuery = debounce(updateUrlQueryImpl, 250)
+  const updateUrlQuery = debounce(updateUrlQueryImpl, SEARCH_DEBOUNCE_MS)
 
   function flushUpdateUrlQuery() {
     // Commit the current query when explicitly submitted (Enter pressed)
+    commitSearchQuery.cancel()
     committedSearchQuery.value = searchQuery.value
     // When instant search is off the debounce queue is empty, so call directly
     if (!settings.value.instantSearch) {

app/composables/useStructuredFilters.ts

@@ -332,18 +332,6 @@ export function useStructuredFilters(options: UseStructuredFiltersOptions) {
       case 'name':
         diff = a.package.name.localeCompare(b.package.name)
         break
-      case 'quality':
-        diff = (a.score?.detail?.quality ?? 0) - (b.score?.detail?.quality ?? 0)
-        break
-      case 'popularity':
-        diff = (a.score?.detail?.popularity ?? 0) - (b.score?.detail?.popularity ?? 0)
-        break
-      case 'maintenance':
-        diff = (a.score?.detail?.maintenance ?? 0) - (b.score?.detail?.maintenance ?? 0)
-        break
-      case 'score':
-        diff = (a.score?.final ?? 0) - (b.score?.final ?? 0)
-        break
       case 'relevance':
         // Relevance preserves server order (already sorted by search relevance)
         diff = 0