fix: hydration mismatch for search and setting page

- fix empty page rendered when search provider is npm in localstorage

Author: gusa4grr

app/composables/atproto/useAtproto.ts

@@ -14,7 +14,7 @@ declare global {
   var __useAtprotoMock: UseAtprotoReturn | undefined
 }
 
-function _useAtprotoImpl(): UseAtprotoReturn {
+function useAtprotoImpl(): UseAtprotoReturn {
   if (import.meta.test && globalThis.__useAtprotoMock) {
     return globalThis.__useAtprotoMock
   }
@@ -39,8 +39,6 @@ function _useAtprotoImpl(): UseAtprotoReturn {
   return { user, pending, logout }
 }
 
-// In tests, skip createSharedComposable so each call checks globalThis.__useAtprotoMock fresh.
-// In production, import.meta.test is false and the test branch is tree-shaken.
-export const useAtproto = import.meta.test
-  ? _useAtprotoImpl
-  : createSharedComposable(_useAtprotoImpl)
+export const useAtproto: () => UseAtprotoReturn = import.meta.test
+  ? useAtprotoImpl
+  : createSharedComposable(useAtprotoImpl)

app/composables/npm/useSearch.ts

@@ -138,6 +138,23 @@ export function useSearch(
     suggestionsLoading.value = false
   }
 
+  // Bridge SSR payload when provider differs between server and client.
+  // SSR always uses the default provider ('algolia'), but the client may
+  // read a different provider from localStorage. Copy the SSR data to the
+  // client's cache key so useLazyAsyncData can hydrate without a mismatch.
+  if (import.meta.client) {
+    const nuxtApp = useNuxtApp()
+    const q = toValue(query)
+    const provider = toValue(searchProvider)
+    if (nuxtApp.isHydrating && q && provider !== 'algolia') {
+      const ssrKey = `search:algolia:${q}`
+      const clientKey = `search:${provider}:${q}`
+      if (nuxtApp.payload.data[ssrKey] && !nuxtApp.payload.data[clientKey]) {
+        nuxtApp.payload.data[clientKey] = nuxtApp.payload.data[ssrKey]
+      }
+    }
+  }
+
   const asyncData = useLazyAsyncData(
     () => `search:${toValue(searchProvider)}:${toValue(query)}`,
     async (_nuxtApp, { signal }) => {

app/composables/useUserPreferencesProvider.ts

@@ -40,6 +40,8 @@ function createProvider(defaultValue: HydratedUserPreferences) {
 
   async function initSync(): Promise<void> {
     if (syncInitialized || import.meta.server) return
+    const { applyStoredColorMode } = useColorModePreference()
+
     syncInitialized = true
 
     // Resolve auth + sync dependencies lazily
@@ -105,6 +107,8 @@ function createProvider(defaultValue: HydratedUserPreferences) {
       await syncWithServer()
     }
 
+    applyStoredColorMode()
+
     watch(
       preferences,
       newPrefs => {

app/pages/settings.vue

@@ -238,26 +238,40 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
                 </template>
               </ClientOnly>
 
-              <!-- Provider description -->
-              <p class="text-xs text-fg-subtle mt-2">
-                {{
-                  preferences.searchProvider === 'algolia'
-                    ? $t('settings.data_source.algolia_description')
-                    : $t('settings.data_source.npm_description')
-                }}
-              </p>
-
-              <!-- Algolia attribution -->
-              <a
-                v-if="preferences.searchProvider === 'algolia'"
-                href="https://www.algolia.com/developers"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg-muted transition-colors mt-2"
-              >
-                {{ $t('search.algolia_disclaimer') }}
-                <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
-              </a>
+              <!-- Provider description & Algolia attribution -->
+              <ClientOnly>
+                <p class="text-xs text-fg-subtle mt-2">
+                  {{
+                    preferences.searchProvider === 'algolia'
+                      ? $t('settings.data_source.algolia_description')
+                      : $t('settings.data_source.npm_description')
+                  }}
+                </p>
+                <a
+                  v-if="preferences.searchProvider === 'algolia'"
+                  href="https://www.algolia.com/developers"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg-muted transition-colors mt-2"
+                >
+                  {{ $t('search.algolia_disclaimer') }}
+                  <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
+                </a>
+                <template #fallback>
+                  <p class="text-xs text-fg-subtle mt-2">
+                    {{ $t('settings.data_source.algolia_description') }}
+                  </p>
+                  <a
+                    href="https://www.algolia.com/developers"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg-muted transition-colors mt-2"
+                  >
+                    {{ $t('search.algolia_disclaimer') }}
+                    <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
+                  </a>
+                </template>
+              </ClientOnly>
             </div>
 
             <div class="border-t border-border my-4" />

app/plugins/preferences-sync.client.ts

@@ -1,13 +1,7 @@
 export default defineNuxtPlugin({
   name: 'preferences-sync',
   setup() {
-    const { initSync } = useInitUserPreferencesSync()
-    const { applyStoredColorMode } = useColorModePreference()
-
-    // Apply stored color mode preference early (before components mount)
-    applyStoredColorMode()
-
     // Initialize server sync for authenticated users
-    initSync()
+    void useInitUserPreferencesSync().initSync()
   },
 })