most stuff seem to work without errors

src/components/settings_modal/tabs/clutter_tab.vue

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

src/components/settings_modal/tabs/developer_tab.js

@@ -1,4 +1,6 @@
+import { mapState } from 'pinia'
 import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -6,14 +8,6 @@ const pleromaFeCommitUrl =
   'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
 
 const VersionTab = {
-  data() {
-    const instance = this.$store.state.instance
-    return {
-      backendVersion: instance.backendVersion,
-      backendRepository: instance.backendRepository,
-      frontendVersion: instance.frontendVersion,
-    }
-  },
   components: {
     BooleanSetting,
   },
@@ -22,6 +16,11 @@ const VersionTab = {
       return pleromaFeCommitUrl + this.frontendVersion
     },
     ...SharedComputedObject(),
+    ...mapState(useInstanceStore, [
+      'backendVersion',
+      'backendRepository',
+      'frontendVersion',
+    ])
   },
   methods: {
     clearAssetCache() {

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
-import { mapState as mapVuexState } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
@@ -90,18 +89,6 @@ const FilteringTab = {
     HelpIndicator,
   },
   computed: {
-    instanceSpecificPanelPresent() {
-      return useInstanceStore().showInstanceSpecificPanel
-    },
-    ...SharedComputedObject(),
-    ...mapState(useSyncConfigStore, {
-      muteFilters: (store) =>
-        Object.entries(store.prefsStorage.simple.muteFilters),
-      muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
-    }),
-    ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
     onMuteDefaultActionLv1: {
       get() {
         const value = this.$store.state.config.onMuteDefaultAction
@@ -151,6 +138,16 @@ const FilteringTab = {
         ([, { expires }]) => expires != null && expires <= now,
       )
     },
+    ...mapState(useInstanceStore, {
+      instanceSpecificPanelPresent: (store) => store.showInstanceSpecificPanel,
+      blockExpirationSupported: (store) => store.blockExpiration,
+    }),
+    ...SharedComputedObject(),
+    ...mapState(useSyncConfigStore, {
+      muteFilters: (store) =>
+        Object.entries(store.prefsStorage.simple.muteFilters),
+      muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
+    }),
   },
   methods: {
     ...mapActions(useSyncConfigStore, [

src/components/settings_modal/tabs/general_tab.js

@@ -1,4 +1,4 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
@@ -44,15 +44,18 @@ const GeneralTab = {
         return useSyncConfigStore().mergedConfig.interfaceLanguage
       },
       set: function (val) {
-        this.$store.dispatch('setOption', {
-          name: 'interfaceLanguage',
+        useSyncConfigStore().setPreference({
+          path: 'simple.interfaceLanguage',
           value: val,
         })
       },
     },
     ...SharedComputedObject(),
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
+    ...mapState(useSyncConfigStore, {
+      theme3hacks: (store) => store.mergedConfig.theme3hacks,
+    }),
+    ...mapState(useInstanceStore, {
+      blockExpirationSupported: (store) => store.featureSet.blockExpiration,
     }),
   },
   methods: {
@@ -71,15 +74,9 @@ const GeneralTab = {
         })
     },
     updateFont(key, value) {
-      this.$store.dispatch('setOption', {
-        name: 'theme3hacks',
-        value: {
-          ...this.mergedConfig.theme3hacks,
-          fonts: {
-            ...this.mergedConfig.theme3hacks.fonts,
-            [key]: value,
-          },
-        },
+      useSyncConfigStore().setPreference({
+        path: `simple.theme3hacks.fonts.${key}`,
+        value
       })
     },
   },

src/components/settings_modal/tabs/general_tab.vue

@@ -68,7 +68,7 @@
         </li>
         <li>
           <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            :model-value="theme3hacks.fonts.interface"
             name="ui"
             :label="$t('settings.style.fonts.components_inline.interface')"
             :fallback="{ family: 'sans-serif' }"
@@ -78,7 +78,7 @@
         </li>
         <li>
           <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.input"
+            :model-value="theme3hacks.fonts.input"
             name="input"
             :fallback="{ family: 'inherit' }"
             :label="$t('settings.style.fonts.components_inline.input')"

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -50,7 +50,7 @@ const MutesAndBlocks = {
   },
   created() {
     useOAuthTokensStore().fetchTokens()
-    this.$store.dispatch('getKnownDomains')
+    useInstanceStore().getKnownDomains()
   },
   components: {
     TabSwitcher,