bug fixes and changes.

src/components/app/FriendsList.vue

@@ -2,22 +2,23 @@
   <div class="left-panel">
     <MyMiniInformation />
     <div class="tabs">
-      <div :class="{selector: true, right: !isFriendsTab}" />
+      <div :class="{selector: true, right: currentTab === 1}" />
       <div
         class="tab"
-        @click="isFriendsTab = true"
+        @click="currentTab = 0"
       >
         Friends
       </div>
       <div
         class="tab"
-        @click="isFriendsTab = false"
+        :class="{notifyAnimation: DMNotification}"
+        @click="currentTab = 1"
       >
         Recents
       </div>
     </div>
     <div
-      v-if="isFriendsTab"
+      v-if="currentTab === 0"
       class="list"
     >
       <pending-friends />
@@ -55,8 +56,35 @@ export default {
   },
   data() {
     return {
-      isFriendsTab: true
+      currentTab:  0
     }
+  },
+  watch: {
+    currentTab(tab) {
+      localStorage.setItem('friendsListTab', tab)
+    }
+  },
+  mounted() {
+    const tab = localStorage.getItem('friendsListTab');
+    if (tab) {
+      this.currentTab = parseInt(tab)
+    }
+  },
+  computed: {
+    DMNotification() {
+      const notifications = this.$store.getters.notifications;
+      const channels = this.$store.getters.channels
+      const notification = notifications.find(e => {
+        return channels[e.channelID] && !channels[e.channelID].server_id
+      })
+      // unopened dm
+      if (!notification) {
+        return notifications.find(e => {
+          return !channels[e.channelID]
+        })
+      }
+      return notification;
+    },
   }
 }
 </script>
@@ -138,4 +166,25 @@ export default {
 .list::-webkit-scrollbar-thumb:hover {
     background: #f5f5f59e;
 }
+
+.notifyAnimation{
+  animation: notifyAnime;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
+}
+@keyframes notifyAnime {
+  0%{
+    background: rgba(121, 3, 3, 0.541);
+  }
+  40%{
+    background: rgba(255, 0, 0, 0.568);
+  }
+  60%{
+    background: rgba(255, 0, 0, 0.568);
+  }
+  100%{
+    background: rgba(121, 3, 3, 0.541);
+  }
+}
 </style>

src/components/app/MessagePanel.vue

@@ -378,6 +378,23 @@ export default {
           break;
         }
       }
+    },
+    async onFocus(event) {
+      if (this.message.trim() !== "") {
+        await typingService.post(this.selectedChannelID);
+        this.postTimer();
+      }
+      bus.$emit("title:change", "Nertivia");
+      if (!this.$store.getters.selectedChannelID) return;
+    //dismiss notification on focus
+      const find = this.$store.getters.notifications.find(notification => {
+        return notification.channelID === this.$store.getters.selectedChannelID;
+      });
+      if (find && find.count >= 1) {
+        this.$socket.emit("notification:dismiss", {
+          channelID: this.$store.getters.selectedChannelID
+        });
+      }
     }
   },
   mounted() {
@@ -418,23 +435,8 @@ export default {
       clearTimeout(this.postTimerID);
       this.postTimerID = null;
     }
-    window.onfocus = async () => {
+    window.addEventListener('focus', this.onFocus)
-      if (this.message.trim() !== "") {
+
-        await typingService.post(this.selectedChannelID);
-        this.postTimer();
-      }
-      bus.$emit("title:change", "Nertivia");
-      if (!this.$store.getters.selectedChannelID) return;
-    //dismiss notification on focus
-      const find = this.$store.getters.notifications.find(notification => {
-        return notification.channelID === this.$store.getters.selectedChannelID;
-      });
-      if (find && find.count >= 1) {
-        this.$socket.emit("notification:dismiss", {
-          channelID: this.$store.getters.selectedChannelID
-        });
-      }
-    };
   },
   
   beforeDestroy() {
@@ -443,6 +445,7 @@ export default {
     bus.$off("newMessage", this.hideTypingStatus);
     bus.$off("emojiSuggestions:Selected", this.enterEmojiSuggestion);
     bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
+    window.removeEventListener('focus', this.onFocus)
     delete this.$options.sockets.typingStatus;
   },
   computed: {

src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="content-inner">
       <div class="channels-list">
+        <div class="channel add-channel-button" @click="createChannel()"><div class="material-icons">add</div><div>Create Channel</div></div>
         <div class="channel" v-for="(channel, index) in channels" :key="channel.channelID" :class="{selected: index === selectedChannelIndex}" @click="selectedChannelIndex = index">{{channel.name}}</div>
-        <div class="channel" @click="createChannel()">Create Channel</div>
       </div>
       <div class="details">
         <div class="input">
         <div class="input-title">Server Name</div>
-          <input type="text" placeholder="Channel Name" :value="channels[selectedChannelIndex].name">
+          <input type="text" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
         </div>
+        <div class="button" v-if="update.name">Save Changes</div>
       </div>
     </div>
 </template>
@@ -24,13 +25,19 @@ export default {
   components: {Spinner},
   data() {
     return {
-      selectedChannelIndex: 0
+      selectedChannelIndex: 0,
+      update: {
+        name: null
+      }
     }
   },
   methods: {
     async createChannel() {
       const {ok, error, result} = await ServerService.createChannel(this.server.server_id, "New Channel");
       console.log(ok, error, result) 
+    },
+    inputEvent(name, event) {
+      this.update.name = event.target.value
     }
   },
   computed: {
@@ -64,7 +71,7 @@ export default {
 .channels-list {
   background: #161616e5;
   height: 100%;
-  width: 150px;
+  width: 155px;
   flex-shrink: 0;
 }
 .channel {
@@ -72,8 +79,13 @@ export default {
   padding: 5px;
   margin: 5px;
   user-select: none;
-  cursor: default;
+  cursor: pointer;
   transition: 0.3s;
+  display: flex;
+
+}
+.channel div {
+  align-self: center;
 }
 .channel:hover {
   background: rgba(58, 58, 58, 0.849);
@@ -81,11 +93,31 @@ export default {
 .channel.selected {
   background: rgb(58, 58, 58);
 }
+.add-channel-button {
+  background: rgba(17, 148, 255, 0.692);
+  transition: 0.3s;
+}
+.add-channel-button:hover {
+  background: rgb(17, 148, 255);
+}
 .details {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
+.button {
+  background: rgba(17, 148, 255, 0.692);
+  padding: 10px;
+  border-radius: 5px;
+  align-self: center;
+  margin: 5px;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.3s;
+}
+.button:hover {
+  background: rgb(17, 148, 255);
+}
 .input {
   display: flex;
   flex-direction: column;

src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue

@@ -42,9 +42,8 @@ export default {
 
   methods: {
     closeMenu() {
-      this.$store.dispatch("setPopoutVisibility", {
+      this.$store.dispatch("setServerSettings", {
-        name: "showServerInviteMenu",
+        serverID: null
-        visibility: false
       });
     },
     backgroundClick(e) {

src/utils/changelog.js

@@ -13,10 +13,25 @@
   }
 
 const config = [
+  {
+    version: 4.9,
+    title: "Color codeblocks and create multiple channels!",
+    shortTitle: "",
+    date: "10/07/2019",
+    headColor: "rgba(40, 100, 190, 0.77)",
+    new: [
+      "You can now color your code (thanks bree!) by typing: <div style='background: #00000066; border-radius: 5px; padding: 5px;'>```js<br>    console.log('Hello World!');<br>```</div>",
+      "A new server settings option has been added that allows you to delete your server, create new channels and rename your channels. More future will be added in the future! ",
+      "The 'Recents' tab should now flash red when you get a notificaiton.",
+      "Friends and Recents tabs position will be saved when visiting the site."
+    ],
+    fix: ['Fixed a bug where, when you are on the changelog or the server browser tab, the notifications get dismissed.'],
+    next: ["more server settings"],
+  },
   {
     version: 4.8,
     title: "Server Members Status and new Logo!",
-    shortTitle: "",
+    shortTitle: "Server Members Status and new Logo!",
     date: "08/07/2019",
     headColor: "rgba(0, 156, 170, 0.77)",
     new: [