fix: adapt connector settings

Author: gusa4grr

app/components/CollapsibleSection.vue

@@ -15,16 +15,16 @@ const props = withDefaults(defineProps<Props>(), {
   headingLevel: 'h2',
 })
 
-const { sidebarPreferences } = usePackageSidebarPreferences()
+const { userLocalSettings } = 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-sidebar-preferences') || '{}')
-  const collapsed: string[] = 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,16 +47,16 @@ onMounted(() => {
 function toggle() {
   isOpen.value = !isOpen.value
 
-  const removed = sidebarPreferences.value.collapsed.filter(c => c !== props.id)
+  const removed = userLocalSettings.value.sidebar.collapsed.filter(c => c !== props.id)
 
   if (isOpen.value) {
-    sidebarPreferences.value.collapsed = removed
+    userLocalSettings.value.sidebar.collapsed = removed
   } else {
     removed.push(props.id)
-    sidebarPreferences.value.collapsed = removed
+    userLocalSettings.value.sidebar.collapsed = removed
   }
 
-  document.documentElement.dataset.collapsed = sidebarPreferences.value.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/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/usePackageSidebarPreferences.ts

@@ -0,0 +1,42 @@
+interface UserLocalSettings {
+  sidebar: {
+    collapsed: string[]
+  }
+  connector: {
+    autoOpenURL: boolean
+  }
+}
+
+const STORAGE_KEY = 'npmx-settings'
+const DEFAULT_USER_LOCAL_SETTINGS: UserLocalSettings = {
+  sidebar: {
+    collapsed: [],
+  },
+  connector: {
+    autoOpenURL: false,
+  },
+}
+
+let userLocalSettingsRef: Ref<UserLocalSettings> | null = null
+
+/**
+ * Composable for managing local user settings.
+ * Uses its own LS key.
+ *
+ * This is for settings that are purely local and don't need to be synced
+ */
+export function useUserLocalSettings() {
+  if (!userLocalSettingsRef) {
+    userLocalSettingsRef = useLocalStorage<UserLocalSettings>(
+      STORAGE_KEY,
+      DEFAULT_USER_LOCAL_SETTINGS,
+      {
+        mergeDefaults: true,
+      },
+    )
+  }
+
+  return {
+    userLocalSettings: userLocalSettingsRef,
+  }
+}

app/composables/useUserLocalSettings.ts

@@ -51,7 +51,7 @@ export function initPreferencesOnPrehydrate() {
     document.documentElement.dataset.pm = pm
 
     // Read sidebar preferences from separate localStorage key
-    const sidebar = JSON.parse(localStorage.getItem('npmx-sidebar-preferences') || '{}')
-    document.documentElement.dataset.collapsed = sidebar.collapsed?.join(' ') ?? ''
+    const sidebar = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+    document.documentElement.dataset.collapsed = sidebar.sidebar?.collapsed?.join(' ') ?? ''
   })
 }

app/utils/prehydrate.ts

@@ -101,7 +101,7 @@ function resetMockState() {
     error: null,
     lastExecutionTime: null,
   }
-  mockSettings.value.connector = {
+  mockUserLocalSettings.value.connector = {
     autoOpenURL: false,
   }
 }
@@ -112,28 +112,21 @@ function simulateConnect() {
   mockState.value.avatar = 'https://example.com/avatar.png'
 }
 
-const mockSettings = ref({
-  relativeDates: false,
-  includeTypesInInstall: true,
-  accentColorId: null,
-  hidePlatformPackages: true,
-  selectedLocale: null,
-  preferredBackgroundTheme: null,
-  searchProvider: 'npm',
-  connector: {
-    autoOpenURL: false,
-  },
+const mockUserLocalSettings = ref({
   sidebar: {
     collapsed: [],
   },
+  connector: {
+    autoOpenURL: false,
+  },
 })
 
 mockNuxtImport('useConnector', () => {
   return createMockUseConnector
 })
 
-mockNuxtImport('useSettings', () => {
-  return () => ({ settings: mockSettings })
+mockNuxtImport('useUserLocalSettings', () => {
+  return () => ({ userLocalSettings: mockUserLocalSettings })
 })
 
 mockNuxtImport('useSelectedPackageManager', () => {