Merge branch main into i18n-ua-new-phrases

Author: alex-key

.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,32 @@
+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:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          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.

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/Maintainers.vue

@@ -238,6 +238,7 @@ watch(
 
     <!-- Show more/less toggle (only when not managing and there are hidden maintainers) -->
     <ButtonBase
+      class="mt-2"
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
       @click="showAllMaintainers = !showAllMaintainers"
     >

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