From 905b9771ec74c4c79e5795676ea9c3946e586ce9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 13:24:08 +0300
Subject: stop using vue.set

---
 src/modules/interface.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'src/modules/interface.js')

diff --git a/src/modules/interface.js b/src/modules/interface.js
index d6db32fd..6509386a 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,5 +1,3 @@
-import { set, delete as del } from 'vue'
-
 const defaultState = {
   settingsModalState: 'hidden',
   settingsModalLoaded: false,
@@ -29,11 +27,10 @@ const interfaceMod = {
         if (state.noticeClearTimeout) {
           clearTimeout(state.noticeClearTimeout)
         }
-        set(state.settings, 'currentSaveStateNotice', { error: false, data: success })
-        set(state.settings, 'noticeClearTimeout',
-          setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
+        state.settings.currentSaveStateNotice = { error: false, data: success }
+        state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
       } else {
-        set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error })
+        state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
     setNotificationPermission (state, permission) {
-- 
cgit v1.2.3-70-g09d2


From 9ac7046521d9cffcff1e2d846b1158d32c01ed85 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 27 Mar 2022 12:21:33 +0300
Subject: Fix notices not disappearing on their own

---
 src/modules/interface.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/modules/interface.js')

diff --git a/src/modules/interface.js b/src/modules/interface.js
index 6509386a..17277331 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -106,7 +106,7 @@ const interfaceMod = {
       commit('openSettingsModal')
     },
     pushGlobalNotice (
-      { commit, dispatch },
+      { commit, dispatch, state },
       {
         messageKey,
         messageArgs = {},
@@ -118,11 +118,14 @@ const interfaceMod = {
         messageArgs,
         level
       }
+      commit('pushGlobalNotice', notice)
+      // Adding a new element to array wraps it in a Proxy, which breaks the comparison
+      // TODO: Generate UUID or something instead or relying on !== operator?
+      const newNotice = state.globalNotices[state.globalNotices.length - 1]
       if (timeout) {
-        setTimeout(() => dispatch('removeGlobalNotice', notice), timeout)
+        setTimeout(() => dispatch('removeGlobalNotice', newNotice), timeout)
       }
-      commit('pushGlobalNotice', notice)
-      return notice
+      return newNotice
     },
     removeGlobalNotice ({ commit }, notice) {
       commit('removeGlobalNotice', notice)
-- 
cgit v1.2.3-70-g09d2


From 4a068483ed9b1334780402cbe64dfa3f4a0e8a3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 18:38:05 +0300
Subject: wide mode initial implementation + cleanup

---
 src/App.js                               |   8 +-
 src/App.scss                             | 127 +++++++++++++++++--------------
 src/App.vue                              |   6 +-
 src/boot/after_store.js                  |   7 +-
 src/components/about/about.vue           |   2 +-
 src/components/mobile_nav/mobile_nav.vue |   1 -
 src/components/user_card/user_card.vue   |   1 +
 src/modules/interface.js                 |  10 +--
 8 files changed, 89 insertions(+), 73 deletions(-)

(limited to 'src/modules/interface.js')

diff --git a/src/App.js b/src/App.js
index 4a59f412..b2ec95d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -79,7 +79,7 @@ export default {
     hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    isMobileLayout () { return this.$store.state.interface.mobileLayout },
+    layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
     reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
     ...mapGetters(['mergedConfig'])
@@ -87,10 +87,12 @@ export default {
   methods: {
     updateMobileState () {
       const mobileLayout = windowWidth() <= 800
+      const wideLayout = windowWidth() >= 1300
       const layoutHeight = windowHeight()
-      const changed = mobileLayout !== this.isMobileLayout
+      const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+      const changed = layoutType !== this.layoutType
       if (changed) {
-        this.$store.dispatch('setMobileLayout', mobileLayout)
+        this.$store.dispatch('setLayoutType', layoutType)
       }
       this.$store.dispatch('setLayoutHeight', layoutHeight)
     }
diff --git a/src/App.scss b/src/App.scss
index c8a7969c..e32a2d36 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -63,11 +63,11 @@ nav {
 }
 
 #sidebar {
-  display: grid;
-  grid-template-columns: 100%;
-  row-gap: 1em;
   grid-area: sidebar;
-  align-content: start;
+
+  @media all and (max-width: 800px) {
+    display: none;
+  }
 }
 
 #main-scroller {
@@ -88,6 +88,19 @@ nav {
   background-position: 50%;
 }
 
+.underlay {
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  grid-row-end: 1;
+  margin: 0 -0.5em;
+  padding: 0 0.5em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  z-index: -2000;
+}
+
 .app-layout {
   position: relative;
   display: grid;
@@ -103,44 +116,66 @@ nav {
   justify-content: center;
 
   --miniColumn: 345px;
-  --maxiColumn: minmax(auto, 615px);
+  --maxiColumn: minmax(345px, 615px);
+
+  .column {
+    display: grid;
+    grid-template-columns: 100%;
+    box-sizing: border-box;
+    padding-top: 10px;
+    grid-row-start: 1;
+    grid-row-end: 1;
+    margin: 0 0.5em;
+    row-gap: 1em;
+    align-content: start;
+
+    &.-scrollable {
+      padding-top: 10px;
+      position: sticky;
+      top: 0;
+      max-height: calc(100vh - var(--navbar-height));
+      overflow-y: auto;
+      overflow-x: hidden;
 
-  &.-reverse {
+      .panel-heading.-sticky {
+        top: -10px;
+      }
+    }
+  }
+
+  .column-inner {
+    display: grid;
+    grid-template-columns: 100%;
+    box-sizing: border-box;
+    row-gap: 1em;
+    align-content: start;
+  }
+
+  &.-reverse:not(.-wide):not(.-mobile) {
     grid-template-columns: var(--maxiColumn) var(--miniColumn);
     grid-template-areas: "content sidebar";
   }
-}
 
-.underlay {
-  grid-column-start: 1;
-  grid-column-end: span 2;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: 0 -0.5em;
-  padding: 0 0.5em;
-  pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.15);
-  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
-  z-index: -2000;
-}
+  &.-wide {
+    grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
+    grid-template-areas: "sidebar content notifs";
 
-.column {
-  box-sizing: border-box;
-  padding-top: 10px;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: 0 0.5em;
+    &.-reverse {
+      grid-template-areas: "notifs content sidebar";
+    }
+  }
 
-  &.-scrollable {
-    padding-top: 10px;
-    position: sticky;
-    top: 0;
-    max-height: calc(100vh - var(--navbar-height));
-    overflow-y: auto;
-    overflow-x: hidden;
+  &.-mobile {
+    grid-template-columns: 100vw;
+    grid-template-areas: "content";
+    padding: 0;
+
+    .column {
+      margin: 0;
+    }
 
-    .panel-heading.-sticky {
-      top: -10px;
+    .underlay {
+      display: none;
     }
   }
 }
@@ -464,17 +499,6 @@ i[class*=icon-],
   color: grey;
 }
 
-.sidebar-bounds {
-  flex: 0;
-  flex-basis: 35%;
-}
-
-.sidebar-flexer {
-  flex: 1;
-  flex-basis: 345px;
-  width: 365px;
-}
-
 .mobile-shown {
   display: none;
 }
@@ -652,19 +676,6 @@ i[class*=icon-],
   .mobile-hidden {
     display: none;
   }
-
-  .panel-switcher {
-    display: flex;
-  }
-
-  .menu-button {
-    display: block;
-    margin-right: 0.8em;
-  }
-
-  .main {
-    margin-bottom: 7em;
-  }
 }
 
 @keyframes spin {
diff --git a/src/App.vue b/src/App.vue
index 71de2a36..f87d895b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,12 @@
       id="app_bg_wrapper"
       class="app-bg-wrapper"
     />
-    <MobileNav v-if="isMobileLayout" />
+    <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
     <div
       id="content"
       class="app-layout container"
-      :class="{ '-reverse': reverseLayout }"
+      :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
     >
       <div class="underlay"/>
       <div
@@ -20,7 +20,7 @@
         class="column -scrollable -mini mobile-hidden"
       >
         <user-panel />
-        <template v-if="!isMobileLayout">
+        <template v-if="layoutType !== 'mobile'">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 76832708..ce96141d 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -332,8 +332,11 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  const width = windowWidth()
-  store.dispatch('setMobileLayout', width <= 800)
+  // TODO cleanup copypasta
+  const mobileLayout = windowWidth() <= 800
+  const wideLayout = windowWidth() >= 1300
+  const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+  store.dispatch('setLayoutType', layoutType)
 
   FaviconService.initFaviconService()
 
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 518f6184..5d5d6479 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="column-inner">
     <instance-specific-panel v-if="showInstanceSpecificPanel" />
     <staff-panel />
     <terms-of-service-panel />
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 1c28ef77..09680910 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -96,7 +96,6 @@
     grid-template-rows: 50px;
     grid-template-columns: 2fr auto;
     width: 100%;
-    position: fixed;
     box-sizing: border-box;
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6e044bb6..43a660e1 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -289,6 +289,7 @@
 
 .user-card {
   position: relative;
+  z-index: 1;
 
   &:hover {
     --_still-image-img-visibility: visible;
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 17277331..9df72b88 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -13,7 +13,7 @@ const defaultState = {
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
     )
   },
-  mobileLayout: false,
+  layoutType: 'normal',
   globalNotices: [],
   layoutHeight: 0,
   lastTimeline: null
@@ -36,8 +36,8 @@ const interfaceMod = {
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },
-    setMobileLayout (state, value) {
-      state.mobileLayout = value
+    setLayoutType (state, value) {
+      state.layoutType = value
     },
     closeSettingsModal (state) {
       state.settingsModalState = 'hidden'
@@ -86,8 +86,8 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setMobileLayout ({ commit }, value) {
-      commit('setMobileLayout', value)
+    setLayoutType ({ commit }, value) {
+      commit('setLayoutType', value)
     },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
-- 
cgit v1.2.3-70-g09d2


From 3d37b9d8e1cad78fb1f666b3cfb7f28b1fdc1c2d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 21:18:06 +0300
Subject: unified layout-setting code and made an option to control or disable
 third column behavior

---
 src/App.js                                         | 20 +++++++++---------
 src/boot/after_store.js                            |  9 +++-----
 src/components/settings_modal/tabs/general_tab.js  |  5 +++++
 src/components/settings_modal/tabs/general_tab.vue |  9 ++++++++
 src/modules/config.js                              |  4 ++++
 src/modules/interface.js                           | 24 +++++++++++++++++++---
 6 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'src/modules/interface.js')

diff --git a/src/App.js b/src/App.js
index 9cfaf4fa..19c58595 100644
--- a/src/App.js
+++ b/src/App.js
@@ -98,22 +98,22 @@ export default {
     },
     layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
-    reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
+    reverseLayout () {
+      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
+      if (this.layoutType !== 'wide') {
+        return reverseSetting
+      } else {
+        return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
+      }
+    },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
     updateMobileState () {
-      const mobileLayout = windowWidth() <= 800
-      const wideLayout = windowWidth() >= 1300
-      const layoutHeight = windowHeight()
-      const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
-      const changed = layoutType !== this.layoutType
-      if (changed) {
-        this.$store.dispatch('setLayoutType', layoutType)
-      }
-      this.$store.dispatch('setLayoutHeight', layoutHeight)
+      this.$store.dispatch('setLayoutWidth', windowWidth())
+      this.$store.dispatch('setLayoutHeight', windowHeight())
     }
   }
 }
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index ce96141d..f655c38f 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -8,7 +8,7 @@ import App from '../App.vue'
 import routes from './routes'
 import VBodyScrollLock from 'src/directives/body_scroll_lock'
 
-import { windowWidth } from '../services/window_utils/window_utils'
+import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
@@ -332,11 +332,8 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  // TODO cleanup copypasta
-  const mobileLayout = windowWidth() <= 800
-  const wideLayout = windowWidth() >= 1300
-  const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
-  store.dispatch('setLayoutType', layoutType)
+  store.dispatch('setLayoutWidth', windowWidth())
+  store.dispatch('setLayoutHeight', windowHeight())
 
   FaviconService.initFaviconService()
 
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 62d86176..89505cb3 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -38,6 +38,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.mention_link_display_${mode}`)
       })),
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_display_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index e29bc7cf..db8718cf 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -70,6 +70,15 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"
diff --git a/src/modules/config.js b/src/modules/config.js
index 6d2e6ce0..c0d5c3c2 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -46,6 +46,7 @@ export const defaultState = {
   pauseOnUnfocused: true,
   stopGifs: true,
   replyVisibility: 'all',
+  thirdColumnMode: 'notifications',
   notificationVisibility: {
     follows: true,
     mentions: true,
@@ -165,6 +166,9 @@ const config = {
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
           break
+        case 'thirdColumnMode':
+          dispatch('setLayoutWidth', undefined)
+          break
       }
     }
   }
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 9df72b88..ed31b6ff 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -72,6 +72,9 @@ const interfaceMod = {
     setLayoutHeight (state, value) {
       state.layoutHeight = value
     },
+    setLayoutWidth (state, value) {
+      state.layoutWidth = value
+    },
     setLastTimeline (state, value) {
       state.lastTimeline = value
     }
@@ -86,9 +89,6 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setLayoutType ({ commit }, value) {
-      commit('setLayoutType', value)
-    },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
     },
@@ -133,6 +133,24 @@ const interfaceMod = {
     setLayoutHeight ({ commit }, value) {
       commit('setLayoutHeight', value)
     },
+    // value is optional, assuming it was cached prior
+    setLayoutWidth ({ commit, state, rootGetters }, value) {
+      let width = value
+      if (value !== undefined) {
+        commit('setLayoutWidth', value)
+      } else {
+        width = state.layoutWidth
+      }
+      const mobileLayout = width <= 800
+      const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
+      const { thirdColumnMode } = rootGetters.mergedConfig
+      if (thirdColumnMode === 'none') {
+        commit('setLayoutType', normalOrMobile)
+      } else {
+        const wideLayout = width >= 1300
+        commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
+      }
+    },
     setLastTimeline ({ commit }, value) {
       commit('setLastTimeline', value)
     }
-- 
cgit v1.2.3-70-g09d2


From edbbbaad48311d5d791183f724e819926c09e638 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:24:35 +0300
Subject: don't use wide mode for anon viewers

---
 src/components/settings_modal/tabs/general_tab.vue | 1 +
 src/modules/interface.js                           | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/modules/interface.js')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index db8718cf..79c69449 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -72,6 +72,7 @@
         </li>
         <li>
           <ChoiceSetting
+            v-if="user"
             id="thirdColumnMode"
             path="thirdColumnMode"
             :options="thirdColumnModeOptions"
diff --git a/src/modules/interface.js b/src/modules/interface.js
index ed31b6ff..a86193ea 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -134,7 +134,7 @@ const interfaceMod = {
       commit('setLayoutHeight', value)
     },
     // value is optional, assuming it was cached prior
-    setLayoutWidth ({ commit, state, rootGetters }, value) {
+    setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
       let width = value
       if (value !== undefined) {
         commit('setLayoutWidth', value)
@@ -144,7 +144,7 @@ const interfaceMod = {
       const mobileLayout = width <= 800
       const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
       const { thirdColumnMode } = rootGetters.mergedConfig
-      if (thirdColumnMode === 'none') {
+      if (thirdColumnMode === 'none' || !rootState.users.currentUser) {
         commit('setLayoutType', normalOrMobile)
       } else {
         const wideLayout = width >= 1300
-- 
cgit v1.2.3-70-g09d2