fix: search results limit

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

@@ -1,4 +1,4 @@
-import type { NpmSearchResponse, NpmSearchResult, PackageMetaResponse } from '#shared/types'
+import type { NpmSearchResult, PackageMetaResponse, SearchResponse } from '#shared/types'
 
 export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult {
   return {
@@ -20,21 +20,16 @@ export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult {
   }
 }
 
-export function emptySearchResponse(): NpmSearchResponse {
+export function emptySearchResponse(): SearchResponse {
   return {
     objects: [],
+    totalUnlimited: 0,
     total: 0,
     isStale: false,
     time: new Date().toISOString(),
   }
 }
 
-export interface SearchSuggestion {
-  type: 'user' | 'org'
-  name: string
-  exists: boolean
-}
-
 export type SuggestionIntent = 'user' | 'org' | 'both' | null
 
 export function isValidNpmName(name: string): boolean {

app/composables/npm/useAlgoliaSearch.ts

@@ -3,7 +3,7 @@ import {
   liteClient as algoliasearch,
   type LiteClient,
   type SearchQuery,
-  type SearchResponse,
+  type SearchResponse as AlgoliaSearchResponse,
 } from 'algoliasearch/lite'
 
 let _searchClient: LiteClient | null = null
@@ -157,7 +157,7 @@ export function useAlgoliaSearch() {
       ],
     })
 
-    const response = results[0] as SearchResponse<AlgoliaHit> | undefined
+    const response = results[0] as AlgoliaSearchResponse<AlgoliaHit> | undefined
     if (!response) {
       throw new Error('Algolia returned an empty response')
     }
@@ -202,7 +202,7 @@ export function useAlgoliaSearch() {
         ],
       })
 
-      const response = results[0] as SearchResponse<AlgoliaHit> | undefined
+      const response = results[0] as AlgoliaSearchResponse<AlgoliaHit> | undefined
       if (!response) break
 
       serverTotal = response.nbHits ?? 0
@@ -318,7 +318,7 @@ export function useAlgoliaSearch() {
 
     const { results } = await client.search({ requests })
 
-    const mainResponse = results[0] as SearchResponse<AlgoliaHit> | undefined
+    const mainResponse = results[0] as AlgoliaSearchResponse<AlgoliaHit> | undefined
     if (!mainResponse) {
       throw new Error('Algolia returned an empty response')
     }
@@ -332,21 +332,23 @@ export function useAlgoliaSearch() {
 
     let orgExists = false
     if (orgQueryIndex >= 0 && checks?.name) {
-      const orgResponse = results[orgQueryIndex] as SearchResponse<AlgoliaHit> | undefined
+      const orgResponse = results[orgQueryIndex] as AlgoliaSearchResponse<AlgoliaHit> | undefined
       const scopePrefix = `@${checks.name.toLowerCase()}/`
       orgExists =
         orgResponse?.hits?.some(h => h.name?.toLowerCase().startsWith(scopePrefix)) ?? false
     }
 
     let userExists = false
     if (userQueryIndex >= 0) {
-      const userResponse = results[userQueryIndex] as SearchResponse<AlgoliaHit> | undefined
+      const userResponse = results[userQueryIndex] as AlgoliaSearchResponse<AlgoliaHit> | undefined
       userExists = (userResponse?.nbHits ?? 0) > 0
     }
 
     let packageExists: boolean | null = null
     if (packageQueryIndex >= 0) {
-      const pkgResponse = results[packageQueryIndex] as SearchResponse<AlgoliaHit> | undefined
+      const pkgResponse = results[packageQueryIndex] as
+        | AlgoliaSearchResponse<AlgoliaHit>
+        | undefined
       packageExists = (pkgResponse?.nbHits ?? 0) > 0
     }