config.mergedConfig -> syncConfig.mergedConfig

src/App.js

@@ -26,6 +26,7 @@ import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useShoutStore } from 'src/stores/shout.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 export default {
   name: 'app',
@@ -72,7 +73,7 @@ export default {
   },
   created() {
     // Load the locale from the storage
-    const val = this.$store.getters.mergedConfig.interfaceLanguage
+    const val = useSyncConfigStore().mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     document.getElementById('modal').classList = ['-' + this.layoutType]
 
@@ -122,7 +123,7 @@ export default {
       ]
     },
     navClasses() {
-      const { navbarColumnStretch } = this.$store.getters.mergedConfig
+      const { navbarColumnStretch } = useSyncConfigStore().mergedConfig
       return [
         '-' + this.layoutType,
         ...(navbarColumnStretch ? ['-column-stretch'] : []),
@@ -160,19 +161,19 @@ export default {
       if (this.isChats) return false
       if (this.isListEdit) return false
       return (
-        this.$store.getters.mergedConfig.alwaysShowNewPostButton ||
+        useSyncConfigStore().mergedConfig.alwaysShowNewPostButton ||
         this.layoutType === 'mobile'
       )
     },
     shoutboxPosition() {
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
+      return useSyncConfigStore().mergedConfig.alwaysShowNewPostButton || false
     },
     hideShoutbox() {
-      return this.$store.getters.mergedConfig.hideShoutbox
+      return useSyncConfigStore().mergedConfig.hideShoutbox
     },
     reverseLayout() {
       const { thirdColumnMode, sidebarRight: reverseSetting } =
-        this.$store.getters.mergedConfig
+        useSyncConfigStore().mergedConfig
       if (this.layoutType !== 'wide') {
         return reverseSetting
       } else {
@@ -182,10 +183,10 @@ export default {
       }
     },
     noSticky() {
-      return this.$store.getters.mergedConfig.disableStickyHeaders
+      return useSyncConfigStore().mergedConfig.disableStickyHeaders
     },
     showScrollbars() {
-      return this.$store.getters.mergedConfig.showScrollbars
+      return useSyncConfigStore().mergedConfig.showScrollbars
     },
     scrollParent() {
       return window /* this.$refs.appContentRef */
@@ -193,7 +194,7 @@ export default {
     showInstanceSpecificPanel() {
       return (
         this.instanceSpecificPanelPresent &&
-        !this.$store.getters.mergedConfig.hideISP
+        !useSyncConfigStore().mergedConfig.hideISP
       )
     },
     ...mapGetters(['mergedConfig']),

src/components/about/about.js

@@ -5,6 +5,7 @@ import StaffPanel from '../staff_panel/staff_panel.vue'
 import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 const About = {
   components: {
@@ -21,7 +22,7 @@ const About = {
     showInstanceSpecificPanel() {
       return (
         useInstanceStore().instanceIdentity.showInstanceSpecificPanel &&
-        !this.$store.getters.mergedConfig.hideISP &&
+        !useSyncConfigStore().mergedConfig.hideISP &&
         useInstanceStore().instanceIdentity.instanceSpecificPanelContent
       )
     },

src/components/account_actions/account_actions.js

@@ -8,6 +8,7 @@ import ProgressButton from '../progress_button/progress_button.vue'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useReportsStore } from 'src/stores/reports'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
@@ -89,10 +90,10 @@ const AccountActions = {
   },
   computed: {
     shouldConfirmBlock() {
-      return this.$store.getters.mergedConfig.modalOnBlock
+      return useSyncConfigStore().mergedConfig.modalOnBlock
     },
     shouldConfirmRemoveUserFromFollowers() {
-      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+      return useSyncConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
     },
     ...mapState(useInstanceCapabilitiesStore, [
       'blockExpiration',

src/components/attachment/attachment.js

@@ -9,6 +9,7 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMediaViewerStore } from 'src/stores/media_viewer'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -58,8 +59,8 @@ const Attachment = {
       localDescription: this.description || this.attachment.description,
       nsfwImage:
         useInstanceStore().instanceIdentity.nsfwCensorImage || nsfwImage,
-      hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
+      hideNsfwLocal: useSyncConfigStore().mergedConfig.hideNsfw,
-      preloadImage: this.$store.getters.mergedConfig.preloadImage,
+      preloadImage: useSyncConfigStore().mergedConfig.preloadImage,
       loading: false,
       img:
         fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
@@ -93,7 +94,7 @@ const Attachment = {
       return this.size === 'hide'
     },
     useContainFit() {
-      return this.$store.getters.mergedConfig.useContainFit
+      return useSyncConfigStore().mergedConfig.useContainFit
     },
     placeholderName() {
       if (this.attachment.description === '' || !this.attachment.description) {

src/components/conversation/conversation.js

@@ -9,6 +9,7 @@ import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
 
 import { useInterfaceStore } from 'src/stores/interface'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -81,7 +82,7 @@ const conversation = {
       // maxDepthInThread = max number of depths that is *visible*
       // since our depth starts with 0 and "showing" means "showing children"
       // there is a -2 here
-      const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
+      const maxDepth = useSyncConfigStore().mergedConfig.maxDepthInThread - 2
       return maxDepth >= 1 ? maxDepth : 1
     },
     streamingEnabled() {
@@ -91,22 +92,22 @@ const conversation = {
       )
     },
     displayStyle() {
-      return this.$store.getters.mergedConfig.conversationDisplay
+      return useSyncConfigStore().mergedConfig.conversationDisplay
     },
     isTreeView() {
       return !this.isLinearView
     },
     treeViewIsSimple() {
-      return !this.$store.getters.mergedConfig.conversationTreeAdvanced
+      return !useSyncConfigStore().mergedConfig.conversationTreeAdvanced
     },
     isLinearView() {
       return this.displayStyle === 'linear'
     },
     shouldFadeAncestors() {
-      return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
+      return useSyncConfigStore().mergedConfig.conversationTreeFadeAncestors
     },
     otherRepliesButtonPosition() {
-      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
+      return useSyncConfigStore().mergedConfig.conversationOtherRepliesButton
     },
     showOtherRepliesButtonBelowStatus() {
       return this.otherRepliesButtonPosition === 'below'

src/components/desktop_nav/desktop_nav.js

@@ -5,6 +5,7 @@ import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -96,7 +97,7 @@ export default {
       return this.$store.state.users.currentUser
     },
     shouldConfirmLogout() {
-      return this.$store.getters.mergedConfig.modalOnLogout
+      return useSyncConfigStore().mergedConfig.modalOnLogout
     },
   },
   methods: {

src/components/emoji_picker/emoji_picker.js

@@ -8,6 +8,7 @@ import StillImage from '../still-image/still-image.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -340,7 +341,7 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.updateEmojiSize()
       })
-      return this.$store.getters.mergedConfig.fontSize
+      return useSyncConfigStore().mergedConfig.fontSize
     },
     emojiHeight() {
       return this.emojiSize
@@ -405,7 +406,7 @@ const EmojiPicker = {
     },
     languages() {
       return ensureFinalFallback(
-        this.$store.getters.mergedConfig.interfaceLanguage,
+        useSyncConfigStore().mergedConfig.interfaceLanguage,
       )
     },
     maybeLocalizedEmojiName() {

src/components/media_upload/media_upload.js

@@ -2,6 +2,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faUpload } from '@fortawesome/free-solid-svg-icons'
@@ -33,7 +34,7 @@ const mediaUpload = {
       }
 
       // Skip if image compression is disabled
-      if (!this.$store.getters.mergedConfig.imageCompression) {
+      if (!useSyncConfigStore().mergedConfig.imageCompression) {
         return file
       }
 
@@ -78,7 +79,7 @@ const mediaUpload = {
 
           // Convert to WebP if supported and alwaysUseJpeg is false, otherwise JPEG
           const type =
-            !this.$store.getters.mergedConfig.alwaysUseJpeg && supportsWebP
+            !useSyncConfigStore().mergedConfig.alwaysUseJpeg && supportsWebP
               ? 'image/webp'
               : 'image/jpeg'
           const extension = type === 'image/webp' ? '.webp' : '.jpg'

src/components/mobile_nav/mobile_nav.js

@@ -80,10 +80,10 @@ const MobileNav = {
         new Set(store.prefsStorage.collections.pinnedNavItems).has('chats'),
     }),
     shouldConfirmLogout() {
-      return this.$store.getters.mergedConfig.modalOnLogout
+      return useSyncConfigStore().mergedConfig.modalOnLogout
     },
     closingDrawerMarksAsSeen() {
-      return this.$store.getters.mergedConfig.closingDrawerMarksAsSeen
+      return useSyncConfigStore().mergedConfig.closingDrawerMarksAsSeen
     },
     ...mapGetters(['unreadChatCount']),
   },

src/components/mobile_post_status_button/mobile_post_status_button.js

@@ -1,6 +1,7 @@
 import { debounce } from 'lodash'
 
 import { usePostStatusStore } from 'src/stores/post_status.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPen } from '@fortawesome/free-solid-svg-icons'
@@ -45,10 +46,10 @@ const MobilePostStatusButton = {
       )
     },
     isPersistent() {
-      return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
+      return !!useSyncConfigStore().mergedConfig.alwaysShowNewPostButton
     },
     autohideFloatingPostButton() {
-      return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
+      return !!useSyncConfigStore().mergedConfig.autohideFloatingPostButton
     },
   },
   watch: {

src/components/notification/notification.js

@@ -17,6 +17,7 @@ import UserLink from '../user_link/user_link.vue'
 import UserPopover from '../user_popover/user_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -181,7 +182,7 @@ const Notification = {
       return highlightClass(this.notification.from_profile)
     },
     userStyle() {
-      const highlight = this.$store.getters.mergedConfig.highlight
+      const highlight = useSyncConfigStore().mergedConfig.highlight
       const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
     },
@@ -209,7 +210,7 @@ const Notification = {
       return isStatusNotification(this.notification.type)
     },
     mergedConfig() {
-      return this.$store.getters.mergedConfig
+      return useSyncConfigStore().mergedConfig
     },
     shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow

src/components/notifications/notifications.js

@@ -17,6 +17,7 @@ import NotificationFilters from './notification_filters.vue'
 
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -98,7 +99,7 @@ const Notifications = {
       return this.unseenNotifications.length
     },
     ignoreInactionableSeen() {
-      return this.$store.getters.mergedConfig.ignoreInactionableSeen
+      return useSyncConfigStore().mergedConfig.ignoreInactionableSeen
     },
     extraNotificationsCount() {
       return countExtraNotifications(this.$store)
@@ -136,10 +137,10 @@ const Notifications = {
       )
     },
     noSticky() {
-      return this.$store.getters.mergedConfig.disableStickyHeaders
+      return useSyncConfigStore().mergedConfig.disableStickyHeaders
     },
     unseenAtTop() {
-      return this.$store.getters.mergedConfig.unseenAtTop
+      return useSyncConfigStore().mergedConfig.unseenAtTop
     },
     showExtraNotifications() {
       return !this.noExtra

src/components/poll/poll.js

@@ -5,6 +5,7 @@ import Timeago from 'components/timeago/timeago.vue'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 
 import { usePollsStore } from 'src/stores/polls.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 export default {
   name: 'Poll',
@@ -48,7 +49,7 @@ export default {
       return (this.poll && this.poll.expired) || false
     },
     expirationLabel() {
-      if (this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+      if (useSyncConfigStore().mergedConfig.useAbsoluteTimeFormat) {
         return this.expired ? 'polls.expired_at' : 'polls.expires_at'
       } else {
         return this.expired ? 'polls.expired' : 'polls.expires_in'

src/components/post_status_form/post_status_form.js

@@ -25,6 +25,7 @@ import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { pollFormToMasto } from 'src/services/poll/poll.service.js'
 
@@ -163,7 +164,7 @@ const PostStatusForm = {
     const preset = this.$route.query.message
     let statusText = preset || ''
 
-    const { scopeCopy } = this.$store.getters.mergedConfig
+    const { scopeCopy } = useSyncConfigStore().mergedConfig
 
     const [statusType, refId] = typeAndRefId({
       replyTo: this.replyTo,
@@ -193,7 +194,7 @@ const PostStatusForm = {
           : this.$store.state.users.currentUser.default_scope
 
       const { postContentType: contentType, sensitiveByDefault } =
-        this.$store.getters.mergedConfig
+        useSyncConfigStore().mergedConfig
 
       statusParams = {
         type: statusType,
@@ -324,7 +325,7 @@ const PostStatusForm = {
     },
     hideScopeNotice() {
       return (
-        this.disableNotice || this.$store.getters.mergedConfig.hideScopeNotice
+        this.disableNotice || useSyncConfigStore().mergedConfig.hideScopeNotice
       )
     },
     pollContentError() {
@@ -380,7 +381,7 @@ const PostStatusForm = {
       return this.newStatus.hasPoll
     },
     shouldAutoSaveDraft() {
-      return this.$store.getters.mergedConfig.autoSaveDraft
+      return useSyncConfigStore().mergedConfig.autoSaveDraft
     },
     autoSaveState() {
       if (this.saveable) {

src/components/settings_modal/tabs/composing_tab.js

@@ -13,6 +13,7 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import localeService from 'src/services/locale/locale.service.js'
 import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
@@ -116,7 +117,7 @@ const ComposingTab = {
     },
     language: {
       get: function () {
-        return this.$store.getters.mergedConfig.interfaceLanguage
+        return useSyncConfigStore().mergedConfig.interfaceLanguage
       },
       set: function (val) {
         this.$store.dispatch('setOption', {

src/components/settings_modal/tabs/general_tab.js

@@ -38,7 +38,7 @@ const GeneralTab = {
   computed: {
     language: {
       get: function () {
-        return this.$store.getters.mergedConfig.interfaceLanguage
+        return useSyncConfigStore().mergedConfig.interfaceLanguage
       },
       set: function (val) {
         this.$store.dispatch('setOption', {

src/components/settings_modal/tabs/layout_tab.js

@@ -7,6 +7,7 @@ import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 const GeneralTab = {
   data() {
@@ -32,12 +33,12 @@ const GeneralTab = {
       'suggestionsEnabled',
     ]),
     columns() {
-      const mode = this.$store.getters.mergedConfig.thirdColumnMode
+      const mode = useSyncConfigStore().mergedConfig.thirdColumnMode
 
       const notif = mode === 'none' ? [] : ['notifs']
 
       if (
-        this.$store.getters.mergedConfig.sidebarRight ||
+        useSyncConfigStore().mergedConfig.sidebarRight ||
         mode === 'postform'
       ) {
         return [...notif, 'content', 'sidebar']

src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js

@@ -11,6 +11,7 @@ import Preview from './theme_preview.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import {
   getContrastRatioLayers,
@@ -81,7 +82,7 @@ export default {
       }),
       availableStyles: [],
       selected: '',
-      selectedTheme: this.$store.getters.mergedConfig.theme,
+      selectedTheme: useSyncConfigStore().mergedConfig.theme,
       themeWarning: undefined,
       tempImportFile: undefined,
       engineVersion: 0,

src/components/status/status.js

@@ -478,7 +478,7 @@ const Status = {
       return this.$store.state.users.currentUser
     },
     mergedConfig() {
-      return this.$store.getters.mergedConfig
+      return useSyncConfigStore().mergedConfig
     },
     isSuspendable() {
       return !this.replying && this.mediaPlaying.length === 0

src/components/status_content/status_content.js

@@ -7,6 +7,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import Poll from '../poll/poll.vue'
 
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -74,7 +75,7 @@ const StatusContent = {
       uncontrolledShowingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
       uncontrolledExpandingSubject:
-        !this.$store.getters.mergedConfig.collapseMessageWithSubject,
+        !useSyncConfigStore().mergedConfig.collapseMessageWithSubject,
     }
   },
   computed: {

src/components/timeline/timeline.js

@@ -9,6 +9,7 @@ import Status from '../status/status.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
 
@@ -125,7 +126,7 @@ const Timeline = {
       return this.timeline.visibleStatuses.slice(min, max).map((_) => _.id)
     },
     virtualScrollingEnabled() {
-      return this.$store.getters.mergedConfig.virtualScrolling
+      return useSyncConfigStore().mergedConfig.virtualScrolling
     },
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
@@ -313,7 +314,7 @@ const Timeline = {
   },
   watch: {
     newStatusCount(count) {
-      if (!this.$store.getters.mergedConfig.streaming) {
+      if (!useSyncConfigStore().mergedConfig.streaming) {
         return
       }
       if (count > 0) {
@@ -323,7 +324,9 @@ const Timeline = {
         if (
           top < 15 &&
           !this.paused &&
-          !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
+          !(
+            this.unfocused && useSyncConfigStore().mergedConfig.pauseOnUnfocused
+          )
         ) {
           this.showNewStatuses()
         } else {

src/components/user_card/user_card.js

@@ -27,6 +27,7 @@ import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { usePostStatusStore } from 'src/stores/post_status'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 import localeService from 'src/services/locale/locale.service.js'
@@ -223,12 +224,12 @@ export default {
     userHighlightType: {
       get() {
         const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+          useSyncConfigStore().mergedConfig.highlight[this.user.screen_name]
         return (data && data.type) || 'disabled'
       },
       set(type) {
         const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+          useSyncConfigStore().mergedConfig.highlight[this.user.screen_name]
         if (type !== 'disabled') {
           this.$store.dispatch('setHighlight', {
             user: this.user.screen_name,
@@ -247,7 +248,7 @@ export default {
     userHighlightColor: {
       get() {
         const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+          useSyncConfigStore().mergedConfig.highlight[this.user.screen_name]
         return data && data.color
       },
       set(color) {

src/components/user_timed_filter_modal/user_timed_filter_modal.js

@@ -2,13 +2,15 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Select from 'src/components/select/select.vue'
 
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
 import { durationStrToMs } from 'src/services/date_utils/date_utils.js'
 
 const UserTimedFilterModal = {
   data() {
     const action = this.isMute
-      ? this.$store.getters.mergedConfig.onMuteDefaultAction
+      ? useSyncConfigStore().mergedConfig.onMuteDefaultAction
-      : this.$store.getters.mergedConfig.onBlockDefaultAction
+      : useSyncConfigStore().mergedConfig.onBlockDefaultAction
     const doAsk = action === 'ask'
     const defaultValues = {}
 
@@ -44,9 +46,9 @@ const UserTimedFilterModal = {
   computed: {
     shouldConfirm() {
       if (this.isMute) {
-        return this.$store.getters.mergedConfig.onMuteDefaultAction === 'ask'
+        return useSyncConfigStore().mergedConfig.onMuteDefaultAction === 'ask'
       } else {
-        return this.$store.getters.mergedConfig.onBlockDefaultAction === 'ask'
+        return useSyncConfigStore().mergedConfig.onBlockDefaultAction === 'ask'
       }
     },
     expiryString() {