Userlist badges

client/src/styles/partials/badges.scss

@@ -41,3 +41,18 @@
         height: 12px;
     }
 }
+
+.member-username .bd-message-badges-wrap {
+    display: inline-block;
+    height: 17px;
+    width: 14px;
+
+    .bd-message-badge-developer,
+    .bd-message-badge-contributor {
+        width: 14px;
+        height: 16px;
+        background-position: center;
+        background-size: 12px 12px;
+        background-repeat: no-repeat;
+    }
+}

client/src/ui/automanip.js

@@ -163,12 +163,13 @@ export default class extends EventListener {
     }
 
     setUserId(user) {
-        if (user.hasAttribute('user-id')) return;
+        if (user.hasAttribute('data-user-id')) return;
         const userid = Reflection(user).prop('user.id');
         if (!userid) return;
-        user.setAttribute('user-id', userid);
+        user.setAttribute('data-user-id', userid);
         const currentUser = userid === TempApi.currentUserId;
         if (currentUser) user.setAttribute('data-currentuser', true);
+        Events.emit('ui:useridset', user);
     }
 
     get appMount() {

client/src/ui/profilebadges.js

@@ -18,16 +18,18 @@ export default class extends EventListener {
     bindings() {
         this.uiEvent = this.uiEvent.bind(this);
         this.messageBadge = this.messageBadge.bind(this);
-        this.messageBadges = this.messageBadges.bind(this);
+        this.badges = this.badges.bind(this);
+        this.userlistBadge = this.userlistBadge.bind(this);
     }
 
     get eventBindings() {
         return [
             { id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
             { id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
-            { id: 'server-switch', callback: this.messageBadges },
-            { id: 'channel-switch', callback: this.messageBadges },
-            { id: 'ui:loadedmore', callback: this.messageBadges },
+            { id: 'server-switch', callback: this.badges },
+            { id: 'channel-switch', callback: this.badges },
+            { id: 'ui:loadedmore', callback: this.badges },
+            { id: 'ui:useridset', callback: this.userlistBadge },
             { id: 'ui-event', callback: this.uiEvent }
         ];
     }
@@ -41,7 +43,7 @@ export default class extends EventListener {
         this.inject(userid);
     }
 
-    messageBadges() {
+    badges() {
         for (const messageGroup of document.querySelectorAll('.message-group')) {
             this.messageBadge({ element: messageGroup });
         }
@@ -69,6 +71,23 @@ export default class extends EventListener {
         );
     }
 
+    userlistBadge(e) {
+        const c = this.contributors.find(c => c.id === e.dataset.userId);
+        if (!c) return;
+        const memberUsername = e.querySelector('.member-username');
+        if (!memberUsername) return;
+        const root = document.createElement('span');
+        memberUsername.append(root);
+        const { developer, contributor, webdev } = c;
+        VueInjector.inject(
+            root,
+            DOM.createElement('div', null, 'bdmessagebadges'),
+            { BdMessageBadge },
+            `<BdMessageBadge developer="${developer}" webdev="${webdev}" contributor="${contributor}"/>`,
+            true
+        );
+    }
+
     inject(userid) {
         const c = this.contributors.find(c => c.id === userid);
         if (!c) return;