clutter page unsync -> sync

src/components/user_card/user_card.js

@@ -1,6 +1,7 @@
 import isEqual from 'lodash/isEqual'
 import merge from 'lodash/merge'
 import ldUnescape from 'lodash/unescape'
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
@@ -15,6 +16,7 @@ import { propsToNative } from 'src/services/attributes_helper/attributes_helper.
 import localeService from 'src/services/locale/locale.service.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { usePostStatusStore } from 'src/stores/post_status'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import { useInterfaceStore } from '../../stores/interface'
 import { useMediaViewerStore } from '../../stores/media_viewer'
 import AccountActions from '../account_actions/account_actions.vue'
@@ -217,13 +219,11 @@ export default {
     },
     userHighlightType: {
       get() {
-        const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+        const data = this.mergedConfig.highlight[this.user.screen_name]
         return (data && data.type) || 'disabled'
       },
       set(type) {
-        const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+        const data = this.mergedConfig.highlight[this.user.screen_name]
         if (type !== 'disabled') {
           this.$store.dispatch('setHighlight', {
             user: this.user.screen_name,
@@ -237,12 +237,10 @@ export default {
           })
         }
       },
-      ...mapGetters(['mergedConfig']),
     },
     userHighlightColor: {
       get() {
-        const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+        const data = this.mergedConfig.highlight[this.user.screen_name]
         return data && data.color
       },
       set(color) {
@@ -386,6 +384,11 @@ export default {
       })
     },
     ...mapGetters(['mergedConfig']),
+    ...mapState(useServerSideStorageStore, {
+      hideUserStats: (store) => store.prefsStorage.simple.hideUserStats,
+      userCardHidePersonalMarks: (store) =>
+        store.prefsStorage.simple.userCardHidePersonalMarks,
+    }),
   },
   methods: {
     muteUser() {

src/components/user_card/user_card.vue

@@ -293,7 +293,7 @@
       </div>
     </div>
     <div
-      v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
+      v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !userCardHidePersonalMarks"
       class="personal-marks"
     >
       <UserNote
@@ -505,11 +505,11 @@
       class="user-extras"
     >
       <span
-        v-if="!editable && !mergedConfig.hideUserStats"
+        v-if="!editable && !hideUserStats"
         class="user-stats"
       >
         <dl
-          v-if="!mergedConfig.hideUserStats && !hideBio"
+          v-if="!hideUserStats && !hideBio"
           class="user-count"
         >
           <dd>{{ user.statuses_count }}</dd>