From c4120357338036b473afcdaa6558190c51ffe2db Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Tue, 23 Apr 2019 10:56:30 +0100
Subject: [PATCH] organised files

---
 babel.config.js                               | 17 +++--
 package-lock.json                             | 58 ++++++++--------
 package.json                                  |  1 +
 .../app/{ => EmojiPanels}/emojiPanel.vue      |  0
 .../{ => EmojiPanels}/emojiSuggestions.vue    |  0
 .../app/{LeftPanel.vue => FriendsList.vue}    |  0
 .../app/{RightPanel.vue => MessagePanel.vue}  |  5 +-
 src/components/app/{ => Popouts}/Popouts.vue  | 14 ++--
 .../Popouts}/DragDropFileUploadDialog.vue     |  0
 .../{ => Popouts/Popouts}/GDriveLinkMenu.vue  |  4 +-
 .../app/{ => Popouts/Popouts}/Settings.vue    |  2 +-
 .../SettingsPanels/DropDownTemplate.vue       |  0
 .../Popouts}/SettingsPanels/ManageEmojis.vue  |  0
 .../Popouts}/SettingsPanels/MessageDesign.vue |  0
 .../Popouts}/SettingsPanels/MyProfile.vue     |  2 +-
 .../Popouts}/SettingsPanels/survey.vue        |  2 +-
 .../Popouts}/TakeSurveyPopout.vue             |  0
 .../Popouts}/imageLargePreview.vue            |  0
 .../{ => Popouts/Popouts}/uploadDialog.vue    |  2 +-
 .../Popouts}/userInformationPopout.vue        |  0
 src/components/app/Tabs/DirectMessage.vue     | 66 +++++++++++++++++++
 src/components/app/{ => Tabs}/News.vue        |  0
 src/views/App.vue                             | 47 ++-----------
 23 files changed, 129 insertions(+), 91 deletions(-)
 rename src/components/app/{ => EmojiPanels}/emojiPanel.vue (100%)
 rename src/components/app/{ => EmojiPanels}/emojiSuggestions.vue (100%)
 rename src/components/app/{LeftPanel.vue => FriendsList.vue} (100%)
 rename src/components/app/{RightPanel.vue => MessagePanel.vue} (98%)
 rename src/components/app/{ => Popouts}/Popouts.vue (83%)
 rename src/components/app/{ => Popouts/Popouts}/DragDropFileUploadDialog.vue (100%)
 rename src/components/app/{ => Popouts/Popouts}/GDriveLinkMenu.vue (96%)
 rename src/components/app/{ => Popouts/Popouts}/Settings.vue (99%)
 rename src/components/app/{ => Popouts/Popouts}/SettingsPanels/DropDownTemplate.vue (100%)
 rename src/components/app/{ => Popouts/Popouts}/SettingsPanels/ManageEmojis.vue (100%)
 rename src/components/app/{ => Popouts/Popouts}/SettingsPanels/MessageDesign.vue (100%)
 rename src/components/app/{ => Popouts/Popouts}/SettingsPanels/MyProfile.vue (98%)
 rename src/components/app/{ => Popouts/Popouts}/SettingsPanels/survey.vue (98%)
 rename src/components/app/{ => Popouts/Popouts}/TakeSurveyPopout.vue (100%)
 rename src/components/app/{ => Popouts/Popouts}/imageLargePreview.vue (100%)
 rename src/components/app/{ => Popouts/Popouts}/uploadDialog.vue (99%)
 rename src/components/app/{ => Popouts/Popouts}/userInformationPopout.vue (100%)
 create mode 100644 src/components/app/Tabs/DirectMessage.vue
 rename src/components/app/{ => Tabs}/News.vue (100%)

diff --git a/babel.config.js b/babel.config.js
index ba17966..6e4fdc8 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,12 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+
+module.exports = function (api) {
+  api.cache(true);
+
+  const presets = [ '@vue/app' ];
+  const plugins = [ '@babel/plugin-syntax-dynamic-import'];
+
+  return {
+    presets,
+    plugins
+  };
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a5a92ca..f082588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -374,9 +374,9 @@
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz",
-      "integrity": "sha512-Gt9xNyRrCHCiyX/ZxDGOcBnlJl0I3IWicpZRC4CdC0P5a/I07Ya2OAMEBU+J7GmRFVmIetqEYRko6QYRuKOESw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz",
+      "integrity": "sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0"
@@ -1892,7 +1892,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -1915,7 +1915,7 @@
     },
     "async": {
       "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
       "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
       "dev": true
     },
@@ -2385,7 +2385,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -2422,7 +2422,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -2467,7 +2467,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -2508,7 +2508,7 @@
     },
     "cacache": {
       "version": "10.0.4",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
+      "resolved": "http://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
       "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
       "dev": true,
       "requires": {
@@ -3174,7 +3174,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -3187,7 +3187,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -3233,7 +3233,7 @@
     },
     "css-color-names": {
       "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
@@ -3323,7 +3323,7 @@
         },
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         },
@@ -3340,7 +3340,7 @@
         },
         "regjsgen": {
           "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
           "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
           "dev": true
         },
@@ -3643,7 +3643,7 @@
       "dependencies": {
         "globby": {
           "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
           "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
           "dev": true,
           "requires": {
@@ -3656,7 +3656,7 @@
           "dependencies": {
             "pify": {
               "version": "2.3.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
               "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
               "dev": true
             }
@@ -3715,7 +3715,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -3841,7 +3841,7 @@
     },
     "duplexer": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
@@ -4761,7 +4761,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "dev": true,
       "requires": {
@@ -5838,7 +5838,7 @@
     },
     "html-webpack-plugin": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
       "integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
       "dev": true,
       "requires": {
@@ -5853,7 +5853,7 @@
       "dependencies": {
         "json5": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
           "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
           "dev": true
         },
@@ -5906,7 +5906,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "dev": true,
       "requires": {
@@ -6413,7 +6413,7 @@
     },
     "is-obj": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
@@ -6981,7 +6981,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -8884,7 +8884,7 @@
         },
         "css-select": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
           "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
           "dev": true,
           "requires": {
@@ -8906,7 +8906,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -9340,7 +9340,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -11215,7 +11215,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -11579,7 +11579,7 @@
         },
         "get-stream": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
           "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
           "dev": true
         },
diff --git a/package.json b/package.json
index 856bf9d..cf431c8 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-service": "^3.6.0",
diff --git a/src/components/app/emojiPanel.vue b/src/components/app/EmojiPanels/emojiPanel.vue
similarity index 100%
rename from src/components/app/emojiPanel.vue
rename to src/components/app/EmojiPanels/emojiPanel.vue
diff --git a/src/components/app/emojiSuggestions.vue b/src/components/app/EmojiPanels/emojiSuggestions.vue
similarity index 100%
rename from src/components/app/emojiSuggestions.vue
rename to src/components/app/EmojiPanels/emojiSuggestions.vue
diff --git a/src/components/app/LeftPanel.vue b/src/components/app/FriendsList.vue
similarity index 100%
rename from src/components/app/LeftPanel.vue
rename to src/components/app/FriendsList.vue
diff --git a/src/components/app/RightPanel.vue b/src/components/app/MessagePanel.vue
similarity index 98%
rename from src/components/app/RightPanel.vue
rename to src/components/app/MessagePanel.vue
index e3f8d59..54f2fe2 100644
--- a/src/components/app/RightPanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -99,12 +99,11 @@ import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import TypingStatus from "@/components/app/TypingStatus.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
-import emojiSuggestions from "@/components/app/emojiSuggestions.vue";
-// import emojiPanel from "@/components/app/emojiPanel.vue";
+import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue";
 import emojiParser from "@/utils/emojiParser.js";
 import statuses from "@/utils/statuses";
 
-  const emojiPanel = () => import( '@/components/app/emojiPanel.vue' );
+const emojiPanel = () => import( '@/components/app/EmojiPanels/emojiPanel.vue' );
 
 export default {
   components: {
diff --git a/src/components/app/Popouts.vue b/src/components/app/Popouts/Popouts.vue
similarity index 83%
rename from src/components/app/Popouts.vue
rename to src/components/app/Popouts/Popouts.vue
index d6a366b..9b36292 100644
--- a/src/components/app/Popouts.vue
+++ b/src/components/app/Popouts/Popouts.vue
@@ -15,13 +15,13 @@
 <script>
 
 //popouts
-  const userInformationPopout = () => import('@/components/app/userInformationPopout.vue');
-  const Settings = () => import('@/components/app/Settings.vue');
-  const TakeSurveyPopout = () => import('@/components/app/TakeSurveyPopout.vue');
-  const uploadDialog = () => import('@/components/app/uploadDialog.vue');
-  const GDriveLinkMenu = () => import('@/components/app/GDriveLinkMenu.vue');
-  const imageLargePreview = () => import('@/components/app/imageLargePreview.vue');
-  const DragDropFileUploadDialog = () => import('@/components/app/DragDropFileUploadDialog.vue');
+  const userInformationPopout = () => import('./Popouts/userInformationPopout.vue');
+  const Settings = () => import('./Popouts/Settings.vue');
+  const TakeSurveyPopout = () => import('./Popouts/TakeSurveyPopout.vue');
+  const uploadDialog = () => import('./Popouts/uploadDialog.vue');
+  const GDriveLinkMenu = () => import('./Popouts/GDriveLinkMenu.vue');
+  const imageLargePreview = () => import('./Popouts/imageLargePreview.vue');
+  const DragDropFileUploadDialog = () => import('./Popouts/DragDropFileUploadDialog.vue');
 
 
 
diff --git a/src/components/app/DragDropFileUploadDialog.vue b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
similarity index 100%
rename from src/components/app/DragDropFileUploadDialog.vue
rename to src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
diff --git a/src/components/app/GDriveLinkMenu.vue b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
similarity index 96%
rename from src/components/app/GDriveLinkMenu.vue
rename to src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
index 10831bd..76877be 100644
--- a/src/components/app/GDriveLinkMenu.vue
+++ b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
@@ -108,7 +108,7 @@ export default {
   background-size: 100%;
 	}
 .nertivia-img {
-  background-image: url(./../../assets/logo.png);
+  background-image: url(./../../../../assets/logo.png);
   border-radius: 50%;
   background-size: calc(100% + 34px);
   box-shadow: 0px 0px 66px -4px rgba(69, 212, 255, 1);
@@ -120,7 +120,7 @@ export default {
   user-select: none;
 }
 .GDrive-img {
-  background-image: url(./../../assets/Google_Drive_logo.png);
+  background-image: url(./../../../../assets/Google_Drive_logo.png);
 }
 .buttons {
   margin: auto;
diff --git a/src/components/app/Settings.vue b/src/components/app/Popouts/Popouts/Settings.vue
similarity index 99%
rename from src/components/app/Settings.vue
rename to src/components/app/Popouts/Popouts/Settings.vue
index 0954626..6edf0d0 100644
--- a/src/components/app/Settings.vue
+++ b/src/components/app/Popouts/Popouts/Settings.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { bus } from "../../main";
+import { bus } from "@/main";
 
 
 const MyProfile = () => import( './SettingsPanels/MyProfile.vue' );
diff --git a/src/components/app/SettingsPanels/DropDownTemplate.vue b/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
similarity index 100%
rename from src/components/app/SettingsPanels/DropDownTemplate.vue
rename to src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
diff --git a/src/components/app/SettingsPanels/ManageEmojis.vue b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
similarity index 100%
rename from src/components/app/SettingsPanels/ManageEmojis.vue
rename to src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
diff --git a/src/components/app/SettingsPanels/MessageDesign.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
similarity index 100%
rename from src/components/app/SettingsPanels/MessageDesign.vue
rename to src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
diff --git a/src/components/app/SettingsPanels/MyProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
similarity index 98%
rename from src/components/app/SettingsPanels/MyProfile.vue
rename to src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
index 1858d95..a5e2f64 100644
--- a/src/components/app/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -49,7 +49,7 @@
 <script>
 
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
-import Survey from "@/components/app/SettingsPanels/survey.vue";
+import Survey from "./survey.vue";
 import AvatarUpload from "@/services/AvatarUpload.js";
 import config from "@/config.js";
 import { bus } from "@/main";
diff --git a/src/components/app/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
similarity index 98%
rename from src/components/app/SettingsPanels/survey.vue
rename to src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 200db4b..082b2e2 100644
--- a/src/components/app/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -58,7 +58,7 @@
 
 <script>
 import surveyItems from "@/utils/surveyItems.js";
-import DropDown from "@/components/app/SettingsPanels/DropDownTemplate.vue";
+import DropDown from "./DropDownTemplate.vue";
 import userService from "@/services/userService.js";
 export default {
   components: { DropDown },
diff --git a/src/components/app/TakeSurveyPopout.vue b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
similarity index 100%
rename from src/components/app/TakeSurveyPopout.vue
rename to src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
diff --git a/src/components/app/imageLargePreview.vue b/src/components/app/Popouts/Popouts/imageLargePreview.vue
similarity index 100%
rename from src/components/app/imageLargePreview.vue
rename to src/components/app/Popouts/Popouts/imageLargePreview.vue
diff --git a/src/components/app/uploadDialog.vue b/src/components/app/Popouts/Popouts/uploadDialog.vue
similarity index 99%
rename from src/components/app/uploadDialog.vue
rename to src/components/app/Popouts/Popouts/uploadDialog.vue
index 7c2f3ba..b32d55d 100644
--- a/src/components/app/uploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/uploadDialog.vue
@@ -39,7 +39,7 @@
 import filesize from "filesize";
 import emojiParser from "@/utils/emojiParser.js";
 import messagesService from "@/services/messagesService";
-import { bus } from "../../main";
+import { bus } from "@/main";
 import {mapState} from 'vuex';
 export default {
   props: ["file"],
diff --git a/src/components/app/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
similarity index 100%
rename from src/components/app/userInformationPopout.vue
rename to src/components/app/Popouts/Popouts/userInformationPopout.vue
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
new file mode 100644
index 0000000..25d5e31
--- /dev/null
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="direct-message-tab">
+    <transition name="slidein">
+      <friends-list
+        class="left-panel"
+        v-click-outside="hideLeftPanel"
+        v-show="$mq === 'mobile' && showLeftPanel || $mq === 'desktop'"
+      />
+    </transition>
+    <message-panel/>
+  </div>
+</template>
+
+<script>
+import { bus } from "@/main";
+
+import FriendsList from "@/components/app/FriendsList.vue";
+import MessagePanel from "@/components/app/MessagePanel.vue";
+
+export default {
+  components: {
+    FriendsList,
+    MessagePanel
+  },
+  data() {
+    return {
+      showLeftPanel: false
+    };
+  },
+  methods: {
+    hideLeftPanel(event) {
+      if (this.showLeftPanel) {
+        if (event.target.closest(".show-menu-button") == null) {
+          this.showLeftPanel = false;
+        }
+      }
+    }
+  },
+  mounted() {
+    bus.$on("toggleLeftMenu", () => {
+      this.showLeftPanel = !this.showLeftPanel;
+    });
+    bus.$on("closeLeftMenu", () => {
+      this.showLeftPanel = false;
+    });
+  }
+};
+</script>
+
+<style scoped>
+.slidein-enter-active,
+.slidein-leave-active {
+  transition: 0.5s;
+}
+.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  margin-left: -300px;
+}
+@media (max-width: 600px) {
+  .left-panel {
+    position: absolute;
+    top: 47px;
+    height: calc(100% - 47px);
+    background-color: rgba(39, 39, 39, 0.97);
+  }
+}
+</style>
diff --git a/src/components/app/News.vue b/src/components/app/Tabs/News.vue
similarity index 100%
rename from src/components/app/News.vue
rename to src/components/app/Tabs/News.vue
diff --git a/src/views/App.vue b/src/views/App.vue
index 16ee862..9414761 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -28,16 +28,7 @@
         </div>
         <div class="panel-layout">
           <news v-if="currentTab == 0" />
-          <span class="direct-message-tab" v-if="currentTab == 1">
-            <transition name="slidein">
-              <LeftPanel
-                class="left-panel"
-                v-click-outside="hideLeftPanel"
-                v-show="$mq === 'mobile' && showLeftPanel || $mq === 'desktop'"
-              ></LeftPanel>
-            </transition>
-            <RightPanel/>
-          </span>
+          <direct-message v-if="currentTab == 1" />
           <div class="coming-soon" v-if="currentTab > 1">
             <div class="icon"><i class="material-icons">cached</i></div>
             <div class="text">Coming soon!</div>
@@ -51,21 +42,20 @@
 
 <script>
 import { bus } from "../main";
-import Popouts from "@/components/app/Popouts.vue";
+import Popouts from "@/components/app/Popouts/Popouts.vue";
 
 import changelog from '@/utils/changelog.js';
 import ConnectingScreen from "./../components/app/ConnectingScreen.vue";
 
-const News = () => import('./../components/app/News.vue');
-const LeftPanel = () => import('./../components/app/LeftPanel.vue');
-const RightPanel = () => import('./../components/app/RightPanel.vue');
+const News = () => import('./../components/app/Tabs/News.vue');
+const DirectMessage = () => import('./../components/app/Tabs/DirectMessage.vue');
+
 
 
 export default {
   name: "app",
   components: {
-    LeftPanel,
-    RightPanel,
+    DirectMessage,
     ConnectingScreen,
     Popouts,
     News
@@ -73,18 +63,10 @@ export default {
   data() {
     return {
       currentTab: localStorage.getItem('currentTab') || 0,
-      showLeftPanel: false,
       title: "Nertivia"
     };
   },
   methods: {
-    hideLeftPanel(event) {
-      if (this.showLeftPanel) {
-        if (event.target.closest(".show-menu-button") == null) {
-          this.showLeftPanel = false;
-        }
-      }
-    },
     switchTab(index) {
       localStorage.setItem("currentTab", index);
       this.currentTab = index;
@@ -99,14 +81,6 @@ export default {
       localStorage.setItem('currentTab', 0)
     }
     localStorage.setItem('changelog-version-seen', changelog[0].version)
-
-    bus.$on("toggleLeftMenu", () => {
-      this.showLeftPanel = !this.showLeftPanel;
-    });
-    bus.$on("closeLeftMenu", () => {
-      this.showLeftPanel = false;
-    });
-
     bus.$on("title:change", title => {
       this.title = title;
     });
@@ -209,15 +183,6 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
-
-@media (max-width: 600px) {
-  .left-panel {
-    position: absolute;
-    top: 47px;
-    height: calc(100% - 47px);
-    background-color: rgba(39, 39, 39, 0.97);
-  }
-}
 @media (max-width: 470px) {
   .tabs {
     height: 40px;