fix: update provider detection logic

Author: alexdln

app/components/Header/SearchBox.vue

@@ -16,13 +16,11 @@ const emit = defineEmits(['blur', 'focus'])
 const router = useRouter()
 const route = useRoute()
 const { searchProvider } = useSearchProvider()
-// The actual search provider (from URL, used for API calls)
-const searchProviderParam = computed(() => {
+const searchProviderValue = computed(() => {
   const p = normalizeSearchParam(route.query.p)
-  if (!p && searchProvider.value === 'npm') return 'npm'
-  return p === 'npm' ? 'npm' : 'algolia'
+  if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+  return 'algolia'
 })
-const searchProviderValue = computed(() => searchProviderParam.value || searchProvider.value)
 
 const isSearchFocused = shallowRef(false)
 

app/components/SearchProviderToggle.client.vue

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

app/composables/npm/useOrgPackages.ts

@@ -11,12 +11,12 @@ import { mapWithConcurrency } from '#shared/utils/async'
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   const route = useRoute()
-  const searchProviderParam = computed(() => {
+  const { searchProvider } = useSearchProvider()
+  const searchProviderValue = computed(() => {
     const p = normalizeSearchParam(route.query.p)
-    return p === 'npm' ? 'npm' : 'algolia'
+    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+    return 'algolia'
   })
-  const { searchProvider } = useSearchProvider()
-  const searchProviderValue = computed(() => searchProviderParam.value || searchProvider.value)
   const { getPackagesByName } = useAlgoliaSearch()
 
   const asyncData = useLazyAsyncData(

app/composables/npm/useUserPackages.ts

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

app/pages/search.vue

@@ -10,13 +10,12 @@ import { normalizeSearchParam } from '#shared/utils/url'
 const route = useRoute()
 const router = useRouter()
 
-// The actual search provider (from URL, used for API calls)
-const searchProviderParam = computed(() => {
+const { searchProvider } = useSearchProvider()
+const searchProviderValue = computed(() => {
   const p = normalizeSearchParam(route.query.p)
-  return p === 'npm' ? 'npm' : 'algolia'
+  if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+  return 'algolia'
 })
-const { searchProvider } = useSearchProvider()
-const searchProviderValue = computed(() => searchProviderParam.value || searchProvider.value)
 
 // Preferences (persisted to localStorage)
 const {