fix: adapt instant search into user preferences

Author: gusa4grr

app/app.vue

@@ -48,14 +48,14 @@ if (import.meta.server) {
 }
 
 const keyboardShortcuts = useKeyboardShortcuts()
-const { settings } = useSettings()
+const instantSearch = useInstantSearch()
 
 onKeyDown(
   '/',
   e => {
     if (e.ctrlKey) {
       e.preventDefault()
-      settings.value.instantSearch = !settings.value.instantSearch
+      instantSearch.value = !instantSearch.value
       return
     }
 

app/components/InstantSearch.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { useSettings } from '~/composables/useSettings'
-
-const { settings } = useSettings()
+const instantSearch = useInstantSearch()
 
 onPrehydrate(el => {
-  const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const enabled = settingsSaved.instantSearch
+  let userPreferences: Record<string, unknown> = {}
+
+  try {
+    userPreferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  } catch {}
+
+  const enabled = userPreferences.instantSearch
   if (enabled === false) {
     el.querySelector('[data-instant-search-on]')!.className = 'hidden'
     el.querySelector('[data-instant-search-off]')!.className = ''
@@ -20,7 +23,7 @@ onPrehydrate(el => {
       style="font-size: 0.8em"
       aria-hidden="true"
     />
-    <span data-instant-search-on :class="settings.instantSearch ? '' : 'hidden'">
+    <span data-instant-search-on :class="instantSearch ? '' : 'hidden'">
       <i18n-t keypath="search.instant_search_advisory">
         <template #label>
           {{ $t('search.instant_search') }}
@@ -29,13 +32,13 @@ onPrehydrate(el => {
           <strong>{{ $t('search.instant_search_on') }}</strong>
         </template>
         <template #action>
-          <button type="button" class="underline" @click="settings.instantSearch = false">
+          <button type="button" class="underline" @click="instantSearch = false">
             {{ $t('search.instant_search_turn_off') }}
           </button>
         </template>
       </i18n-t>
     </span>
-    <span data-instant-search-off :class="settings.instantSearch ? 'hidden' : ''">
+    <span data-instant-search-off :class="instantSearch ? 'hidden' : ''">
       <i18n-t keypath="search.instant_search_advisory">
         <template #label>
           {{ $t('search.instant_search') }}
@@ -44,7 +47,7 @@ onPrehydrate(el => {
           <strong>{{ $t('search.instant_search_off') }}</strong>
         </template>
         <template #action>
-          <button type="button" class="underline" @click="settings.instantSearch = true">
+          <button type="button" class="underline" @click="instantSearch = true">
             {{ $t('search.instant_search_turn_on') }}
           </button>
         </template>

app/composables/useGlobalSearch.ts

@@ -5,7 +5,7 @@ import { debounce } from 'perfect-debounce'
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
-  const { settings } = useSettings()
+  const instantSearch = useInstantSearch()
   const { searchProvider } = useSearchProvider()
   const searchProviderValue = computed(() => {
     const p = normalizeSearchParam(route.query.p)
@@ -29,7 +29,7 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
 
   // This is basically doing instant search as user types
   watch(searchQuery, val => {
-    if (settings.value.instantSearch) {
+    if (instantSearch.value) {
       committedSearchQuery.value = val
     }
   })
@@ -77,7 +77,7 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
     // Commit the current query when explicitly submitted (Enter pressed)
     committedSearchQuery.value = searchQuery.value
     // When instant search is off the debounce queue is empty, so call directly
-    if (!settings.value.instantSearch) {
+    if (!instantSearch.value) {
       updateUrlQueryImpl(searchQuery.value, searchProvider.value)
     } else {
       updateUrlQuery.flush()
@@ -91,7 +91,7 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
 
       // When instant search is off, skip debounced URL updates
       // Only explicitly called flushUpdateUrlQuery commits and navigates
-      if (!settings.value.instantSearch) return
+      if (!instantSearch.value) return
 
       // Leading debounce implementation as it doesn't work properly out of the box (https://github.com/unjs/perfect-debounce/issues/43)
       if (!updateUrlQuery.isPending()) {

app/composables/userPreferences/useInstantSearch.ts

@@ -0,0 +1,10 @@
+export const useInstantSearch = createSharedComposable(function useInstantSearch() {
+  const { preferences } = useUserPreferencesState()
+
+  return computed({
+    get: () => preferences.value.instantSearch ?? true,
+    set: (value: boolean) => {
+      preferences.value.instantSearch = value
+    },
+  })
+})

app/pages/settings.vue

@@ -262,7 +262,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             <SettingsToggle
               :label="$t('settings.instant_search')"
               :description="$t('settings.instant_search_description')"
-              v-model="settings.instantSearch"
+              v-model="preferences.instantSearch"
             />
           </div>
         </section>

shared/schemas/userPreferences.ts

@@ -28,6 +28,8 @@ export const UserPreferencesSchema = object({
   searchProvider: optional(SearchProviderSchema),
   /** Whether keyboard shortcuts are enabled globally */
   keyboardShortcuts: optional(boolean()),
+  /** Whether search runs as user types (vs requiring explicit submit) */
+  instantSearch: optional(boolean()),
   /** Timestamp of last update (ISO 8601) - managed by server */
   updatedAt: optional(string()),
 })
@@ -53,6 +55,7 @@ export const DEFAULT_USER_PREFERENCES: Required<Omit<UserPreferences, 'updatedAt
   colorModePreference: null,
   searchProvider: import.meta.test ? 'npm' : 'algolia',
   keyboardShortcuts: true,
+  instantSearch: true,
 }
 
 export const USER_PREFERENCES_STORAGE_BASE = 'npmx-kv-user-preferences'