fixed some bugs, added some permissions

src/components/app/MemberTemplate.vue

@@ -54,9 +54,9 @@ export default {
       const roles = this.$store.getters["servers/selectedServerRoles"];
       if (!roles) return undefined;
 
-      const filter = roles.filter(r => this.member.roles.includes(r.id));
+      let filter = roles.filter(r => this.member.roles.includes(r.id));
       if (!filter.length) {
-        return null;
+        filter = [roles.find(r => r.default)];
       }
       return filter[0].color;
     }

src/components/app/MembersList.vue

@@ -22,8 +22,12 @@
         />
       </div>
 
-      <div class="tab" v-if="noneRoleOnlineMembers.length">
+      <div
-        Online ({{ noneRoleOnlineMembers.length }})
+        class="tab"
+        v-if="noneRoleOnlineMembers.length"
+        :style="{ color: defaultRole.color }"
+      >
+        {{ defaultRole.name }} ({{ noneRoleOnlineMembers.length }})
       </div>
       <member-template
         v-for="member in noneRoleOnlineMembers"
@@ -134,6 +138,10 @@ export default {
       }
       return newRolesWithMembers;
     },
+    defaultRole() {
+      const roles = this.$store.getters["servers/selectedServerRoles"];
+      return roles.find(r => r.default);
+    },
     offlineMembers() {
       return this.members.filter(sm => sm.presense == 0);
     }

src/components/app/Popouts/Popouts/ServerMemberContext.vue

@@ -139,13 +139,17 @@ export default {
       const roles = this.$store.getters["servers/roles"][
         this.contextDetails.serverID
       ];
-
+      const map = roles
-      const map = roles.map(r => {
+        .filter(r => !r.default)
-        if (this.serverMember.roles && this.serverMember.roles.includes(r.id)) {
+        .map(r => {
-          return Object.assign({}, r, { hasRole: true });
+          if (
-        }
+            this.serverMember.roles &&
-        return r;
+            this.serverMember.roles.includes(r.id)
-      });
+          ) {
+            return Object.assign({}, r, { hasRole: true });
+          }
+          return r;
+        });
 
       return map;
     }

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

@@ -69,27 +69,40 @@
             :key="index"
           >
             <div class="box" :class="{ checked: perm.hasPerm }" />
-            <div class="name">{{ perm.name }}</div>
+            <div>
+              <div class="name">{{ perm.name }}</div>
+              <div class="info">{{ perm.info }}</div>
+            </div>
           </div>
         </div>
 
         <div
           class="button"
-          v-if="update.name || update.permissions || update.color"
+          v-if="update.name || update.permissions !== undefined || update.color"
           @click="updateRole"
         >
           Save Changes
         </div>
         <div
           class="button warn delete-server disabled"
-          v-if="!roles[selectedRoleIndex].deletable"
+          v-if="
+            !roles[selectedRoleIndex].deletable ||
+              roles[selectedRoleIndex].default
+          "
         >
-          Cannot delete this role.
+          {{
+            roles[selectedRoleIndex].default
+              ? "Cannot delete default role."
+              : "Cannot delete this role."
+          }}
         </div>
         <div
           class="button warn delete-server"
           :class="{ disabled: deleteClicked }"
-          v-if="roles[selectedRoleIndex].deletable"
+          v-if="
+            roles[selectedRoleIndex].deletable &&
+              !roles[selectedRoleIndex].default === true
+          "
           @click="deleteRole"
         >
           {{ deleteButtonConfirmed ? "ARE YOU SURE?" : "Delete Role" }}
@@ -222,7 +235,13 @@ export default {
         const roles = this.$store.getters["servers/roles"][
           this.server.server_id
         ];
+        if (!roles) {
+          return [];
+        }
         return [...roles].sort((a, b) => {
+          if (b.default) {
+            return -1;
+          }
           return a.order - b.order;
         });
       },
@@ -425,15 +444,20 @@ export default {
   user-select: none;
   cursor: pointer;
   .box {
-    height: 20px;
+    height: 30px;
-    width: 20px;
+    width: 30px;
     flex-shrink: 0;
-    background-color: rgb(255, 31, 31);
+    background-color: rgb(95, 95, 95);
     margin-right: 5px;
     border-radius: 2px;
     &.checked {
       background-color: rgb(31, 154, 255);
     }
   }
+  .info {
+    color: rgb(255, 255, 255);
+    opacity: 0.7;
+    font-size: 15px;
+  }
 }
 </style>

src/components/app/Tabs/Explore/serverTemplate.vue

@@ -168,6 +168,7 @@ export default {
     flex: 1;
     height: 100%;
     flex-shrink: 0;
+    overflow: auto;
 
     .description {
       margin: 10px;

src/components/app/Tabs/Explore/themesTemplate.vue

@@ -145,6 +145,7 @@ export default {
     background: #04333f;
     flex: 1;
     height: 100%;
+    overflow: auto;
     flex-shrink: 0;
     .name {
       margin-top: 9px;

src/store/modules/serversModule.js

@@ -85,6 +85,12 @@ const actions = {
       server_id: server_id
     });
   },
+  removeAllRoles({ commit }, server_id) {
+    commit("UPDATE_SERVER_ROLES", {
+      roles: [],
+      server_id: server_id
+    });
+  },
   updateRole({ commit, state }, roleUpdates) {
     const updatedRoles = state.roles[roleUpdates.server_id].map(r => {
       if (r.id === roleUpdates.id) {

src/store/modules/socketIOModule.js

@@ -392,6 +392,7 @@ const actions = {
     context.dispatch("servers/removePresences", server_id);
     context.dispatch("servers/removeServer", server_id);
     context.dispatch("servers/removeNotifications", server_id);
+    context.dispatch("servers/removeAllRoles", server_id);
     context.dispatch("servers/removeAllServerChannels", server_id);
     context.dispatch("deleteAllMessages", serverChannelIDs);
   },
@@ -502,6 +503,9 @@ const actions = {
   ["socket_server:updateRoles"](context, { roles }) {
     // eslint-disable-next-line prettier/prettier
     context.dispatch("servers/setServerRoles", roles);
+  },
+  ["socket_server:roles"](context, { roles }) {
+    context.dispatch("servers/setServerRoles", roles);
   }
 };
 

src/utils/RolePermissions.js

@@ -1,11 +1,13 @@
 export const permissions = {
   ADMIN: {
     name: "Admin",
-    value: 1
+    value: 1,
+    info: "Enables ALL permissions"
   },
-  SEND_MESSAGE: {
+  SEND_MESSAGES: {
-    name: "Send Message",
+    name: "Send Messages",
-    value: 2
+    value: 2,
+    info: "Send messages to server channels"
   }
 };