fix(ui): replace "yolo" mode with npm API max of 250 results (#1922)

Author: MatteoGabriele

app/components/Package/List.vue

@@ -75,18 +75,15 @@ const paginationMode = computed(() =>
 )
 const currentPage = computed(() => props.currentPage ?? 1)
 const pageSize = computed(() => props.pageSize ?? 25)
-// Numeric page size for virtual scroll and arithmetic (when 'all' is selected, use 25 as default)
-const numericPageSize = computed(() => (pageSize.value === 'all' ? 25 : pageSize.value))
+// Numeric page size for virtual scroll and arithmetic (use 25 as default)
+const numericPageSize = computed(() => pageSize.value)
 
 // Compute paginated results for paginated mode
 const displayedResults = computed(() => {
   if (paginationMode.value === 'infinite') {
     return props.results
   }
-  // 'all' page size means show everything (YOLO)
-  if (pageSize.value === 'all') {
-    return props.results
-  }
+
   const start = (currentPage.value - 1) * numericPageSize.value
   const end = start + numericPageSize.value
   return props.results.slice(start, end)

app/components/Package/ListToolbar.vue

@@ -147,7 +147,7 @@ function getSortKeyLabelKey(key: SortKey): string {
           $t(
             'filters.count.showing_paginated',
             {
-              pageSize: pageSize === 'all' ? $n(filteredCount) : Math.min(pageSize, filteredCount),
+              pageSize: Math.min(pageSize, filteredCount),
               count: $n(filteredCount),
             },
             filteredCount,

app/components/PaginationControls.vue

@@ -22,23 +22,17 @@ const effectiveMode = computed<PaginationMode>(() =>
   shouldShowControls.value ? 'paginated' : 'infinite',
 )
 
-// When 'all' is selected, there's only 1 page with everything
-const isShowingAll = computed(() => pageSize.value === 'all')
-const totalPages = computed(() =>
-  isShowingAll.value ? 1 : Math.ceil(props.totalItems / (pageSize.value as number)),
-)
+const totalPages = computed(() => Math.ceil(props.totalItems / (pageSize.value as number)))
 
 // Whether to show the mode toggle (hidden in table view since table always uses pagination)
 const showModeToggle = computed(() => props.viewMode !== 'table')
 
 const startItem = computed(() => {
   if (props.totalItems === 0) return 0
-  if (isShowingAll.value) return 1
   return (currentPage.value - 1) * (pageSize.value as number) + 1
 })
 
 const endItem = computed(() => {
-  if (isShowingAll.value) return props.totalItems
   return Math.min(currentPage.value * (pageSize.value as number), props.totalItems)
 })
 
@@ -106,8 +100,8 @@ const visiblePages = computed(() => {
 function handlePageSizeChange(event: Event) {
   const target = event.target as HTMLSelectElement
   const value = target.value
-  // Handle 'all' as a special string value, otherwise parse as number
-  const newSize = (value === 'all' ? 'all' : Number(value)) as PageSize
+
+  const newSize = Number(value) as PageSize
   pageSize.value = newSize
   // Reset to page 1 when changing page size
   currentPage.value = 1
@@ -159,10 +153,7 @@ function handlePageSizeChange(event: Event) {
           @change="handlePageSizeChange"
           :items="
             PAGE_SIZE_OPTIONS.map(size => ({
-              label:
-                size === 'all'
-                  ? $t('filters.pagination.all_yolo')
-                  : $t('filters.pagination.per_page', { count: size }),
+              label: $t('filters.pagination.per_page', { count: size }),
               value: String(size),
             }))
           "

app/composables/usePackageListPreferences.ts

@@ -41,6 +41,22 @@ export function usePackageListPreferences() {
     },
   })
 
+  // One-time migration: replace legacy 'all' with the current maximum page size
+  watch(
+    isHydrated,
+    hydrated => {
+      if (!hydrated) {
+        return
+      }
+
+      if ((preferences.value.pageSize as unknown) === 'all') {
+        preferences.value.pageSize = Math.max(...PAGE_SIZE_OPTIONS) as PageSize
+        save()
+      }
+    },
+    { immediate: true },
+  )
+
   const pageSize = computed({
     get: () => preferences.value.pageSize,
     set: (value: PageSize) => {

app/pages/org/[org].vue

@@ -65,9 +65,7 @@ const currentPage = shallowRef(1)
 
 // Calculate total pages
 const totalPages = computed(() => {
-  if (pageSize.value === 'all') return 1
-  const numericSize = typeof pageSize.value === 'number' ? pageSize.value : 25
-  return Math.ceil(sortedPackages.value.length / numericSize)
+  return Math.ceil(sortedPackages.value.length / pageSize.value)
 })
 
 // Reset to page 1 when filters change

app/pages/search.vue

@@ -164,8 +164,7 @@ const EAGER_LOAD_SIZE = { algolia: 500, npm: 500 } as const
 
 // Calculate how many results we need based on current page and preferred page size
 const requestedSize = computed(() => {
-  const numericPrefSize = preferredPageSize.value === 'all' ? 250 : preferredPageSize.value
-  const base = Math.max(pageSize, currentPage.value * numericPrefSize)
+  const base = Math.max(pageSize, currentPage.value * preferredPageSize.value)
   // When sorting by something other than relevance, fetch a large batch
   // so client-side sorting operates on a meaningful pool of matching results
   if (!isRelevanceSort.value) {
@@ -587,10 +586,8 @@ const rawLiveRegionMessage = computed(() => {
 
   if (visibleResults.value && displayResults.value.length > 0) {
     if (viewMode.value === 'table' || paginationMode.value === 'paginated') {
-      const pSize =
-        preferredPageSize.value === 'all'
-          ? $n(effectiveTotal.value)
-          : Math.min(preferredPageSize.value, effectiveTotal.value)
+      const pSize = Math.min(preferredPageSize.value, effectiveTotal.value)
+
       return $t(
         'filters.count.showing_paginated',
         {
@@ -781,10 +778,7 @@ onBeforeUnmount(() => {
                 $t(
                   'filters.count.showing_paginated',
                   {
-                    pageSize:
-                      preferredPageSize === 'all'
-                        ? $n(effectiveTotal)
-                        : Math.min(preferredPageSize, effectiveTotal),
+                    pageSize: Math.min(preferredPageSize, effectiveTotal),
                     count: $n(effectiveTotal),
                   },
                   effectiveTotal,

i18n/locales/ar.json

@@ -768,7 +768,6 @@
       "paginated": "مقسم إلى صفحات",
       "items_per_page": "عدد العناصر في الصفحة",
       "per_page": "{count} / صفحة",
-      "all_yolo": "الكل (إنما هي حياة واحدة)",
       "showing": "{start}-{end} من {total}",
       "previous": "الصفحة السابقة",
       "next": "الصفحة التالية",

i18n/locales/az-AZ.json

@@ -850,7 +850,6 @@
       "paginated": "Səhifələnmiş",
       "items_per_page": "Səhifə başına element",
       "per_page": "{count} / səhifə",
-      "all_yolo": "Hamısı (YOLO)",
       "showing": "{start}-{end} / {total}",
       "previous": "Əvvəlki səhifə",
       "next": "Növbəti səhifə",

i18n/locales/bg-BG.json

@@ -841,7 +841,6 @@
       "paginated": "Със страници",
       "items_per_page": "Елементи на страница",
       "per_page": "{count} / страница",
-      "all_yolo": "Всички (YOLO)",
       "showing": "{start}-{end} от {total}",
       "previous": "Предишна страница",
       "next": "Следваща страница",

i18n/locales/bn-IN.json

@@ -654,7 +654,6 @@
       "paginated": "পাতায়িত",
       "items_per_page": "প্রতি পাতায় আইটেম",
       "per_page": "{count} / পাতায়",
-      "all_yolo": "সব (YOLO)",
       "showing": "{total} এর মধ্যে {start}-{end}",
       "previous": "আগের পাতা",
       "next": "পরের পাতা",