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')
@@ -68,7 +68,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>
 
@@ -157,7 +157,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>