refactor: split user-preferences composables and streamline sync flow

Author: gusa4grr

app/components/Settings/AccentColorPicker.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useAccentColor } from '~/composables/useUserPreferences'
-
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {

app/composables/npm/useSearch.ts

@@ -1,5 +1,5 @@
 import type { NpmSearchResponse, NpmSearchResult } from '#shared/types'
-import type { SearchProvider } from '~/composables/useSettings'
+import type { SearchProvider } from '#shared/schemas/userPreferences'
 import type { AlgoliaMultiSearchChecks } from './useAlgoliaSearch'
 import { type SearchSuggestion, emptySearchResponse, parseSuggestionIntent } from './search-utils'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'

app/composables/useInstallCommand.ts

@@ -12,7 +12,7 @@ export function useInstallCommand(
   installVersionOverride?: MaybeRefOrGetter<string | null>,
 ) {
   const selectedPM = useSelectedPackageManager()
-  const { preferences } = useUserPreferences()
+  const { preferences } = useUserPreferencesState()
 
   // Check if we should show @types in install command
   const showTypesInInstall = computed(() => {

app/composables/useUserPreferences.ts

@@ -13,10 +13,15 @@
 
 import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
-import type { UserPreferences } from '#shared/schemas/userPreferences'
+import { DEFAULT_USER_PREFERENCES, type UserPreferences } from '#shared/schemas/userPreferences'
 
 const STORAGE_KEY = 'npmx-user-preferences'
 
+function arePreferencesEqual(a: UserPreferences, b: UserPreferences): boolean {
+  const keys = Object.keys(DEFAULT_USER_PREFERENCES) as (keyof typeof DEFAULT_USER_PREFERENCES)[]
+  return keys.every(key => a[key] === b[key])
+}
+
 export type HydratedUserPreferences = Required<Omit<UserPreferences, 'updatedAt'>> &
   Pick<UserPreferences, 'updatedAt'>
 
@@ -26,7 +31,9 @@ let syncInitialized = false
 /**
  * User preferences provider with server sync support.
  */
-export function useUserPreferencesProvider(defaultValue: HydratedUserPreferences) {
+export function useUserPreferencesProvider(
+  defaultValue: HydratedUserPreferences = DEFAULT_USER_PREFERENCES,
+) {
   if (!dataRef) {
     dataRef = useLocalStorage<HydratedUserPreferences>(STORAGE_KEY, defaultValue, {
       mergeDefaults: true,
@@ -63,7 +70,10 @@ export function useUserPreferencesProvider(defaultValue: HydratedUserPreferences
     if (isAuthenticated.value) {
       const serverPrefs = await loadFromServer()
       if (serverPrefs) {
-        preferences.value = { ...preferences.value, ...serverPrefs }
+        const merged = { ...preferences.value, ...serverPrefs }
+        if (!arePreferencesEqual(preferences.value, merged)) {
+          preferences.value = merged
+        }
       }
     }
 
@@ -81,7 +91,10 @@ export function useUserPreferencesProvider(defaultValue: HydratedUserPreferences
       if (newIsAuth) {
         const serverPrefs = await loadFromServer()
         if (serverPrefs) {
-          preferences.value = { ...defaultValue, ...preferences.value, ...serverPrefs }
+          const merged = { ...defaultValue, ...preferences.value, ...serverPrefs }
+          if (!arePreferencesEqual(preferences.value, merged)) {
+            preferences.value = merged
+          }
         }
       }
     })

app/composables/useUserPreferencesProvider.ts

@@ -2,6 +2,7 @@ import type { UserPreferences } from '#shared/schemas/userPreferences'
 import { DEFAULT_USER_PREFERENCES } from '#shared/schemas/userPreferences'
 
 const SYNC_DEBOUNCE_MS = 2000
+const SYNCED_DISPLAY_MS = 3000
 
 type SyncStatus = 'idle' | 'syncing' | 'synced' | 'error'
 
@@ -15,6 +16,7 @@ let syncStateInstance: PreferencesSyncState | null = null
 let pendingSavePromise: Promise<boolean> | null = null
 let hasPendingChanges = false
 let debounceTimeoutId: ReturnType<typeof setTimeout> | null = null
+let syncedResetTimeoutId: ReturnType<typeof setTimeout> | null = null
 
 function getSyncState(): PreferencesSyncState {
   if (!syncStateInstance) {
@@ -38,6 +40,23 @@ async function fetchServerPreferences(): Promise<UserPreferences | null> {
   }
 }
 
+/** Show 'synced' status briefly, then reset to 'idle'. */
+function showSyncedStatus(): void {
+  const state = getSyncState()
+  if (syncedResetTimeoutId) {
+    clearTimeout(syncedResetTimeoutId)
+  }
+  state.status.value = 'synced'
+  state.lastSyncedAt.value = new Date()
+  syncedResetTimeoutId = setTimeout(() => {
+    syncedResetTimeoutId = null
+
+    if (state.status.value === 'synced') {
+      state.status.value = 'idle'
+    }
+  }, SYNCED_DISPLAY_MS)
+}
+
 async function saveToServer(preferences: UserPreferences): Promise<boolean> {
   const state = getSyncState()
   state.status.value = 'syncing'
@@ -48,8 +67,7 @@ async function saveToServer(preferences: UserPreferences): Promise<boolean> {
       method: 'PUT',
       body: preferences,
     })
-    state.status.value = 'synced'
-    state.lastSyncedAt.value = new Date()
+    showSyncedStatus()
     hasPendingChanges = false
     return true
   } catch (err) {
@@ -96,8 +114,7 @@ export function useUserPreferencesSync() {
     const serverPreferences = await fetchServerPreferences()
 
     if (serverPreferences) {
-      state.status.value = 'synced'
-      state.lastSyncedAt.value = new Date()
+      showSyncedStatus()
       return serverPreferences
     }
 
@@ -120,7 +137,7 @@ export function useUserPreferencesSync() {
   function setupRouteGuard(getPreferences: () => UserPreferences): void {
     router.beforeEach(async (_to, _from, next) => {
       if (hasPendingChanges && isAuthenticated.value) {
-        await flushPendingSync(getPreferences())
+        void flushPendingSync(getPreferences())
       }
       next()
     })

app/composables/useUserPreferencesSync.client.ts

@@ -0,0 +1,33 @@
+import { ACCENT_COLORS } from '#shared/utils/constants'
+import type { AccentColorId } from '#shared/schemas/userPreferences'
+
+export function useAccentColor() {
+  const { preferences } = useUserPreferencesState()
+  const colorMode = useColorMode()
+
+  const accentColors = computed(() => {
+    const isDark = colorMode.value === 'dark'
+    const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
+
+    return Object.entries(colors).map(([id, value]) => ({
+      id: id as AccentColorId,
+      name: id,
+      value,
+    }))
+  })
+
+  function setAccentColor(id: AccentColorId | null) {
+    if (id) {
+      document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
+    } else {
+      document.documentElement.style.removeProperty('--accent-color')
+    }
+    preferences.value.accentColorId = id
+  }
+
+  return {
+    accentColors,
+    selectedAccentColor: computed(() => preferences.value.accentColorId),
+    setAccentColor,
+  }
+}

app/composables/userPreferences/useAccentColor.ts

@@ -0,0 +1,27 @@
+import { BACKGROUND_THEMES } from '#shared/utils/constants'
+import type { BackgroundThemeId } from '#shared/schemas/userPreferences'
+
+export function useBackgroundTheme() {
+  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
+    id: id as BackgroundThemeId,
+    name: id,
+    value,
+  }))
+
+  const { preferences } = useUserPreferencesState()
+
+  function setBackgroundTheme(id: BackgroundThemeId | null) {
+    if (id) {
+      document.documentElement.dataset.bgTheme = id
+    } else {
+      document.documentElement.removeAttribute('data-bg-theme')
+    }
+    preferences.value.preferredBackgroundTheme = id
+  }
+
+  return {
+    backgroundThemes,
+    selectedBackgroundTheme: computed(() => preferences.value.preferredBackgroundTheme),
+    setBackgroundTheme,
+  }
+}