fix: refine and improve

Author: danielroe

app/components/SearchProviderToggle.client.vue

@@ -17,16 +17,15 @@ useEventListener('keydown', event => {
 
 <template>
   <div ref="toggleRef" class="relative">
-    <button
-      type="button"
-      class="flex items-center justify-center w-8 h-8 rounded-md text-fg-subtle hover:text-fg hover:bg-bg-elevated transition-colors duration-200 focus-visible:outline-accent/70"
+    <ButtonBase
       :aria-label="$t('settings.search_provider')"
       :aria-expanded="isOpen"
       aria-haspopup="true"
+      size="small"
+      class="border-none w-8 h-8 !px-0 justify-center"
+      classicon="i-carbon:settings"
       @click="isOpen = !isOpen"
-    >
-      <span class="i-carbon:settings w-4 h-4" aria-hidden="true" />
-    </button>
+    />
 
     <Transition
       enter-active-class="transition-all duration-150"

app/composables/npm/useAlgoliaSearch.ts

@@ -6,18 +6,15 @@ import {
 } from 'algoliasearch/lite'
 
 /**
- * Algolia search client for npm packages.
- * Credentials and index name come from runtimeConfig.public.algolia.
+ * Singleton Algolia client, keyed by appId to handle config changes.
  */
 let _searchClient: LiteClient | null = null
 let _configuredAppId: string | null = null
 
-function getAlgoliaClient(): LiteClient {
-  const { algolia } = useRuntimeConfig().public
-  // Re-create client if app ID changed (shouldn't happen, but be safe)
-  if (!_searchClient || _configuredAppId !== algolia.appId) {
-    _searchClient = algoliasearch(algolia.appId, algolia.apiKey)
-    _configuredAppId = algolia.appId
+function getOrCreateClient(appId: string, apiKey: string): LiteClient {
+  if (!_searchClient || _configuredAppId !== appId) {
+    _searchClient = algoliasearch(appId, apiKey)
+    _configuredAppId = appId
   }
   return _searchClient
 }
@@ -125,92 +122,111 @@ export interface AlgoliaSearchOptions {
 }
 
 /**
- * Search npm packages via Algolia.
- * Returns results in the same NpmSearchResponse format as the npm registry API.
- */
-export async function searchAlgolia(
-  query: string,
-  options: AlgoliaSearchOptions = {},
-): Promise<NpmSearchResponse> {
-  const client = getAlgoliaClient()
-
-  const { results } = await client.search([
-    {
-      indexName: 'npm-search',
-      params: {
-        query,
-        offset: options.from,
-        length: options.size,
-        filters: options.filters || '',
-        analyticsTags: ['npmx.dev'],
-        attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE,
-        attributesToHighlight: [],
-      },
-    },
-  ])
-
-  const response = results[0] as SearchResponse<AlgoliaHit>
-
-  return {
-    isStale: false,
-    objects: response.hits.map(hitToSearchResult),
-    total: response.nbHits!,
-    time: new Date().toISOString(),
-  }
-}
-
-/**
- * Fetch all packages in an Algolia scope (org or user).
- * Uses facet filters for efficient server-side filtering.
+ * Composable that provides Algolia search functions for npm packages.
  *
- * For orgs: filters by `owner.name:orgname` which matches scoped packages.
- * For users: filters by `owner.name:username` which matches maintainer.
+ * Must be called during component setup (or inside another composable)
+ * because it reads from `useRuntimeConfig()`. The returned functions
+ * are safe to call at any time (event handlers, async callbacks, etc.).
  */
-export async function searchAlgoliaByOwner(
-  ownerName: string,
-  options: { maxResults?: number } = {},
-): Promise<NpmSearchResponse> {
-  const client = getAlgoliaClient()
-  const max = options.maxResults ?? 1000
-
-  const allHits: AlgoliaHit[] = []
-  let offset = 0
-  const batchSize = 200
-
-  // Algolia supports up to 1000 results per query with offset/length pagination
-  while (offset < max) {
-    const length = Math.min(batchSize, max - offset)
-
+export function useAlgoliaSearch() {
+  const { algolia } = useRuntimeConfig().public
+  const client = getOrCreateClient(algolia.appId, algolia.apiKey)
+  const indexName = algolia.indexName
+
+  /**
+   * Search npm packages via Algolia.
+   * Returns results in the same NpmSearchResponse format as the npm registry API.
+   */
+  async function search(
+    query: string,
+    options: AlgoliaSearchOptions = {},
+  ): Promise<NpmSearchResponse> {
     const { results } = await client.search([
       {
-        indexName: 'npm-search',
+        indexName,
         params: {
-          query: '',
-          offset,
-          length,
-          filters: `owner.name:${ownerName}`,
+          query,
+          offset: options.from,
+          length: options.size,
+          filters: options.filters || '',
           analyticsTags: ['npmx.dev'],
           attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE,
           attributesToHighlight: [],
         },
       },
     ])
 
-    const response = results[0] as SearchResponse<AlgoliaHit>
-    allHits.push(...response.hits)
+    const response = results[0] as SearchResponse<AlgoliaHit> | undefined
+    if (!response) {
+      return { isStale: false, objects: [], total: 0, time: new Date().toISOString() }
+    }
+
+    return {
+      isStale: false,
+      objects: response.hits.map(hitToSearchResult),
+      total: response.nbHits ?? 0,
+      time: new Date().toISOString(),
+    }
+  }
+
+  /**
+   * Fetch all packages for an Algolia owner (org or user).
+   * Uses `owner.name` filter for efficient server-side filtering.
+   */
+  async function searchByOwner(
+    ownerName: string,
+    options: { maxResults?: number } = {},
+  ): Promise<NpmSearchResponse> {
+    const max = options.maxResults ?? 1000
+
+    const allHits: AlgoliaHit[] = []
+    let offset = 0
+    const batchSize = 200
+
+    // Algolia supports up to 1000 results per query with offset/length pagination
+    while (offset < max) {
+      const length = Math.min(batchSize, max - offset)
+
+      const { results } = await client.search([
+        {
+          indexName,
+          params: {
+            query: '',
+            offset,
+            length,
+            filters: `owner.name:${ownerName}`,
+            analyticsTags: ['npmx.dev'],
+            attributesToRetrieve: ATTRIBUTES_TO_RETRIEVE,
+            attributesToHighlight: [],
+          },
+        },
+      ])
+
+      const response = results[0] as SearchResponse<AlgoliaHit> | undefined
+      if (!response) break
 
-    // If we got fewer than requested, we've exhausted all results
-    if (response.hits.length < length || allHits.length >= response.nbHits!) {
-      break
+      allHits.push(...response.hits)
+
+      // If we got fewer than requested, we've exhausted all results
+      if (response.hits.length < length || allHits.length >= (response.nbHits ?? 0)) {
+        break
+      }
+
+      offset += length
     }
 
-    offset += length
+    return {
+      isStale: false,
+      objects: allHits.map(hitToSearchResult),
+      total: allHits.length,
+      time: new Date().toISOString(),
+    }
   }
 
   return {
-    isStale: false,
-    objects: allHits.map(hitToSearchResult),
-    total: allHits.length,
-    time: new Date().toISOString(),
+    /** Search packages by text query */
+    search,
+    /** Fetch all packages for an owner (org or user) */
+    searchByOwner,
   }
 }

app/composables/npm/useNpmSearch.ts

@@ -6,7 +6,6 @@ import type {
   MinimalPackument,
 } from '#shared/types'
 import type { SearchProvider } from '~/composables/useSettings'
-import { searchAlgolia } from './useAlgoliaSearch'
 
 /**
  * Convert packument to search result format for display
@@ -58,6 +57,7 @@ export function useNpmSearch(
 ) {
   const { $npmRegistry } = useNuxtApp()
   const { searchProvider } = useSearchProvider()
+  const { search: searchAlgolia } = useAlgoliaSearch()
 
   // Client-side cache
   const cache = shallowRef<{

app/composables/npm/useOrgPackages.ts

@@ -1,7 +1,6 @@
 import type { NuxtApp } from '#app'
 import type { NpmSearchResponse, NpmSearchResult, MinimalPackument } from '#shared/types'
 import { emptySearchResponse, packumentToSearchResult } from './useNpmSearch'
-import { searchAlgoliaByOwner } from './useAlgoliaSearch'
 import { mapWithConcurrency } from '#shared/utils/async'
 
 /**
@@ -86,6 +85,7 @@ async function fetchBulkDownloads(
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   const { searchProvider } = useSearchProvider()
+  const { searchByOwner } = useAlgoliaSearch()
 
   const asyncData = useLazyAsyncData(
     () => `org-packages:${searchProvider.value}:${toValue(orgName)}`,
@@ -98,7 +98,7 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
       // --- Algolia fast path ---
       if (searchProvider.value === 'algolia') {
         try {
-          return await searchAlgoliaByOwner(org)
+          return await searchByOwner(org)
         } catch {
           // Fall through to npm registry path on Algolia failure
         }

app/composables/npm/useUserPackages.ts

@@ -1,6 +1,5 @@
 import type { NpmSearchResponse, NpmSearchResult } from '#shared/types'
 import { emptySearchResponse } from './useNpmSearch'
-import { searchAlgoliaByOwner } from './useAlgoliaSearch'
 
 /** Default page size for incremental loading (npm registry path) */
 const PAGE_SIZE = 50 as const
@@ -25,6 +24,7 @@ const MAX_RESULTS = 250
 export function useUserPackages(username: MaybeRefOrGetter<string>) {
   const { searchProvider } = useSearchProvider()
   const { $npmRegistry } = useNuxtApp()
+  const { searchByOwner } = useAlgoliaSearch()
 
   // --- Incremental loading state (npm path) ---
   const currentPage = shallowRef(1)
@@ -50,7 +50,13 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
       // --- Algolia: fetch all at once ---
       if (provider === 'algolia') {
         try {
-          const response = await searchAlgoliaByOwner(user)
+          const response = await searchByOwner(user)
+
+          // Guard against stale response (user/provider changed during await)
+          if (user !== toValue(username) || provider !== searchProvider.value) {
+            return emptySearchResponse
+          }
+
           cache.value = {
             username: user,
             objects: response.objects,
@@ -76,6 +82,11 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
         60,
       )
 
+      // Guard against stale response (user/provider changed during await)
+      if (user !== toValue(username) || provider !== searchProvider.value) {
+        return emptySearchResponse
+      }
+
       cache.value = {
         username: user,
         objects: response.objects,
@@ -89,7 +100,8 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
   // --- Fetch more (npm path only) ---
   async function fetchMore(): Promise<void> {
     const user = toValue(username)
-    if (!user || searchProvider.value !== 'npm') return
+    const provider = searchProvider.value
+    if (!user || provider !== 'npm') return
 
     if (cache.value && cache.value.username !== user) {
       cache.value = null
@@ -119,6 +131,9 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
         60,
       )
 
+      // Guard against stale response
+      if (user !== toValue(username) || provider !== searchProvider.value) return
+
       if (cache.value && cache.value.username === user) {
         const existingNames = new Set(cache.value.objects.map(obj => obj.package.name))
         const newObjects = response.objects.filter(obj => !existingNames.has(obj.package.name))

app/pages/search.vue

@@ -9,9 +9,6 @@ import { normalizeSearchParam } from '#shared/utils/url'
 const route = useRoute()
 const router = useRouter()
 
-// Search provider
-const { isAlgolia } = useSearchProvider()
-
 // Preferences (persisted to localStorage)
 const {
   viewMode,
@@ -760,15 +757,6 @@ defineOgImageComponent('Default', {
               <span v-if="status === 'pending'" class="text-fg-subtle">{{
                 $t('search.updating')
               }}</span>
-              <a
-                v-if="isAlgolia"
-                href="https://www.algolia.com/developers"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg-muted text-xs ms-2"
-              >
-                {{ $t('search.algolia_disclaimer') }}
-              </a>
             </p>
             <!-- Show "x of y packages" (paginated/table mode only) -->
             <p