src/components/mention_link/mention_link.js

@@ -10,7 +10,6 @@ import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_i
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
-import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -101,23 +100,23 @@ const MentionLink = {
     userNameFullUi() {
       return this.user && this.user.screen_name_ui
     },
-    highlightData() {
-      return this.highlight[this.user?.screen_name]
+    highlight() {
+      return this.user && this.mergedConfig.highlight[this.user.screen_name]
     },
     highlightType() {
-      return this.highlightData && '-' + this.highlightData.type
+      return this.highlight && '-' + this.highlight.type
     },
     highlightClass() {
-      return this.highlightData && highlightClass(this.user)
+      if (this.highlight) return highlightClass(this.user)
     },
     style() {
-      if (this.highlightData) {
+      if (this.highlight) {
         const {
           backgroundColor,
           backgroundPosition,
           backgroundImage,
           ...rest
-        } = highlightStyle(this.highlightData)
+        } = highlightStyle(this.highlight)
         return rest
       }
     },
@@ -125,7 +124,7 @@ const MentionLink = {
       return [
         {
           '-you': this.isYou && this.shouldBoldenYou,
-          '-highlighted': !!this.highlightData,
+          '-highlighted': this.highlight,
           '-has-selection': this.hasSelection,
         },
         this.highlightType,
@@ -161,7 +160,6 @@ const MentionLink = {
       return this.mergedConfig.mentionLinkFadeDomain
     },
     ...mapPiniaState(useSyncConfigStore, ['mergedConfig']),
-    ...mapPiniaState(useUserHighlightStore, ['highlight']),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
     }),

src/components/settings_modal/settings_modal.js

@@ -9,10 +9,12 @@ import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from '../popover/popover.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
-import { useLocalConfigStore } from 'src/stores/local_config.js'
+import {
+  LOCAL_ONLY_KEYS,
+  useLocalConfigStore,
+} from 'src/stores/local_config.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
-import { LOCAL_ONLY_KEYS } from 'src/modules/default_config_state.js'
 import {
   newExporter,
   newImporter,

src/components/settings_modal/tabs/filtering_tab.js

@@ -36,7 +36,7 @@ const FilteringTab = {
         label: this.$t(`user_card.mute_block_${mode}`),
       })),
       muteFiltersDraftObject: cloneDeep(
-        useSyncConfigStore().mergedConfig.muteFilters,
+        useSyncConfigStore().prefsStorage.simple.muteFilters,
       ),
       muteFiltersDraftDirty: Object.fromEntries(
         Object.entries(
@@ -259,8 +259,9 @@ const FilteringTab = {
       this.$store.dispatch('queueFlushAll')
     },
     muteFiltersObject() {
+      console.log('UPDATE')
       this.muteFiltersDraftObject = cloneDeep(
-        useSyncConfigStore().mergedConfig.muteFilters,
+        useSyncConfigStore().prefsStorage.simple.muteFilters,
       )
     },
   },

src/modules/default_config_state.js

@@ -182,7 +182,6 @@ export const defaultConfigLocal = {
   imageCompression: true,
   useStreamingApi: false,
 }
-export const LOCAL_ONLY_KEYS = new Set(Object.keys(defaultConfigLocal))
 
 export const makeUndefined = (c) =>
   Object.fromEntries(Object.keys(c).map((key) => [key, undefined]))

src/stores/interface.js

@@ -350,6 +350,7 @@ export const useInterfaceStore = defineStore('interface', {
         path: 'simple.styleCustomData',
         value: null,
       })
+      useSyncConfigStore().pushSyncConfig()
     },
     resetThemeV3Palette() {
       useSyncConfigStore().setPreference({
@@ -360,6 +361,7 @@ export const useInterfaceStore = defineStore('interface', {
         path: 'simple.paletteCustomData',
         value: null,
       })
+      useSyncConfigStore().pushSyncConfig()
     },
     resetThemeV2() {
       useSyncConfigStore().setPreference({ path: 'simple.theme', value: null })
@@ -371,6 +373,7 @@ export const useInterfaceStore = defineStore('interface', {
         path: 'simple.customThemeSource',
         value: null,
       })
+      useSyncConfigStore().pushSyncConfig()
     },
     async getThemeData() {
       const getData = async (resource, index, customData, name) => {

src/stores/local_config.js

@@ -6,6 +6,8 @@ import { useInstanceStore } from 'src/stores/instance'
 
 import { defaultState as configDefaultState } from 'src/modules/default_config_state'
 
+export const LOCAL_ONLY_KEYS = new Set(Object.keys(configDefaultState))
+
 export const defaultState = {
   prefsStorage: {
     ...configDefaultState,

src/stores/sync_config.js

@@ -1,9 +1,7 @@
-import sum from 'hash-sum'
 import {
   merge as _merge,
   clamp,
   cloneDeep,
-  debounce,
   findLastIndex,
   flatten,
   get,
@@ -20,14 +18,16 @@ import { toRaw } from 'vue'
 import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
-import { useLocalConfigStore } from 'src/stores/local_config.js'
+import {
+  LOCAL_ONLY_KEYS,
+  useLocalConfigStore,
+} from 'src/stores/local_config.js'
 
 import { storage } from 'src/lib/storage.js'
 import {
   defaultState as configDefaultState,
   defaultConfigLocal,
   instanceDefaultConfig,
-  LOCAL_ONLY_KEYS,
 } from 'src/modules/default_config_state.js'
 import { defaultConfigSync } from 'src/modules/old_default_config_state.js'
 
@@ -395,7 +395,7 @@ export const _resetFlags = (
   return result
 }
 
-const _resetPrefs = (
+export const _resetPrefs = (
   totalPrefs,
   totalFlags,
   knownKeys = defaultState.flagStorage,
@@ -419,7 +419,7 @@ const _resetPrefs = (
   return totalPrefs
 }
 
-const _doMigrations = async (data, setPreference) => {
+export const _doMigrations = async (data, setPreference) => {
   if (data._version < VERSION) {
     console.debug(
       'Data has older version, seeing if there any migrations that can be applied',
@@ -447,18 +447,6 @@ const _doMigrations = async (data, setPreference) => {
 
   return data
 }
-const _pushSyncConfig = debounce((force, root) => {
-  const needPush = root.dirty || force
-  if (!needPush) return
-  root.updateCache({ username: window.vuex.state.users.currentUser.fqn })
-  const params = { pleroma_settings_store: { 'pleroma-fe': root.cache } }
-  window.vuex.state.api.backendInteractor
-    .updateProfileJSON({ params })
-    .then((user) => {
-      root.initSyncConfig(user)
-      root.dirty = false
-    })
-}, 5000)
 
 export const useSyncConfigStore = defineStore('sync_config', {
   state() {
@@ -678,7 +666,12 @@ export const useSyncConfigStore = defineStore('sync_config', {
         // discarding timestamps and versions
         const { _timestamp: _0, _version: _1, ...recentData } = recent
         const { _timestamp: _2, _version: _3, ...staleData } = stale
-        dirty = sum(recentData) !== sum(staleData)
+        dirty = !isEqual(
+          // Something wrong happens if we compare both objects directly
+          // or with cloneDeep()
+          JSON.parse(JSON.stringify(recentData)),
+          JSON.parse(JSON.stringify(staleData)),
+        )
         console.debug(`Data ${dirty ? 'needs' : "doesn't need"} merging`)
       }
 
@@ -714,7 +707,16 @@ export const useSyncConfigStore = defineStore('sync_config', {
       this.pushSyncConfig()
     },
     pushSyncConfig({ force = false } = {}) {
-      _pushSyncConfig(force, this)
+      const needPush = this.dirty || force
+      if (!needPush) return
+      this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
+      const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
+      window.vuex.state.api.backendInteractor
+        .updateProfileJSON({ params })
+        .then((user) => {
+          this.initSyncConfig(user)
+          this.dirty = false
+        })
     },
   },
   getters: {