From 9f93aa6bad9ad1beadc750c6933c5db33983e80b Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 24 Mar 2024 12:23:15 +0200
Subject: [PATCH] Add badges to the member list for moderators and admin

---
 src/assets/css/chat.scss    | 13 +++++++++++++
 src/components/RoomInfo.vue | 17 +++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 3822fdf..0e7541e 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -993,6 +993,19 @@ body {
     }
   }
 
+  .user-icon-with-badge {
+    display: inline;
+
+    .user-badge {
+      border: 0.5px solid rgba(0, 0, 0, 0.1);
+      position: absolute;
+      left: 35px;
+      top: 30px;
+      background: #FFFFFF;
+      padding: 10px;
+    }
+  }
+
   .show-all {
     color: black;
     font-size: 14 * $chat-text-size;
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index ea19a15..59ec98d 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -214,12 +214,17 @@
               @click="onListItemClick(member)"
             >
               <div>
-                <v-avatar class="avatar" size="32" color="grey">
-                  <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
-                  <span v-else class="white--text headline">{{
-                    member.name.substring(0, 1).toUpperCase()
-                  }}</span>
-                </v-avatar>
+                <div class="user-icon-with-badge">
+                  <v-avatar class="avatar" size="32" color="grey">
+                    <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
+                    <span v-else class="white--text headline">{{
+                      member.name.substring(0, 1).toUpperCase()
+                    }}</span>
+                  </v-avatar>
+                  <v-avatar circle class="user-badge" size="15" v-if="isAdmin(member) || isModerator(member)">
+                    <v-icon>{{ `$vuetify.icons.${isAdmin(member)? 'make_admin' : 'make_moderator'}` }}</v-icon>
+                  </v-avatar>
+                </div>
                 <span class="user-name">
                 {{
                   member.userId == $matrix.currentUserId