fix: support sorting algolia search results

danielroe · danielroe · commit 357c3e44e195 · 2026-02-08T15:58:00.000Z
diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
@@ -30,6 +30,8 @@ const props = defineProps<{
   activeFilters: FilterChip[]
   /** When true, shows search-specific UI (relevance sort, no filters) */
   searchContext?: boolean
+  /** Sort keys to force-disable (e.g. when the current provider doesn't support them) */
+  disabledSortKeys?: SortKey[]
 }>()
 
 const { t } = useI18n()
@@ -58,17 +60,20 @@ const showingFiltered = computed(() => props.filteredCount !== props.totalCount)
 const currentSort = computed(() => parseSortOption(sortOption.value))
 
 // Get available sort keys based on context
+const disabledSet = computed(() => new Set(props.disabledSortKeys ?? []))
+
 const availableSortKeys = computed(() => {
+  const applyDisabled = (k: (typeof SORT_KEYS)[number]) => ({
+    ...k,
+    disabled: k.disabled || disabledSet.value.has(k.key),
+  })
+
   if (props.searchContext) {
-    // In search context: show relevance (enabled) and others (disabled)
-    return SORT_KEYS.filter(k => !k.searchOnly || k.key === 'relevance').map(k =>
-      Object.assign({}, k, {
-        disabled: k.key !== 'relevance',
-      }),
-    )
+    // In search context: show relevance + non-disabled sorts (downloads, updated, name)
+    return SORT_KEYS.filter(k => !k.searchOnly || k.key === 'relevance').map(applyDisabled)
   }
   // In org/user context: hide search-only sorts
-  return SORT_KEYS.filter(k => !k.searchOnly)
+  return SORT_KEYS.filter(k => !k.searchOnly).map(applyDisabled)
 })
 
 // Handle sort key change from dropdown
@@ -182,9 +187,9 @@ function getSortKeyLabelKey(key: SortKey): string {
             </div>
           </div>
 
-          <!-- Sort direction toggle (hidden in search context) -->
+          <!-- Sort direction toggle -->
           <button
-            v-if="!searchContext"
+            v-if="!searchContext || currentSort.key !== 'relevance'"
             type="button"
             class="p-1.5 rounded border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
             :aria-label="$t('filters.sort.toggle_direction')"
diff --git a/app/pages/search.vue b/app/pages/search.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { FilterChip } from '#shared/types/preferences'
+import type { FilterChip, SortKey } from '#shared/types/preferences'
+import { parseSortOption } from '#shared/types/preferences'
 import { onKeyDown } from '@vueuse/core'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
@@ -9,6 +10,10 @@ import { normalizeSearchParam } from '#shared/utils/url'
 const route = useRoute()
 const router = useRouter()
 
+// Search provider
+const { search: algoliaSearch } = useAlgoliaSearch()
+const { isAlgolia } = useSearchProvider()
+
 // Preferences (persisted to localStorage)
 const {
   viewMode,
@@ -45,13 +50,6 @@ onMounted(() => {
 const pageSize = 25
 const currentPage = shallowRef(1)
 
-// 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
-  // Always fetch at least enough for the current page
-  return Math.max(pageSize, currentPage.value * numericPrefSize)
-})
-
 // Get initial page from URL (for scroll restoration on reload)
 const initialPage = computed(() => {
   const p = Number.parseInt(normalizeSearchParam(route.query.page), 10)
@@ -65,18 +63,6 @@ onMounted(() => {
   }
 })
 
-// Use incremental search with client-side caching
-const {
-  data: results,
-  status,
-  isLoadingMore,
-  hasMore,
-  fetchMore,
-  isRateLimited,
-} = useNpmSearch(query, () => ({
-  size: requestedSize.value,
-}))
-
 // Results to display (directly from incremental search)
 const rawVisibleResults = computed(() => results.value)
 
@@ -125,11 +111,27 @@ const visibleResults = computed(() => {
 // Use structured filters for client-side refinement of search results
 const resultsArray = computed(() => visibleResults.value?.objects ?? [])
 
+// Sort keys that the npm registry path doesn't support (only relevance works server-side)
+const NON_RELEVANCE_SORT_KEYS: SortKey[] = [
+  'downloads-week',
+  'downloads-day',
+  'downloads-month',
+  'downloads-year',
+  'updated',
+  'name',
+  'quality',
+  'popularity',
+  'maintenance',
+  'score',
+]
+
+// Disable non-relevance sorts when using npm provider (results are relevance-only from server)
+const disabledSortKeys = computed<SortKey[]>(() => (isAlgolia.value ? [] : NON_RELEVANCE_SORT_KEYS))
+
 // Minimal structured filters usage for search context (no client-side filtering)
 const {
   filters,
   sortOption,
-  sortedPackages,
   availableKeywords,
   activeFilters,
   setTextFilter,
@@ -148,19 +150,90 @@ const {
   initialSort: 'relevance-desc', // Default to search relevance
 })
 
-// Client-side filtered/sorted results for display
-// In search context, we always use server order (relevance) - no client-side filtering
+const isRelevanceSort = computed(
+  () => sortOption.value === 'relevance-desc' || sortOption.value === 'relevance-asc',
+)
+
+// 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)
+  // When sorting by something other than relevance, fetch a large batch from Algolia
+  // so client-side sorting operates on a meaningful pool of matching results
+  if (!isRelevanceSort.value) {
+    return Math.max(base, 250)
+  }
+  return base
+})
+
+// Reset to relevance sort when switching to npm (which only supports relevance)
+watch(isAlgolia, algolia => {
+  if (!algolia && !isRelevanceSort.value) {
+    sortOption.value = 'relevance-desc'
+  }
+})
+
+// Use incremental search with client-side caching
+const {
+  data: results,
+  status,
+  isLoadingMore,
+  hasMore,
+  fetchMore,
+  isRateLimited,
+} = useNpmSearch(query, () => ({
+  size: requestedSize.value,
+}))
+
+// Client-side sorted results for display
+// The search API already handles text filtering, so we only need to sort.
 const displayResults = computed(() => {
-  // When using relevance sort, return original server-sorted results
-  if (sortOption.value === 'relevance-desc' || sortOption.value === 'relevance-asc') {
+  if (isRelevanceSort.value) {
     return resultsArray.value
   }
 
-  return sortedPackages.value
+  // Sort the fetched results client-side (Algolia doesn't support arbitrary
+  // sort orders without replica indices, so we fetch a large batch and sort here)
+  const { key, direction } = parseSortOption(sortOption.value)
+  const multiplier = direction === 'asc' ? 1 : -1
+
+  return [...resultsArray.value].sort((a, b) => {
+    let diff: number
+    switch (key) {
+      case 'downloads-week':
+      case 'downloads-day':
+      case 'downloads-month':
+      case 'downloads-year':
+        diff = (a.downloads?.weekly ?? 0) - (b.downloads?.weekly ?? 0)
+        break
+      case 'updated':
+        diff = new Date(a.package.date).getTime() - new Date(b.package.date).getTime()
+        break
+      case 'name':
+        diff = a.package.name.localeCompare(b.package.name)
+        break
+      default:
+        diff = 0
+    }
+    return diff * multiplier
+  })
 })
 
 const resultCount = computed(() => displayResults.value.length)
 
+/**
+ * The effective total for display and pagination purposes.
+ * When sorting by non-relevance, we're working with a fetched subset (e.g. 250),
+ * not the full Algolia total (e.g. 92,324). Show the actual working set size.
+ */
+const effectiveTotal = computed(() => {
+  if (isRelevanceSort.value) {
+    return visibleResults.value?.total ?? 0
+  }
+  // When sorting, the total is the number of results we actually fetched and sorted
+  return displayResults.value.length
+})
+
 // Handle filter chip removal
 function handleClearFilter(chip: FilterChip) {
   clearFilter(chip)
@@ -316,9 +389,6 @@ interface ValidatedSuggestion {
 /** Cache for existence checks to avoid repeated API calls */
 const existenceCache = ref<Record<string, boolean | 'pending'>>({})
 
-const { search: algoliaSearch } = useAlgoliaSearch()
-const { isAlgolia } = useSearchProvider()
-
 /**
  * Check if an org exists by searching for scoped packages (@orgname/...).
  * When Algolia is active, searches for `@name/` scoped packages via text query.
@@ -773,10 +843,11 @@ defineOgImageComponent('Default', {
               :columns="columns"
               v-model:pagination-mode="paginationMode"
               v-model:page-size="preferredPageSize"
-              :total-count="visibleResults.total"
+              :total-count="effectiveTotal"
               :filtered-count="displayResults.length"
               :available-keywords="availableKeywords"
               :active-filters="activeFilters"
+              :disabled-sort-keys="disabledSortKeys"
               search-context
               @toggle-column="toggleColumn"
               @reset-columns="resetColumns"
@@ -789,24 +860,31 @@ defineOgImageComponent('Default', {
               @update:updated-within="setUpdatedWithin"
               @toggle-keyword="toggleKeyword"
             />
-            <!-- Show "Found X packages" (infinite scroll mode only) -->
+            <!-- Show count status (infinite scroll mode only) -->
             <p
               v-if="viewMode === 'cards' && paginationMode === 'infinite'"
               role="status"
               class="text-fg-muted text-sm mt-4 font-mono"
             >
-              {{
-                $t(
-                  'search.found_packages',
-                  { count: $n(visibleResults.total) },
-                  visibleResults.total,
-                )
-              }}
+              <template v-if="isRelevanceSort">
+                {{
+                  $t(
+                    'search.found_packages',
+                    { count: $n(visibleResults.total) },
+                    visibleResults.total,
+                  )
+                }}
+              </template>
+              <template v-else>
+                {{
+                  $t('search.found_packages_sorted', { count: $n(effectiveTotal) }, effectiveTotal)
+                }}
+              </template>
               <span v-if="status === 'pending'" class="text-fg-subtle">{{
                 $t('search.updating')
               }}</span>
             </p>
-            <!-- Show "x of y packages" (paginated/table mode only) -->
+            <!-- Show "x of y" (paginated/table mode only) -->
             <p
               v-if="viewMode === 'table' || paginationMode === 'paginated'"
               role="status"
@@ -816,11 +894,10 @@ defineOgImageComponent('Default', {
                 $t(
                   'filters.count.showing_paginated',
                   {
-                    pageSize:
-                      preferredPageSize === 'all' ? $n(visibleResults.total) : preferredPageSize,
-                    count: $n(visibleResults.total),
+                    pageSize: preferredPageSize === 'all' ? $n(effectiveTotal) : preferredPageSize,
+                    count: $n(effectiveTotal),
                   },
-                  visibleResults.total,
+                  effectiveTotal,
                 )
               }}
             </p>
@@ -890,7 +967,7 @@ defineOgImageComponent('Default', {
             v-model:mode="paginationMode"
             v-model:page-size="preferredPageSize"
             v-model:current-page="currentPage"
-            :total-items="visibleResults?.total ?? displayResults.length"
+            :total-items="effectiveTotal"
             :view-mode="viewMode"
           />
         </div>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -23,6 +23,7 @@
     "button": "search",
     "searching": "Searching...",
     "found_packages": "No packages found | Found 1 package | Found {count} packages",
+    "found_packages_sorted": "Sorting top {count} result | Sorting top {count} results",
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
     "rate_limited": "Hit npm rate limit, try again in a moment",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
@@ -23,6 +23,7 @@
     "button": "search",
     "searching": "Searching...",
     "found_packages": "No packages found | Found 1 package | Found {count} packages",
+    "found_packages_sorted": "Sorting top {count} result | Sorting top {count} results",
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
     "rate_limited": "Hit npm rate limit, try again in a moment",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
@@ -23,6 +23,7 @@
     "button": "search",
     "searching": "Searching...",
     "found_packages": "No packages found | Found 1 package | Found {count} packages",
+    "found_packages_sorted": "Sorting top {count} result | Sorting top {count} results",
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
     "rate_limited": "Hit npm rate limit, try again in a moment",
