fix: create shared cache for user preferences provier, enhance useAtproto mocking

Author: gusa4grr

app/composables/atproto/useAtproto.ts

@@ -1,4 +1,21 @@
-export const useAtproto = createSharedComposable(function useAtproto() {
+import type { PublicUserSession } from '#shared/schemas/publicUserSession'
+
+export interface UseAtprotoReturn {
+  user: Ref<PublicUserSession | null | undefined>
+  pending: Ref<boolean>
+  logout: () => Promise<void>
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __useAtprotoMock: UseAtprotoReturn | undefined
+}
+
+function _useAtprotoImpl(): UseAtprotoReturn {
+  if (import.meta.test && globalThis.__useAtprotoMock) {
+    return globalThis.__useAtprotoMock
+  }
+
   const {
     data: user,
     pending,
@@ -17,4 +34,10 @@ export const useAtproto = createSharedComposable(function useAtproto() {
   }
 
   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)

app/composables/useUserPreferencesProvider.ts

@@ -11,7 +11,6 @@
  * a ref with defaults (no real localStorage); on the client, there's only one app instance.
  */
 
-import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { DEFAULT_USER_PREFERENCES } from '#shared/schemas/userPreferences'
 import {
@@ -22,56 +21,83 @@ import {
 
 const STORAGE_KEY = 'npmx-user-preferences'
 
-let dataRef: RemovableRef<HydratedUserPreferences> | null = null
+let cached: ReturnType<typeof createProvider> | null = null
 let syncInitialized = false
 
-export function useUserPreferencesProvider(
-  defaultValue: HydratedUserPreferences = DEFAULT_USER_PREFERENCES,
-) {
-  if (!dataRef) {
-    dataRef = useLocalStorage<HydratedUserPreferences>(STORAGE_KEY, defaultValue, {
-      mergeDefaults: true,
-    })
-  }
+function createProvider(defaultValue: HydratedUserPreferences) {
+  const preferences = useLocalStorage<HydratedUserPreferences>(STORAGE_KEY, defaultValue, {
+    mergeDefaults: true,
+  })
 
-  // After the guard above, dataRef is guaranteed to be initialized.
-  const preferences: RemovableRef<HydratedUserPreferences> = dataRef
-
-  const { user } = useAtproto()
-
-  const isAuthenticated = computed(() => !!user.value?.did)
-  const {
-    status,
-    lastSyncedAt,
-    error,
-    loadFromServer,
-    scheduleSync,
-    setupRouteGuard,
-    setupBeforeUnload,
-  } = useUserPreferencesSync()
+  const isAuthenticated = shallowRef(false)
+  const status = shallowRef<'idle' | 'syncing' | 'synced' | 'error'>('idle')
+  const lastSyncedAt = shallowRef<Date | null>(null)
+  const error = shallowRef<string | null>(null)
 
   const isSyncing = computed(() => status.value === 'syncing')
   const isSynced = computed(() => status.value === 'synced')
   const hasError = computed(() => status.value === 'error')
 
-  async function syncWithServer(): Promise<void> {
-    const serverResult = await loadFromServer()
-
-    // If the server load failed, keep current local preferences untouched
-    if (hasError.value) return
-
-    const { merged, shouldPushToServer } = mergePreferences(preferences.value, serverResult)
-    if (shouldPushToServer) {
-      scheduleSync(preferences.value)
-    } else if (!arePreferencesEqual(preferences.value, merged)) {
-      preferences.value = merged
-    }
-  }
-
   async function initSync(): Promise<void> {
     if (syncInitialized || import.meta.server) return
     syncInitialized = true
 
+    // Resolve auth + sync dependencies lazily
+    const { user } = useAtproto()
+    watch(
+      () => !!user.value?.did,
+      v => {
+        isAuthenticated.value = v
+      },
+      { immediate: true },
+    )
+
+    const {
+      status: syncStatus,
+      lastSyncedAt: syncLastSyncedAt,
+      error: syncError,
+      loadFromServer,
+      scheduleSync,
+      setupRouteGuard,
+      setupBeforeUnload,
+    } = useUserPreferencesSync(isAuthenticated)
+
+    watch(
+      syncStatus,
+      v => {
+        status.value = v
+      },
+      { immediate: true },
+    )
+    watch(
+      syncLastSyncedAt,
+      v => {
+        lastSyncedAt.value = v
+      },
+      { immediate: true },
+    )
+    watch(
+      syncError,
+      v => {
+        error.value = v
+      },
+      { immediate: true },
+    )
+
+    async function syncWithServer(): Promise<void> {
+      const serverResult = await loadFromServer()
+
+      // If the server load failed, keep current local preferences untouched
+      if (hasError.value) return
+
+      const { merged, shouldPushToServer } = mergePreferences(preferences.value, serverResult)
+      if (shouldPushToServer) {
+        scheduleSync(preferences.value)
+      } else if (!arePreferencesEqual(preferences.value, merged)) {
+        preferences.value = merged
+      }
+    }
+
     setupRouteGuard(() => preferences.value)
     setupBeforeUnload(() => preferences.value)
 
@@ -108,12 +134,21 @@ export function useUserPreferencesProvider(
   }
 }
 
+export function useUserPreferencesProvider(
+  defaultValue: HydratedUserPreferences = DEFAULT_USER_PREFERENCES,
+) {
+  if (!cached) {
+    cached = createProvider(defaultValue)
+  }
+  return cached
+}
+
 /**
  * Reset module-level singleton state. Test-only — do not use in production code.
  */
 export function __resetPreferencesForTest(): void {
   if (import.meta.test) {
-    dataRef = null
+    cached = null
     syncInitialized = false
   }
 }

app/composables/useUserPreferencesSync.client.ts

@@ -104,13 +104,10 @@ function cancelPendingDebounce(): void {
   }
 }
 
-export function useUserPreferencesSync() {
-  const { user } = useAtproto()
+export function useUserPreferencesSync(isAuthenticated: Ref<boolean>) {
   const state = getSyncState()
   const router = useRouter()
 
-  const isAuthenticated = computed(() => !!user.value?.did)
-
   function scheduleSync(preferences: UserPreferences): void {
     if (!isAuthenticated.value) return
 

app/composables/userPreferences/README.md

@@ -108,8 +108,10 @@ The preference will automatically persist to localStorage and sync to the server
 ## Architecture overview
 
 ```
-useUserPreferencesProvider        ← singleton, manages localStorage + sync lifecycle
-  ├── useUserPreferencesSync      ← client-only: debounced server writes, route guard, sendBeacon
+useUserPreferencesProvider        ← cached singleton, manages localStorage + sync lifecycle
+  ├── createProvider()            ← internal: sets up localStorage ref + lazy sync state
+  │     └── initSync()            ← resolves useAtproto() + useUserPreferencesSync() lazily
+  ├── useUserPreferencesSync      ← client-only: receives isAuthenticated ref via DI
   ├── useUserPreferencesState     ← read/write access to reactive ref (used by all composables above)
   └── preferences-merge.ts        ← merge logic for first-login vs returning-user scenarios
 
@@ -121,8 +123,9 @@ useLocalStorageHashProvider       ← generic localStorage + defu provider (used
 ### Sync flow (authenticated users)
 
 1. `preferences-sync.client.ts` plugin calls `initSync()` on app boot
-2. Preferences are loaded from server and merged with local state
-3. A deep watcher on the preferences ref triggers `scheduleSync()` on every change
-4. `scheduleSync()` debounces for 2 seconds, then pushes to `PUT /api/user/preferences`
-5. On route navigation, `router.beforeEach` flushes any pending sync
-6. On tab close, `sendBeacon` fires the latest preferences via `POST /api/user/preferences`
+2. `initSync()` lazily resolves `useAtproto()` and `useUserPreferencesSync(isAuthenticated)` — auth is not fetched at provider construction time
+3. Preferences are loaded from server and merged with local state
+4. A deep watcher on the preferences ref triggers `scheduleSync()` on every change
+5. `scheduleSync()` debounces for 2 seconds, then pushes to `PUT /api/user/preferences`
+6. On route navigation, `router.beforeEach` flushes any pending sync
+7. On tab close, `sendBeacon` fires the latest preferences via `POST /api/user/preferences`

test/nuxt/components/ProfileInviteSection.spec.ts

@@ -1,12 +1,11 @@
 import { mockNuxtImport, mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
-import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import type { UseAtprotoReturn } from '~/composables/atproto/useAtproto'
 
-const { mockUseAtproto, mockUseProfileLikes } = vi.hoisted(() => ({
-  mockUseAtproto: vi.fn(),
+const { mockUseProfileLikes } = vi.hoisted(() => ({
   mockUseProfileLikes: vi.fn(),
 }))
 
-mockNuxtImport('useAtproto', () => mockUseAtproto)
 mockNuxtImport('useProfileLikes', () => mockUseProfileLikes)
 
 import ProfilePage from '~/pages/profile/[identity]/index.vue'
@@ -19,18 +18,32 @@ registerEndpoint('/api/social/profile/test-handle', () => ({
   recordExists: false,
 }))
 
+function mockUseAtproto(
+  overrides: {
+    user?: Ref<Record<string, unknown> | null>
+    pending?: Ref<boolean>
+    logout?: () => Promise<void>
+  } = {},
+) {
+  globalThis.__useAtprotoMock = {
+    user: ref(null),
+    pending: ref(false),
+    logout: vi.fn(),
+    ...overrides,
+  } as UseAtprotoReturn
+}
+
 describe('Profile invite section', () => {
   beforeEach(() => {
-    mockUseAtproto.mockReset()
     mockUseProfileLikes.mockReset()
   })
 
+  afterEach(() => {
+    globalThis.__useAtprotoMock = undefined
+  })
+
   it('does not show invite section while auth is still loading', async () => {
-    mockUseAtproto.mockReturnValue({
-      user: ref(null),
-      pending: ref(true),
-      logout: vi.fn(),
-    })
+    mockUseAtproto({ pending: ref(true) })
 
     mockUseProfileLikes.mockReturnValue({
       data: ref({ records: [] }),
@@ -45,11 +58,7 @@ describe('Profile invite section', () => {
   })
 
   it('shows invite section after auth resolves for non-owner', async () => {
-    mockUseAtproto.mockReturnValue({
-      user: ref({ handle: 'other-user' }),
-      pending: ref(false),
-      logout: vi.fn(),
-    })
+    mockUseAtproto({ user: ref({ handle: 'other-user' }) })
 
     mockUseProfileLikes.mockReturnValue({
       data: ref({ records: [] }),
@@ -64,11 +73,7 @@ describe('Profile invite section', () => {
   })
 
   it('does not show invite section for profile owner', async () => {
-    mockUseAtproto.mockReturnValue({
-      user: ref({ handle: 'test-handle' }),
-      pending: ref(false),
-      logout: vi.fn(),
-    })
+    mockUseAtproto({ user: ref({ handle: 'test-handle' }) })
 
     mockUseProfileLikes.mockReturnValue({
       data: ref({ records: [] }),