chore: add searchProviderValue to useSearchProvider

app/components/SearchProviderToggle.client.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
 const router = useRouter()
-const { searchProvider } = useSearchProvider()
-const searchProviderValue = computed(() => {
-  const p = normalizeSearchParam(route.query.p)
-  if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
-  return 'algolia'
-})
+const { searchProvider, searchProviderValue } = useSearchProvider()
 
 const isOpen = shallowRef(false)
 const toggleRef = useTemplateRef('toggleRef')

app/composables/npm/useOrgPackages.ts

@@ -10,13 +10,7 @@ import { mapWithConcurrency } from '#shared/utils/async'
  * 3. Falls back to lightweight server-side package-meta lookups
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
-  const route = useRoute()
-  const { searchProvider } = useSearchProvider()
-  const searchProviderValue = computed(() => {
-    const p = normalizeSearchParam(route.query.p)
-    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
-    return 'algolia'
-  })
+  const { searchProviderValue } = useSearchProvider()
   const { getPackagesByName } = useAlgoliaSearch()
 
   const asyncData = useLazyAsyncData(

app/composables/npm/useUserPackages.ts

@@ -21,13 +21,7 @@ const MAX_RESULTS = 250
  * ```
  */
 export function useUserPackages(username: MaybeRefOrGetter<string>) {
-  const route = useRoute()
-  const { searchProvider } = useSearchProvider()
-  const searchProviderValue = computed(() => {
-    const p = normalizeSearchParam(route.query.p)
-    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
-    return 'algolia'
-  })
+  const { searchProviderValue } = useSearchProvider()
   // this is only used in npm path, but we need to extract it when the composable runs
   const { $npmRegistry } = useNuxtApp()
   const { searchByMaintainer } = useAlgoliaSearch()

app/composables/useGlobalSearch.ts

@@ -8,12 +8,7 @@ const SEARCH_DEBOUNCE_MS = 100
 
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { settings } = useSettings()
-  const { searchProvider } = useSearchProvider()
-  const searchProviderValue = computed(() => {
-    const p = normalizeSearchParam(route.query.p)
-    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
-    return 'algolia'
-  })
+  const { searchProvider, searchProviderValue } = useSearchProvider()
 
   const router = useRouter()
   const route = useRoute()

app/composables/useSettings.ts

@@ -200,6 +200,7 @@ export function useAccentColor() {
  * Composable for managing the search provider setting.
  */
 export function useSearchProvider() {
+  const route = useRoute()
   const { settings } = useSettings()
   const isMounted = useMounted()
 
@@ -210,14 +211,21 @@ export function useSearchProvider() {
     },
   })
 
-  const isAlgolia = computed(() => searchProvider.value === 'algolia')
+  const searchProviderValue = computed(() => {
+    const p = normalizeSearchParam(route.query.p)
+    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+    return 'algolia'
+  })
+
+  const isAlgolia = computed(() => searchProviderValue.value === 'algolia')
 
   function toggle() {
     searchProvider.value = searchProvider.value === 'npm' ? 'algolia' : 'npm'
   }
 
   return {
     searchProvider,
+    searchProviderValue,
     isAlgolia,
     toggle,
   }