feat: add server-synced user preferences infrastructure (#484)

app/components/CollapsibleSection.vue

@@ -15,16 +15,16 @@ const props = withDefaults(defineProps<Props>(), {
   headingLevel: 'h2',
 })
 
-const appSettings = useSettings()
+const { userLocalSettings } = useUserLocalSettings()
 
 const buttonId = `${props.id}-collapsible-button`
 const contentId = `${props.id}-collapsible-content`
 
 const isOpen = shallowRef(true)
 
 onPrehydrate(() => {
-  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const collapsed: string[] = settings?.sidebar?.collapsed || []
+  const sidebar = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const collapsed: string[] = sidebar?.sidebar?.collapsed || []
   for (const id of collapsed) {
     if (!document.documentElement.dataset.collapsed?.split(' ').includes(id)) {
       document.documentElement.dataset.collapsed = (
@@ -47,17 +47,16 @@ onMounted(() => {
 function toggle() {
   isOpen.value = !isOpen.value
 
-  const removed = appSettings.settings.value.sidebar.collapsed.filter(c => c !== props.id)
+  const removed = userLocalSettings.value.sidebar.collapsed.filter(c => c !== props.id)
 
   if (isOpen.value) {
-    appSettings.settings.value.sidebar.collapsed = removed
+    userLocalSettings.value.sidebar.collapsed = removed
   } else {
     removed.push(props.id)
-    appSettings.settings.value.sidebar.collapsed = removed
+    userLocalSettings.value.sidebar.collapsed = removed
   }
 
-  document.documentElement.dataset.collapsed =
-    appSettings.settings.value.sidebar.collapsed.join(' ')
+  document.documentElement.dataset.collapsed = userLocalSettings.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 { settings } = useSettings()
+const { userLocalSettings } = useUserLocalSettings()
 
 const tokenInput = shallowRef('')
 const portInput = shallowRef('31415')
@@ -67,7 +67,7 @@ function handleDisconnect() {
       <div class="flex flex-col gap-2">
         <SettingsToggle
           :label="$t('connector.modal.auto_open_url')"
-          v-model="settings.connector.autoOpenURL"
+          v-model="userLocalSettings.connector.autoOpenURL"
         />
       </div>
 
@@ -201,7 +201,7 @@ function handleDisconnect() {
             <div class="flex flex-col gap-2">
               <SettingsToggle
                 :label="$t('connector.modal.auto_open_url')"
-                v-model="settings.connector.autoOpenURL"
+                v-model="userLocalSettings.connector.autoOpenURL"
               />
             </div>
           </div>

app/components/Settings/AccentColorPicker.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useAccentColor } from '~/composables/useSettings'
+import { useAccentColor } from '~/composables/useUserPreferences'
 
 const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 
 onPrehydrate(el => {
-  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const id = settings.accentColorId
+  const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  const id = preferences.accentColorId
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {

app/components/Settings/BgThemePicker.vue

@@ -2,8 +2,8 @@
 const { backgroundThemes, selectedBackgroundTheme, setBackgroundTheme } = useBackgroundTheme()
 
 onPrehydrate(el => {
-  const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
-  const id = settings.preferredBackgroundTheme
+  const preferences = JSON.parse(localStorage.getItem('npmx-user-preferences') || '{}')
+  const id = preferences.preferredBackgroundTheme
   if (id) {
     const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
     if (input) {

app/composables/useConnector.ts

@@ -57,7 +57,7 @@ const STORAGE_KEY = 'npmx-connector'
 const DEFAULT_PORT = 31415
 
 export const useConnector = createSharedComposable(function useConnector() {
-  const { settings } = useSettings()
+  const { userLocalSettings } = 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: settings.value.connector.autoOpenURL,
+        openUrls: userLocalSettings.value.connector.autoOpenURL,
       },
     })
     if (response?.success) {

app/composables/useInstallCommand.ts

@@ -12,11 +12,11 @@ export function useInstallCommand(
   installVersionOverride?: MaybeRefOrGetter<string | null>,
 ) {
   const selectedPM = useSelectedPackageManager()
-  const { settings } = useSettings()
+  const { preferences } = useUserPreferences()
 
   // Check if we should show @types in install command
   const showTypesInInstall = computed(() => {
-    return settings.value.includeTypesInInstall && !!toValue(typesPackageName)
+    return preferences.value.includeTypesInInstall && !!toValue(typesPackageName)
   })
 
   const installCommandParts = computed(() => {

app/composables/useLocalStorageHashProvider.ts

@@ -0,0 +1,35 @@
+import defu from 'defu'
+import { createLocalStorageProvider } from '~/utils/storage'
+
+export function useLocalStorageHashProvider<T extends object>(key: string, defaultValue: T) {
+  const provider = createLocalStorageProvider<T>(key)
+  const data = ref<T>(defaultValue)
+
+  onMounted(() => {
+    const stored = provider.get()
+    if (stored) {
+      data.value = defu(stored, defaultValue)
+    }
+  })
+
+  function save() {
+    provider.set(data.value)
+  }
+
+  function reset() {
+    data.value = { ...defaultValue }
+    provider.remove()
+  }
+
+  function update<K extends keyof T>(key: K, value: T[K]) {
+    data.value[key] = value
+    save()
+  }
+
+  return {
+    data,
+    save,
+    reset,
+    update,
+  }
+}

app/composables/usePackageListPreferences.ts

@@ -11,18 +11,18 @@ import type {
 } from '#shared/types/preferences'
 import { DEFAULT_COLUMNS, DEFAULT_PREFERENCES } from '#shared/types/preferences'
 
+const STORAGE_KEY = 'npmx-list-prefs'
+
 /**
  * Composable for managing package list display preferences
  * Persists to localStorage and provides reactive state
- *
  */
 export function usePackageListPreferences() {
   const {
     data: preferences,
-    isHydrated,
     save,
     reset,
-  } = usePreferencesProvider<PackageListPreferences>(DEFAULT_PREFERENCES)
+  } = useLocalStorageHashProvider<PackageListPreferences>(STORAGE_KEY, DEFAULT_PREFERENCES)
 
   // Computed accessors for common properties
   const viewMode = computed({
@@ -90,7 +90,6 @@ export function usePackageListPreferences() {
   return {
     // Raw preferences
     preferences,
-    isHydrated,
 
     // Individual properties with setters
     viewMode,