fix: add search provider to user-preferences

Author: gusa4grr

app/composables/useUserPreferences.ts

@@ -4,6 +4,7 @@ import {
   type AccentColorId,
   type BackgroundThemeId,
   type ColorModePreference,
+  type SearchProvider,
 } from '#shared/schemas/userPreferences'
 
 /**
@@ -87,6 +88,32 @@ export function useBackgroundTheme() {
   }
 }
 
+/**
+ * Composable for managing the search provider preference.
+ */
+export function useSearchProvider() {
+  const { preferences } = useUserPreferences()
+
+  const searchProvider = computed({
+    get: () => preferences.value.searchProvider ?? 'algolia',
+    set: (value: SearchProvider) => {
+      preferences.value.searchProvider = value
+    },
+  })
+
+  const isAlgolia = computed(() => searchProvider.value === 'algolia')
+
+  function toggle() {
+    searchProvider.value = searchProvider.value === 'npm' ? 'algolia' : 'npm'
+  }
+
+  return {
+    searchProvider,
+    isAlgolia,
+    toggle,
+  }
+}
+
 /**
  * Composable for syncing color mode preference.
  * Keeps the user preference in sync with @nuxtjs/color-mode's own LS key (`npmx-color-mode`)

app/pages/settings.vue

@@ -203,7 +203,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                     { label: $t('settings.data_source.npm'), value: 'npm' },
                     { label: $t('settings.data_source.algolia'), value: 'algolia' },
                   ]"
-                  v-model="settings.searchProvider"
+                  v-model="preferences.searchProvider"
                   block
                   size="sm"
                   class="max-w-48"
@@ -223,15 +223,15 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <!-- Provider description -->
               <p class="text-xs text-fg-subtle mt-2">
                 {{
-                  settings.searchProvider === 'algolia'
+                  preferences.searchProvider === 'algolia'
                     ? $t('settings.data_source.algolia_description')
                     : $t('settings.data_source.npm_description')
                 }}
               </p>
 
               <!-- Algolia attribution -->
               <a
-                v-if="settings.searchProvider === 'algolia'"
+                v-if="preferences.searchProvider === 'algolia'"
                 href="https://www.algolia.com/developers"
                 target="_blank"
                 rel="noopener noreferrer"

shared/schemas/userPreferences.ts

@@ -7,6 +7,8 @@ const BackgroundThemeIdSchema = picklist(Object.keys(BACKGROUND_THEMES) as [stri
 
 const ColorModePreferenceSchema = picklist(['light', 'dark', 'system'])
 
+const SearchProviderSchema = picklist(['npm', 'algolia'])
+
 export const UserPreferencesSchema = object({
   /** Display dates as relative (e.g., "3 days ago") instead of absolute */
   relativeDates: optional(boolean()),
@@ -22,6 +24,8 @@ export const UserPreferencesSchema = object({
   selectedLocale: optional(nullable(string())),
   /** Color mode preference: 'light', 'dark', or 'system' */
   colorModePreference: optional(nullable(ColorModePreferenceSchema)),
+  /** Search provider for package search: 'npm' or 'algolia' */
+  searchProvider: optional(SearchProviderSchema),
   /** Timestamp of last update (ISO 8601) - managed by server */
   updatedAt: optional(string()),
 })
@@ -31,6 +35,7 @@ export type UserPreferences = InferOutput<typeof UserPreferencesSchema>
 export type AccentColorId = keyof typeof ACCENT_COLORS.light
 export type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 export type ColorModePreference = 'light' | 'dark' | 'system'
+export type SearchProvider = 'npm' | 'algolia'
 
 /**
  * Default user preferences.
@@ -44,6 +49,7 @@ export const DEFAULT_USER_PREFERENCES: Required<Omit<UserPreferences, 'updatedAt
   hidePlatformPackages: true,
   selectedLocale: null,
   colorModePreference: null,
+  searchProvider: 'algolia',
 }
 
 export const USER_PREFERENCES_STORAGE_BASE = 'npmx-kv-user-preferences'