fix: apply limits to algolia and npm search output, fix visual issues

Author: alex-key

app/components/Package/Card.vue

@@ -161,7 +161,6 @@ const numberFormatter = useNumberFormatter()
     </div>
 
     <ul
-      role="list"
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"

app/components/PaginationControls.vue

@@ -2,6 +2,8 @@
 import type { PageSize, PaginationMode, ViewMode } from '#shared/types/preferences'
 import { PAGE_SIZE_OPTIONS } from '#shared/types/preferences'
 
+const ALL_PAGES_VISIBLE_TRESHOLD = 7
+
 const props = defineProps<{
   totalItems: number
   /** When in table view, force pagination mode (no infinite scroll for tables) */
@@ -63,7 +65,7 @@ const visiblePages = computed(() => {
   const current = currentPage.value
   const pages: (number | 'ellipsis')[] = []
 
-  if (total <= 7) {
+  if (total <= ALL_PAGES_VISIBLE_TRESHOLD) {
     // Show all pages
     for (let i = 1; i <= total; i++) {
       pages.push(i)
@@ -97,6 +99,11 @@ const visiblePages = computed(() => {
   return pages
 })
 
+// disable last page button to prevent TOO MANY REQUESTS error
+function isPageButtonDisabled(page: number): boolean {
+  return totalPages.value > ALL_PAGES_VISIBLE_TRESHOLD && page > currentPage.value + 2
+}
+
 function handlePageSizeChange(event: Event) {
   const target = event.target as HTMLSelectElement
   const value = target.value
@@ -167,8 +174,8 @@ function handlePageSizeChange(event: Event) {
       <span class="text-sm font-mono text-fg-muted">
         {{
           $t('filters.pagination.showing', {
-            start: startItem,
-            end: endItem,
+            start: $n(startItem),
+            end: $n(endItem),
             total: $n(totalItems),
           })
         }}
@@ -197,6 +204,7 @@ function handlePageSizeChange(event: Event) {
           <button
             v-else
             type="button"
+            :disabled="isPageButtonDisabled(page)"
             class="min-w-[32px] h-8 px-2 font-mono text-sm rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
             :class="
               page === currentPage

app/composables/npm/search-utils.ts

@@ -24,6 +24,7 @@ export function emptySearchResponse(): NpmSearchResponse {
   return {
     objects: [],
     total: 0,
+    totalUnlimited: 0,
     isStale: false,
     time: new Date().toISOString(),
   }

app/composables/npm/useAlgoliaSearch.ts

@@ -165,7 +165,8 @@ export function useAlgoliaSearch() {
     return {
       isStale: false,
       objects: response.hits.map(hitToSearchResult),
-      total: response.nbHits ?? 0,
+      totalUnlimited: response.nbHits ?? 0,
+      total: Math.min(SEARCH_ENGINE_HITS_LIMIT.algolia, response.nbHits ?? 0),
       time: new Date().toISOString(),
     }
   }
@@ -326,7 +327,8 @@ export function useAlgoliaSearch() {
     const searchResult: NpmSearchResponse = {
       isStale: false,
       objects: mainResponse.hits.map(hitToSearchResult),
-      total: mainResponse.nbHits ?? 0,
+      total: Math.min(SEARCH_ENGINE_HITS_LIMIT.algolia, mainResponse.nbHits ?? 0),
+      totalUnlimited: mainResponse.nbHits ?? 0,
       time: new Date().toISOString(),
     }
 

app/composables/npm/useSearch.ts

@@ -1,9 +1,13 @@
-import type { NpmSearchResponse, NpmSearchResult } from '#shared/types'
-import type { SearchProvider } from '~/composables/useSettings'
+import type { NpmSearchResponse, NpmSearchResult, SearchProvider } from '#shared/types'
 import type { AlgoliaMultiSearchChecks } from './useAlgoliaSearch'
 import { type SearchSuggestion, emptySearchResponse, parseSuggestionIntent } from './search-utils'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
+export const SEARCH_ENGINE_HITS_LIMIT: Record<SearchProvider, number> = {
+  algolia: 1000,
+  npm: 5000,
+} as const
+
 function emptySearchPayload() {
   return {
     searchResponse: emptySearchResponse(),
@@ -25,6 +29,14 @@ export interface UseSearchConfig {
   suggestions?: boolean
 }
 
+interface SearchResponseCache {
+  query: string
+  provider: SearchProvider
+  objects: NpmSearchResult[]
+  totalUnlimited: number
+  total: number
+}
+
 export function useSearch(
   query: MaybeRefOrGetter<string>,
   searchProvider: MaybeRefOrGetter<SearchProvider>,
@@ -38,12 +50,7 @@ export function useSearch(
     checkUserExists: checkUserNpm,
   } = useNpmSearch()
 
-  const cache = shallowRef<{
-    query: string
-    provider: SearchProvider
-    objects: NpmSearchResult[]
-    total: number
-  } | null>(null)
+  const cache = shallowRef<SearchResponseCache | null>(null)
 
   const isLoadingMore = shallowRef(false)
   const isRateLimited = shallowRef(false)
@@ -54,6 +61,23 @@ export function useSearch(
   const existenceCache = shallowRef<Record<string, boolean>>({})
   const suggestionRequestId = shallowRef(0)
 
+  function setCache(objects: NpmSearchResult[] | null, total: number = 0): void {
+    if (objects === null) {
+      cache.value = null
+      return
+    }
+
+    const provider = toValue(searchProvider)
+
+    cache.value = {
+      query: toValue(query),
+      provider,
+      objects,
+      totalUnlimited: total,
+      total: Math.min(total, SEARCH_ENGINE_HITS_LIMIT[provider]),
+    }
+  }
+
   /**
    * Determine which extra checks to include in the Algolia multi-search.
    * Returns `undefined` when nothing uncached needs checking.
@@ -154,7 +178,7 @@ export function useSearch(
       }
 
       const opts = toValue(options)
-      cache.value = null
+      setCache(null)
 
       if (provider === 'algolia') {
         const checks = config.suggestions ? buildAlgoliaChecks(q) : undefined
@@ -197,12 +221,7 @@ export function useSearch(
           return emptySearchPayload()
         }
 
-        cache.value = {
-          query: q,
-          provider,
-          objects: response.objects,
-          total: response.total,
-        }
+        setCache(response.objects, response.total)
 
         isRateLimited.value = false
         return {
@@ -230,25 +249,20 @@ export function useSearch(
     const provider = toValue(searchProvider)
 
     if (!q) {
-      cache.value = null
+      setCache(null)
       return
     }
 
     if (cache.value && (cache.value.query !== q || cache.value.provider !== provider)) {
-      cache.value = null
+      setCache(null)
       await asyncData.refresh()
       return
     }
 
     // Seed cache from asyncData for Algolia (which skips cache on initial fetch)
     if (!cache.value && asyncData.data.value) {
       const { searchResponse } = asyncData.data.value
-      cache.value = {
-        query: q,
-        provider,
-        objects: [...searchResponse.objects],
-        total: searchResponse.total,
-      }
+      setCache([...searchResponse.objects], searchResponse.total)
     }
 
     const currentCount = cache.value?.objects.length ?? 0
@@ -270,25 +284,17 @@ export function useSearch(
       if (cache.value && cache.value.query === q && cache.value.provider === provider) {
         const existingNames = new Set(cache.value.objects.map(obj => obj.package.name))
         const newObjects = response.objects.filter(obj => !existingNames.has(obj.package.name))
-        cache.value = {
-          query: q,
-          provider,
-          objects: [...cache.value.objects, ...newObjects],
-          total: response.total,
-        }
+
+        setCache([...cache.value.objects, ...newObjects], response.total)
       } else {
-        cache.value = {
-          query: q,
-          provider,
-          objects: response.objects,
-          total: response.total,
-        }
+        setCache(response.objects, response.total)
       }
 
       if (
         cache.value &&
         cache.value.objects.length < targetSize &&
-        cache.value.objects.length < cache.value.total
+        cache.value.objects.length < cache.value.total &&
+        cache.value.objects.length < SEARCH_ENGINE_HITS_LIMIT[provider] // additional protection from infinite loop
       ) {
         await fetchMore(targetSize)
       }
@@ -310,7 +316,7 @@ export function useSearch(
   watch(
     () => toValue(searchProvider),
     async () => {
-      cache.value = null
+      setCache(null)
       existenceCache.value = {}
       await asyncData.refresh()
       const targetSize = toValue(options).size
@@ -326,6 +332,7 @@ export function useSearch(
         isStale: false,
         objects: cache.value.objects,
         total: cache.value.total,
+        totalUnlimited: cache.value.totalUnlimited,
         time: new Date().toISOString(),
       }
     }

app/composables/npm/useUserPackages.ts

@@ -1,4 +1,4 @@
-import type { NpmSearchResponse, NpmSearchResult } from '#shared/types'
+import type { NpmSearchResponse, NpmSearchResult, SearchProvider } from '#shared/types'
 import { emptySearchResponse } from './search-utils'
 
 /** Default page size for incremental loading (npm registry path) */
@@ -38,7 +38,7 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
 
   /** Tracks which provider actually served the current data (may differ from
    *  searchProvider when Algolia returns empty and we fall through to npm) */
-  const activeProvider = shallowRef<'npm' | 'algolia'>(searchProviderValue.value)
+  const activeProvider = shallowRef<SearchProvider>(searchProviderValue.value)
 
   const cache = shallowRef<{
     username: string

app/composables/useGlobalSearch.ts

@@ -45,7 +45,7 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   )
 
   // Updates URL when search query changes (immediately for instantSearch or after Enter hit otherwise)
-  const updateUrlQueryImpl = (value: string, provider: 'npm' | 'algolia') => {
+  const updateUrlQueryImpl = (value: string, provider: SearchProvider) => {
     const isSameQuery = route.query.q === value && route.query.p === provider
     // Don't navigate away from pages that use ?q for local filtering
     if ((pagesWithLocalFilter.has(route.name as string) && place === 'content') || isSameQuery) {

app/composables/useSettings.ts

@@ -2,15 +2,13 @@ import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { ACCENT_COLORS } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
+import type { SearchProvider } from '#shared/types'
 import { BACKGROUND_THEMES } from '#shared/utils/constants'
 
 type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
 type AccentColorId = keyof typeof ACCENT_COLORS.light
 
-/** Available search providers */
-export type SearchProvider = 'npm' | 'algolia'
-
 /**
  * Application settings stored in localStorage
  */

app/pages/search.vue

@@ -252,6 +252,19 @@ const effectiveTotal = computed(() => {
   return displayResults.value.length
 })
 
+const resultsLimitAppliedText = computed<string>(() => {
+  console.log(effectiveTotal.value, visibleResults.value?.totalUnlimited)
+  if (isRelevanceSort.value && effectiveTotal.value < visibleResults.value?.totalUnlimited) {
+    const total = { total: $n(visibleResults.value?.totalUnlimited) }
+
+    return searchProvider.value === 'npm'
+      ? $t('search.more_results_available_npm', total)
+      : $t('search.more_results_available_algolia', total)
+  }
+  // do not show hint if results limit is not reached
+  return ''
+})
+
 // Handle filter chip removal
 function handleClearFilter(chip: FilterChip) {
   clearFilter(chip)
@@ -784,12 +797,19 @@ onBeforeUnmount(() => {
                   effectiveTotal,
                 )
               }}
+              <TooltipApp
+                v-if="resultsLimitAppliedText"
+                position="top"
+                :text="resultsLimitAppliedText"
+              >
+                <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
+              </TooltipApp>
             </p>
           </div>
 
           <div v-else-if="status === 'success' || status === 'error'" class="py-12">
             <p class="text-fg-muted font-mono mb-6 text-center">
-              {{ $t('search.no_results', { query }) }}
+              {{ $t('search.no_results', { query: committedQuery }) }}
             </p>
 
             <div v-if="validatedSuggestions.length > 0" class="max-w-md mx-auto mb-6 space-y-3">

i18n/locales/en.json

@@ -71,7 +71,9 @@
     "instant_search_off": "off",
     "instant_search_turn_on": "turn on",
     "instant_search_turn_off": "turn off",
-    "instant_search_advisory": "{label} {state} — {action}"
+    "instant_search_advisory": "{label} {state} — {action}",
+    "more_results_available_npm": "There are {total} results for this search, but npm registry limits search output. Refine your query to narrow results.",
+    "more_results_available_algolia": "There are {total} results for this search. Algolia search is capped at 1,000 — switch to npm Registry for up to 5,000 results, or refine your query."
   },
   "nav": {
     "main_navigation": "Main",