Add puniko's third column w/ compatibility for right sidebar

src/App.js

@@ -72,6 +72,9 @@ export default {
         !this.$store.getters.mergedConfig.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
     },
+    thirdColumnEnabled () {
+      return this.$store.getters.mergedConfig.showThirdColumn || false
+    },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
@@ -83,6 +86,16 @@ export default {
         'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
       }
     },
+    notifsAlign () {
+      return {
+        'order': this.$store.getters.mergedConfig.sidebarRight ? 0 : 99
+      }
+    },
+    thirdColumnLayout () {
+      return {
+        'max-width': this.$store.getters.mergedConfig.showThirdColumn ? '1400px' : '980px'
+      }
+    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {

src/App.scss

@@ -573,9 +573,10 @@ nav {
 }
 
 .main {
-  flex-basis: 50%;
+  flex-basis: 25%;
   flex-grow: 1;
   flex-shrink: 1;
+  order: 50;
 }
 
 .sidebar-bounds {

src/App.vue

@@ -12,6 +12,7 @@
     <div class="app-bg-wrapper app-container-wrapper" />
     <div
       id="content"
+      :style="thirdColumnLayout"
       class="container underlay"
     >
       <div
@@ -27,13 +28,15 @@
                 <instance-specific-panel v-if="showInstanceSpecificPanel" />
                 <features-panel v-if="!currentUser && showFeaturesPanel" />
                 <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-                <notifications v-if="currentUser" />
+                <notifications v-if="currentUser && !thirdColumnEnabled" />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="main">
+      <div
+        class="main"
+      >
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
@@ -47,6 +50,23 @@
         </div>
         <router-view />
       </div>
+      <div
+        v-if="thirdColumnEnabled"
+        class="sidebar-flexer mobile-hidden"
+        :style="notifsAlign"
+      >
+        <div class="sidebar-bounds">
+          <div class="sidebar-scroller">
+            <div class="sidebar">
+              <div v-if="!isMobileLayout">
+                <notifications v-if="currentUser" />
+                <features-panel v-if="!currentUser && showFeaturesPanel" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <media-modal />
     </div>
     <shout-panel

src/components/settings_modal/tabs/general_tab.vue

@@ -16,6 +16,11 @@
             {{ $t('settings.right_sidebar') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="showThirdColumn">
+            {{ $t('settings.show_third_column') }}
+          </BooleanSetting>
+        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}

src/i18n/en.json

@@ -449,6 +449,7 @@
     "reset_banner_confirm": "Do you really want to reset the banner?",
     "reset_background_confirm": "Do you really want to reset the background?",
     "settings": "Settings",
+    "show_third_column": "Show separate notifications column",
     "subject_input_always_show": "Always show subject field",
     "subject_line_behavior": "Copy subject when replying",
     "subject_line_email": "Like email: \"re: subject\"",

src/modules/config.js

@@ -56,6 +56,7 @@ export const defaultState = {
   hideScopeNotice: false,
   useStreamingApi: false,
   sidebarRight: undefined, // instance default
+  showThirdColumn: false, // instance default
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default