Merge branch 'main' into use-setup-vp-instead

Author: fengmk2

.github/workflows/welcome.yml .github/workflows/welcome-close.yml.github/workflows/welcome.yml renamed to .github/workflows/welcome-close.yml

@@ -1,4 +1,4 @@
-name: welcome
+name: Claim Contributor Message
 
 on:
   pull_request_target:

.github/workflows/welcome-open.yml

@@ -0,0 +1,31 @@
+name: Welcome Message
+
+on:
+  pull_request_target:
+    branches: [main]
+    types: [opened]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  greeting:
+    name: Greet First-Time Contributors
+    if: github.repository == 'npmx-dev/npmx.dev'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: zephyrproject-rtos/action-first-interaction@58853996b1ac504b8e0f6964301f369d2bb22e5c
+        with:
+          pr-opened-message: |
+            Hello! Thank you for opening your **first PR** to npmx, @${{ github.event.pull_request.user.login }}! 🚀
+
+            Here’s what will happen next:
+
+            1. Our GitHub bots will run to check your changes.
+               If they spot any issues you will see some error messages on this PR.
+               Don’t hesitate to ask any questions if you’re not sure what these mean!
+
+            2. In a few minutes, you’ll be able to see a preview of your changes on Vercel
+
+            3. One or more of our maintainers will take a look and may ask you to make changes.
+               We try to be responsive, but don’t worry if this takes a few days.

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