fix third column setting change not affecting UI immideately

src/App.js

@@ -74,6 +74,8 @@ export default {
   },
   data: () => ({
     mobileActivePanel: 'timeline',
+    updateMobileState: null,
+    updateScrollState: null,
   }),
   provide() {
     return {
@@ -211,22 +213,26 @@ export default {
     hideShoutbox() {
       return this.isChats || useMergedConfigStore().mergedConfig.hideShoutbox
     },
+    thirdColumnMode() {
+      return this.mergedConfig.thirdColumnMode
+    },
+    reverseSetting() {
+      return this.mergedConfig.sidebarRight
+    },
     reverseLayout() {
-      const { thirdColumnMode, sidebarRight: reverseSetting } =
-        useMergedConfigStore().mergedConfig
       if (this.layoutType !== 'wide') {
-        return reverseSetting
+        return this.reverseSetting
       } else {
-        return thirdColumnMode === 'notifications'
-          ? reverseSetting
-          : !reverseSetting
+        return this.thirdColumnMode === 'notifications'
+          ? this.reverseSetting
+          : !this.reverseSetting
       }
     },
     noSticky() {
-      return useMergedConfigStore().mergedConfig.disableStickyHeaders
+      return this.mergedConfig.disableStickyHeaders
     },
     showScrollbars() {
-      return useMergedConfigStore().mergedConfig.showScrollbars
+      return this.mergedConfig.showScrollbars
     },
     scrollParent() {
       return window /* this.$refs.appContentRef */
@@ -234,7 +240,7 @@ export default {
     showInstanceSpecificPanel() {
       return (
         this.instanceSpecificPanelPresent &&
-        !useMergedConfigStore().mergedConfig.hideISP
+        !this.mergedConfig.hideISP
       )
     },
     ...mapState(useMergedConfigStore, ['mergedConfig']),

src/components/notifications/notifications.js

@@ -134,12 +134,11 @@ const Notifications = {
       return this.minimalMode || layoutType === 'mobile'
     },
     teleportTarget() {
-      const { layoutType } = useInterfaceStore()
       const map = {
         wide: '#notifs-column',
         mobile: '#mobile-notifications',
       }
-      return map[layoutType] || '#notifs-sidebar'
+      return map[this.layoutType] || '#notifs-sidebar'
     },
     popoversZLayer() {
       const { layoutType } = useInterfaceStore()
@@ -162,6 +161,9 @@ const Notifications = {
     },
     ...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
     ...mapState(useChatsStore, ['unreadChatsCount']),
+    ...mapState(useInterfaceStore, [
+      'layoutType',
+    ]),
   },
   mounted() {
     this.scrollerRef = this.$refs.root.closest('.column.-scrollable')

src/components/settings_modal/helpers/setting.js

@@ -113,6 +113,7 @@ export default {
       localDraft: null,
     }
   },
+  emits: ['update:modelValue'],
   created() {
     if (
       this.realDraftMode &&
@@ -244,7 +245,7 @@ export default {
     },
     configSink() {
       if (this.path == null) {
-        return (k, v) => this.$emit('update:modelValue', v)
+        return () => {}
       }
 
       switch (this.realSource) {
@@ -385,11 +386,13 @@ export default {
       if (this.realDraftMode) {
         this.draft = this.getValue(e)
       } else {
+        this.$emit('update:modelValue', this.getValue(e))
         this.configSink(this.path, this.getValue(e))
       }
     },
     commitDraft() {
       if (this.realDraftMode) {
+        this.$emit('update:modelValue', v)
         this.configSink(this.path, this.draft)
       }
     },

src/components/settings_modal/tabs/layout_tab.js

@@ -7,6 +7,7 @@ import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const GeneralTab = {
   data() {
@@ -46,6 +47,11 @@ const GeneralTab = {
     },
     ...SharedComputedObject(),
   },
+  methods: {
+    updateLayout() {
+      useInterfaceStore().setLayoutWidth()
+    },
+  },
 }
 
 export default GeneralTab

src/components/settings_modal/tabs/layout_tab.vue

@@ -105,6 +105,7 @@
             id="thirdColumnMode"
             path="thirdColumnMode"
             :options="thirdColumnModeOptions"
+            @change="updateLayout"
           >
             {{ $t('settings.third_column_mode') }}
           </ChoiceSetting>