add settings for third column

src/App.js

@@ -5,6 +5,7 @@ import SearchBar from './components/search_bar/search_bar.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
+import ChatList from './components/chat_list/chat_list.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 import SettingsModal from './components/settings_modal/settings_modal.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
@@ -27,6 +28,7 @@ export default {
     FeaturesPanel,
     WhoToFollowPanel,
     ChatPanel,
+    ChatList,
     MediaModal,
     SideDrawer,
     MobilePostStatusButton,
@@ -103,6 +105,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 },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
     privateMode () { return this.$store.state.instance.private },
@@ -110,6 +115,11 @@ export default {
       return {
         'order': this.$store.state.instance.sidebarRight ? 99 : 0
       }
+    },
+    thirdColumnLayout () {
+      return {
+        'max-width': this.$store.getters.mergedConfig.showThirdColumn ? '1400px' : '980px'
+      }
     }
   },
   methods: {

src/App.scss

@@ -30,7 +30,7 @@ h4 {
   padding-top: 60px;
   margin: auto;
   min-height: 100vh;
-  max-width: 1400px;
+  max-width: 980px;
   align-content: flex-start;
 }
 .underlay {

src/App.vue

@@ -80,6 +80,7 @@
     <div class="app-bg-wrapper app-container-wrapper" />
     <div
       id="content"
+      :style="thirdColumnLayout"
       class="container underlay"
     >
       <div
@@ -94,6 +95,8 @@
                 <nav-panel />
                 <instance-specific-panel v-if="showInstanceSpecificPanel" />
                 <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
+                <notifications v-if="currentUser && !thirdColumnEnabled" />
+                <features-panel v-if="!currentUser && !thirdColumnEnabled" />
               </div>
             </div>
           </div>
@@ -114,6 +117,7 @@
         <router-view />
       </div>
       <div
+        v-if="thirdColumnEnabled"
         class="sidebar-flexer mobile-hidden"
         :style="sidebarAlign"
       >

src/components/settings_modal/tabs/general_tab.vue

@@ -11,6 +11,11 @@
             {{ $t('settings.hide_isp') }}
           </Checkbox>
         </li>
+        <li>
+          <Checkbox v-model="showThirdColumn">
+            {{ $t('settings.show_third_column') }}
+          </Checkbox>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/i18n/en.json

@@ -321,6 +321,7 @@
     "hide_muted_posts": "Hide posts of muted users",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
+    "show_third_column": "Move Notifications to a seperate column",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",

src/modules/config.js

@@ -18,6 +18,7 @@ export const defaultState = {
   colors: {},
   theme: undefined,
   customTheme: undefined,
+  showThirdColumn: false,
   customThemeSource: undefined,
   hideISP: false,
   // bad name: actually hides posts of muted USERS