clutter page unsync -> sync

src/components/settings_modal/helpers/setting.js

@@ -1,5 +1,6 @@
 import { cloneDeep, get, isEqual, set } from 'lodash'
 
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import DraftButtons from './draft_buttons.vue'
 import ModifiedIndicator from './modified_indicator.vue'
 import ProfileSettingIndicator from './profile_setting_indicator.vue'
@@ -226,6 +227,8 @@ export default {
     },
     configSource() {
       switch (this.realSource) {
+        case 'server-side':
+          return useServerSideStorageStore().prefsStorage
         case 'profile':
           return this.$store.state.profileConfig
         case 'admin':
@@ -239,6 +242,39 @@ export default {
         return (k, v) => this.$emit('update:modelValue', v)
       }
       switch (this.realSource) {
+        case 'server-side': {
+          return (path, value, operator) => {
+            const folder = path.split('.')[0]
+            if (folder === 'collections' || folder === 'objectCollections') {
+              switch (operator) {
+                case 'add':
+                  useServerSideStorageStore().addCollectionPreference({
+                    path,
+                    value,
+                  })
+                  useServerSideStorageStore().pushServerSideStorage()
+                  break
+                case 'remove':
+                  useServerSideStorageStore().removeCollectionPreference({
+                    path,
+                    value,
+                  })
+                  useServerSideStorageStore().pushServerSideStorage()
+                  break
+                default:
+                  console.error(
+                    `Unknown server-side collection operator ${operator}, ignoring`,
+                  )
+                  break
+              }
+            } else if (folder === 'simple') {
+              useServerSideStorageStore().setPreference({ path, value })
+              useServerSideStorageStore().pushServerSideStorage()
+            } else {
+              console.error(`Unknown server-side folder ${folder}, ignoring`)
+            }
+          }
+        }
         case 'profile':
           return (k, v) =>
             this.$store.dispatch('setProfileOption', { name: k, value: v })
@@ -262,6 +298,11 @@ export default {
       switch (this.realSource) {
         case 'profile':
           return {}
+        case 'server-side':
+          return get(
+            this.$store.getters.defaultConfig,
+            this.path.split(/\./g).slice(1),
+          )
         default:
           return get(this.$store.getters.defaultConfig, this.path)
       }

src/components/settings_modal/helpers/shared_computed_object.js

@@ -1,18 +1,20 @@
+import { mapState as mapPiniaState } from 'pinia'
+import { mapGetters, mapState } from 'vuex'
+
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
 const SharedComputedObject = () => ({
-  user() {
-    return this.$store.state.users.currentUser
-  },
+  ...mapPiniaState(useServerSideStorageStore, {
+    serverSide: (store) => store.state.prefsStorage,
+  }),
+  ...mapGetters(['mergedConfig']),
+  ...mapState({
+    adminConfig: (state) => state.adminSettings.config,
+    adminDraft: (state) => state.adminSettings.draft,
+    user: (state) => state.users.currentUser,
+  }),
   expertLevel() {
-    return this.$store.getters.mergedConfig.expertLevel > 0
-  },
-  mergedConfig() {
-    return this.$store.getters.mergedConfig
-  },
-  adminConfig() {
-    return this.$store.state.adminSettings.config
-  },
-  adminDraft() {
-    return this.$store.state.adminSettings.draft
+    return this.mergedConfig.expertLevel > 0
   },
 })
 

src/components/settings_modal/tabs/clutter_tab.vue

@@ -4,41 +4,58 @@
       <h3>{{ $t('settings.interface') }}</h3>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="alwaysShowSubjectInput">
+          <BooleanSetting
+            source="server-side"
+            path="simple.alwaysShowSubjectInput"
+          >
             {{ $t('settings.subject_input_always_show') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="minimalScopesMode">
+          <BooleanSetting
+            source="server-side"
+            path="simple.minimalScopesMode"
+          >
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hidePostStats">
+          <BooleanSetting
+            source="server-side"
+            path="simple.hidePostStats"
+          >
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
         <li>
           <BooleanSetting
-            path="hideUserStats"
+            path="simple.hideUserStats"
+            source="server-side"
           >
             {{ $t('settings.hide_user_stats') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideBotIndication">
+          <BooleanSetting
+            source="server-side"
+            path="simple.hideBotIndication"
+          >
             {{ $t('settings.hide_actor_type_indication') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideScrobbles">
+          <BooleanSetting
+            source="server-side"
+            path="simple.hideScrobbles"
+          >
             {{ $t('settings.hide_scrobbles') }}
           </BooleanSetting>
           <ul class="setting-list suboptions">
             <li>
               <UnitSetting
                 key="hideScrobblesAfter"
-                path="hideScrobblesAfter"
+                source="server-side"
+                path="simple.hideScrobblesAfter"
                 :units="['m', 'h', 'd']"
                 unit-set="time"
               >
@@ -52,30 +69,41 @@
       <ul class="setting-list">
         <li>
           <IntegerSetting
-            path="maxThumbnails"
+            source="server-side"
+            path="simple.maxThumbnails"
             :min="0"
           >
             {{ $t('settings.max_thumbnails') }}
           </IntegerSetting>
         </li>
         <li>
-          <BooleanSetting path="hideAttachments">
+          <BooleanSetting
+            source="server-side"
+            path="simple.hideAttachments"
+          >
             {{ $t('settings.hide_attachments_in_tl') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideAttachmentsInConv">
+          <BooleanSetting
+            source="server-side"
+            path="simple.hideAttachmentsInConv"
+          >
             {{ $t('settings.hide_attachments_in_convo') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="userCardHidePersonalMarks">
+          <BooleanSetting
+            source="server-side"
+            path="simple.userCardHidePersonalMarks"
+          >
             {{ $t('settings.user_card_hide_personal_marks') }}
           </BooleanSetting>
         </li>
         <li v-if="instanceShoutboxPresent">
           <BooleanSetting
-            path="hideShoutbox"
+            source="server-side"
+            path="simple.hideShoutbox"
           >
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>