added developer badge, added general tab.

src/components/ProfilePictureTemplate.vue

@@ -27,6 +27,7 @@ export default {
       crown: require("twemoji/2/svg/1f451.svg"),
       flower: require("twemoji/2/svg/1f33a.svg"),
       heart: require("twemoji/2/svg/2764.svg"),
+      developer: require("twemoji/2/svg/2728.svg"),
     };
   },
   computed: {
@@ -46,6 +47,11 @@ export default {
           name: "supporter",
           emotePath: this.heart
         };
+      if (this.$props.admin == 6)
+        return {
+          name: "developer",
+          emotePath: this.developer
+        };
       return ""
     },
     statusColor() {
@@ -126,6 +132,15 @@ export default {
   left: -3px;
 }
 
+.developer {
+  background: linear-gradient(30deg, #6853b9, rgba(254, 94, 189, .8));
+}
+.developer .emote {
+  z-index: 999;
+  top: -3px;
+  left: -3px;
+}
+
 .emote {
   position: absolute;
   height: 20px;

src/components/app/MessageTemplate.vue

@@ -184,6 +184,10 @@ export default {
 
 
 <style scoped>
+.container {
+  position: relative;
+  z-index: 999;
+}
 .presence-message {
   margin: 10px;
   padding: 10px;

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="drop-down">
+    <div class="title">{{name}}</div>
+    <div class="current-select-box" ref="dropDown" @click="dropped = !dropped"><div class="name">{{selectedItem ? selectedItem.name : items[0].name}}</div><div class="material-icons">expand_more</div></div>
+    <div class="drop" v-if="dropped">
+      <div v-for="(item, index) of items" :key="index" class="item" :class="{selected: selectedItem === item}" @click="itemClick(item)">{{item.name}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['items', 'name', 'selectedItem'],
+  data() {
+    return {
+      dropped: false
+    }
+  },
+  methods: {
+    itemClick(item) {
+      this.$emit('change', item)
+    },
+    documentClick(e) {
+      const target = e.target;
+      const el = this.$refs.dropDown
+      if (((el !== target) && !el.contains(target)) && this.dropped) {
+         this.dropped = false;
+      }
+    }
+  },
+  created() {
+    document.addEventListener('click', this.documentClick);
+  },
+  destroyed() {
+    document.removeEventListener('click', this.documentClick);
+  }
+}
+</script>
+
+<style scoped>
+.drop-down {
+  background-color: rgb(44, 44, 44);
+  border-radius: 10px;
+  padding: 5px;
+  user-select: none;
+  cursor: default;
+  flex-shrink: 0;
+  position: relative;
+}
+.title {
+  margin-bottom: 2px;
+}
+.current-select-box {
+  background: rgba(22, 22, 22, 0.411);
+  border-radius: 10px;
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  transition: 0.3s;
+}
+.current-select-box:hover {
+  background: rgba(22, 22, 22, 0.788);
+}
+.current-select-box div {
+  align-self: center;
+}
+.current-select-box .name {
+  margin: auto;
+  margin-left: 2px;
+}
+.drop {
+  position: absolute;
+  background: rgb(80, 80, 80);
+  border-radius: 10px;
+  left: 0;
+  right: 0;
+  z-index: 11111;
+  max-height: 100px;
+  overflow: auto;
+  padding: 2px;
+  margin-top: 5px;
+}
+.item {
+  padding: 5px;
+  border-radius: 5px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  background: rgba(37, 37, 37, 0.322);
+}
+.item:hover {
+  background: rgb(37, 37, 37);
+}
+.item.selected {
+  background: rgb(41, 41, 41);
+}
+</style>
+

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

@@ -1,10 +1,30 @@
 <template>
-    <div class="content-inner">
+  <div class="content-inner">
-      <div class="top">
+    <div class="top">
-        <div class="server-avatar"></div>
+      <!-- <div class="server-avatar"></div> -->
-        <div class="server-name">{{server.name}}</div>
+      <div class="input">
+        <div class="input-title">Server Name</div>
+        <input
+          type="text"
+          ref="name"
+          placeholder="Channel Name"
+          :default-value.prop="server.name"
+          @input="inputEvent('name', $event)"
+        />
       </div>
     </div>
+    <div class="details">
+      <div class="options">
+        <drop-down
+          :items="channels"
+          :selected-item="defaultChannel"
+          name="Default Channel"
+          @change="changeEvent('default_channel_id', $event.channelID)"
+        />
+      </div>
+      <div class="button save-button" v-if="changed">Save Changes</div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -12,34 +32,122 @@ import config from "@/config.js";
 import { bus } from "@/main";
 import Spinner from "@/components/Spinner.vue";
 import ServerService from "@/services/ServerService";
+import DropDown from "./DropDownMenu";
 import { mapState } from "vuex";
 
 export default {
-  components: {Spinner},
+  components: { Spinner, DropDown },
+  data() {
+    return {
+      changed: false,
+      update: {}
+    };
+  },
+  methods: {
+    inputEvent(name, event) {
+      this.$set(this.update, name, event.target.value);
+    },
+    changeEvent(name, value) {
+      this.$set(this.update, name, value);
+    }
+  },
+  watch: {
+    update(test) {
+      this.changed = true;
+    }
+  },
   computed: {
     server() {
-      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
-      return this.$store.getters['servers/servers'][serverID]
+      return this.$store.getters["servers/servers"][serverID];
+    },
+    defaultChannel() {
+      const channels = this.$store.getters.channels;
+      if (this.update.default_channel_id) {
+        return channels[this.update.default_channel_id];
+      }
+      return channels[this.server.default_channel_id];
+    },
+    channels() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
+      const channelsIds = this.$store.getters["servers/channelsIDs"][serverID];
+      if (channelsIds) {
+        let channels = [];
+        for (let channelID of channelsIds) {
+          channels.push(this.$store.getters.channels[channelID]);
+        }
+        return channels;
+      } else {
+        return false;
+      }
     }
   }
 };
 </script>
 
 <style scoped>
+.content-inner {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
 .server-avatar {
   background: grey;
   height: 90px;
   width: 90px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 .top {
-  margin: 10px;
   display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.details {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.options {
+  width: 230px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: center;
 }
 .server-name {
   align-self: center;
   margin-left: 10px;
-
+}
+.input {
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(44, 44, 44);
+  border-radius: 10px;
+  padding: 5px;
+  align-self: center;
+  margin: 10px;
+}
+.input input {
+  border-radius: 10px;
+}
+.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);
+}
+.save-button {
+  margin-top: 50px;
 }
 </style>
 

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

@@ -10,7 +10,7 @@
           <input type="text" ref="name" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
         </div>
         <div class="button" v-if="update.name" @click="updateChannel">Save Changes</div>
-        <div class="button warn delete-server" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
+        <div class="button warn delete-server" :class="{disabled: deleteClicked}" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
       </div>
     </div>
 </template>
@@ -27,6 +27,7 @@ export default {
   data() {
     return {
       deleteButtonConfirmed: false,
+      deleteClicked: false,
       selectedChannelIndex: 0,
       update: {
         name: null
@@ -47,11 +48,15 @@ export default {
       }
     },
     async deleteChannel() {
+      if (this.deleteClicked) return;
       if (!this.deleteButtonConfirmed) {
         return this.deleteButtonConfirmed = true; 
       }
+      this.deleteClicked = true;
       const {ok, error, result} = await ServerService.deleteChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID)
-      console.log({ok, error, result})
+      this.deleteButtonConfirmed = false;
+      this.selectedChannelIndex = null;
+      this.deleteClicked = false;
     },
     inputEvent(name, event) {
       this.update.name = event.target.value
@@ -109,10 +114,12 @@ export default {
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .channel .name {
   overflow: hidden;
   text-overflow: ellipsis; 
+  white-space: nowrap;
 }
 .channel div {
   align-self: center;
@@ -134,6 +141,7 @@ export default {
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
 }
 .button {
   background: rgba(17, 148, 255, 0.692);
@@ -154,6 +162,13 @@ export default {
 .button.warn:hover {
   background: rgb(255, 17, 17);
 }
+.button.disabled {
+  background: grey;
+}
+.button.disabled:hover {
+  background: grey;
+}
+
 .delete-server{
   margin: auto;
   margin-bottom: 0;

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

@@ -6,9 +6,9 @@
       </div>
       <div class="content">
         <div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
-        <!-- <general v-if="index === 0"/> -->
+        <general v-if="index === 0"/>
-        <manage-channels v-if="index === 0"/>
+        <manage-channels v-if="index === 1"/>
-        <delete-server v-if="index === 1"/>
+        <delete-server v-if="index === 2"/>
       </div>
     </div>
   </div>
@@ -32,7 +32,7 @@ export default {
     return {
       index: 0,
       tabs: [
-        // {title: "General", icon: "info"},
+         {title: "General", icon: "info"},
         {title: "Manage Channels", icon: "storage"},
         // {title: "Manage Invites", icon: "local_post_office"},
         {title: "Delete Server", icon: "warning", critical: true},
@@ -92,6 +92,8 @@ export default {
   flex-direction: column;
 }
 .tabs {
+  display: flex;
+  flex-direction: column;
   background: rgba(26, 26, 26, 0.897);
   height: 100%;
   width: 180px;
@@ -106,6 +108,7 @@ export default {
   user-select: none;
   display: flex;
   align-content: center;
+  flex-shrink: 0;
 }
 .tab .material-icons {
   margin-right: 3px;
@@ -135,4 +138,19 @@ export default {
   align-self: center;
   margin-left: 10px;
 }
+
+@media (max-width: 614px) {
+  .inner {
+    flex-direction: column;
+  }
+  .tabs {
+    width: 100%;
+    height: 50px;
+    flex-direction: row;
+    overflow: auto;
+  }
+  .tabs::-webkit-scrollbar {
+    height: 5px;
+  }
+}
 </style>

src/components/app/Popouts/Popouts/Settings.vue

@@ -84,7 +84,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 99;
+  z-index: 99999999;
   display: flex;
   color: white;
 }

src/views/App.vue

@@ -194,7 +194,6 @@ export default {
   height: 100%;
 }
 
-
 .notifyAnimation{
   animation: notifyAnime;
   animation-duration: 1s;
@@ -266,6 +265,9 @@ export default {
 .tabs::-webkit-scrollbar {
   height: 5px;
 }
+.tabs {
+  scrollbar-width: thin;
+}
 
 .tab {
   flex-shrink: 0;
@@ -326,6 +328,7 @@ export default {
 
 
 <style>
+
 textarea {
   font-family: "Roboto", sans-serif;
 }