Merge pull request 'fix-third-column' (#3536) from fix-third-column into develop

Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3536

changelog.d/third_column.fix

@@ -0,0 +1 @@
+Fixed layout selector (third column/reverse) not working immideately upon change

src/App.js

@@ -74,6 +74,8 @@ export default {
   },
   data: () => ({
     mobileActivePanel: 'timeline',
+    updateMobileState: null,
+    updateScrollState: null,
   }),
   provide() {
     return {
@@ -211,31 +213,32 @@ 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 */
     },
     showInstanceSpecificPanel() {
-      return (
-        this.instanceSpecificPanelPresent &&
-        !useMergedConfigStore().mergedConfig.hideISP
-      )
+      return this.instanceSpecificPanelPresent && !this.mergedConfig.hideISP
     },
     ...mapState(useMergedConfigStore, ['mergedConfig']),
     ...mapState(useInterfaceStore, [

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,7 @@ 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,9 @@ export default {
     },
     configSink() {
       if (this.path == null) {
-        return (k, v) => this.$emit('update:modelValue', v)
+        return () => {
+          /* no-op */
+        }
       }
 
       switch (this.realSource) {
@@ -385,11 +388,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', this.draft)
         this.configSink(this.path, this.draft)
       }
     },

src/components/settings_modal/tabs/layout_tab.js

@@ -6,6 +6,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 { useInterfaceStore } from 'src/stores/interface.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const GeneralTab = {
@@ -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>