refactor: split user-preferences composables and streamline sync flow

Author: gusa4grr

app/components/CollapsibleSection.vue

@@ -16,16 +16,16 @@ const props = withDefaults(defineProps<Props>(), {
   headingLevel: 'h2',
 })
 
-const { userLocalSettings } = useUserLocalSettings()
+const { localSettings } = useUserLocalSettings()
 
 const buttonId = `${props.id}-collapsible-button`
 const contentId = `${props.id}-collapsible-content`
 
 const isOpen = shallowRef(true)
 
 onPrehydrate(() => {
-  const sidebar = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const collapsed: string[] = sidebar?.sidebar?.collapsed || []
+  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const collapsed: string[] = settings?.sidebar?.collapsed || []
   for (const id of collapsed) {
     if (!document.documentElement.dataset.collapsed?.split(' ').includes(id)) {
       document.documentElement.dataset.collapsed = (
@@ -48,16 +48,16 @@ onMounted(() => {
 function toggle() {
   isOpen.value = !isOpen.value
 
-  const removed = userLocalSettings.value.sidebar.collapsed.filter(c => c !== props.id)
+  const removed = localSettings.value.sidebar.collapsed.filter(c => c !== props.id)
 
   if (isOpen.value) {
-    userLocalSettings.value.sidebar.collapsed = removed
+    localSettings.value.sidebar.collapsed = removed
   } else {
     removed.push(props.id)
-    userLocalSettings.value.sidebar.collapsed = removed
+    localSettings.value.sidebar.collapsed = removed
   }
 
-  document.documentElement.dataset.collapsed = userLocalSettings.value.sidebar.collapsed.join(' ')
+  document.documentElement.dataset.collapsed = localSettings.value.sidebar.collapsed.join(' ')
 }
 
 const ariaLabel = computed(() => {

app/components/Header/ConnectorModal.vue

@@ -2,7 +2,7 @@
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
-const { userLocalSettings } = useUserLocalSettings()
+const { localSettings } = useUserLocalSettings()
 
 const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
@@ -67,7 +67,7 @@ const executeNpmxConnectorCommand = computed(() => {
       <div class="flex flex-col gap-2">
         <SettingsToggle
           :label="$t('connector.modal.auto_open_url')"
-          v-model="userLocalSettings.connector.autoOpenURL"
+          v-model="localSettings.connector.autoOpenURL"
         />
       </div>
 
@@ -158,7 +158,7 @@ const executeNpmxConnectorCommand = computed(() => {
             <div class="flex flex-col gap-2">
               <SettingsToggle
                 :label="$t('connector.modal.auto_open_url')"
-                v-model="userLocalSettings.connector.autoOpenURL"
+                v-model="localSettings.connector.autoOpenURL"
               />
             </div>
           </div>

app/components/Package/WeeklyDownloadStats.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
 
 const router = useRouter()
 const route = useRoute()
-const { settings } = useSettings()
+const { localSettings } = useUserLocalSettings()
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)

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/useConnector.ts

@@ -57,7 +57,7 @@ const STORAGE_KEY = 'npmx-connector'
 const DEFAULT_PORT = 31415
 
 export const useConnector = createSharedComposable(function useConnector() {
-  const { userLocalSettings } = useUserLocalSettings()
+  const { localSettings } = useUserLocalSettings()
 
   // Persisted connection config
   const config = useState<{ token: string; port: number } | null>('connector-config', () => null)
@@ -308,7 +308,7 @@ export const useConnector = createSharedComposable(function useConnector() {
       body: {
         otp,
         interactive: !otp,
-        openUrls: userLocalSettings.value.connector.autoOpenURL,
+        openUrls: localSettings.value.connector.autoOpenURL,
       },
     })
     if (response?.success) {

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/useUserLocalSettings.ts

@@ -1,6 +1,7 @@
 interface UserLocalSettings {
   sidebar: {
     collapsed: string[]
+    animateSparkline: boolean
   }
   connector: {
     autoOpenURL: boolean
@@ -11,13 +12,14 @@ const STORAGE_KEY = 'npmx-settings'
 const DEFAULT_USER_LOCAL_SETTINGS: UserLocalSettings = {
   sidebar: {
     collapsed: [],
+    animateSparkline: true,
   },
   connector: {
     autoOpenURL: false,
   },
 }
 
-let userLocalSettingsRef: Ref<UserLocalSettings> | null = null
+let localSettingsRef: Ref<UserLocalSettings> | null = null
 
 /**
  * Composable for managing local user settings.
@@ -26,8 +28,8 @@ let userLocalSettingsRef: Ref<UserLocalSettings> | null = null
  * This is for settings that are purely local and don't need to be synced
  */
 export function useUserLocalSettings() {
-  if (!userLocalSettingsRef) {
-    userLocalSettingsRef = useLocalStorage<UserLocalSettings>(
+  if (!localSettingsRef) {
+    localSettingsRef = useLocalStorage<UserLocalSettings>(
       STORAGE_KEY,
       DEFAULT_USER_LOCAL_SETTINGS,
       {
@@ -37,6 +39,6 @@ export function useUserLocalSettings() {
   }
 
   return {
-    userLocalSettings: userLocalSettingsRef,
+    localSettings: localSettingsRef,
   }
 }

app/composables/useUserPreferences.ts

@@ -13,20 +13,24 @@
 
 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'>
 
 let dataRef: RemovableRef<HydratedUserPreferences> | null = null
 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 +67,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 +88,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
+          }
         }
       }
     })