feat: add member list in inbox-details for channels/groups

src/components/inbox/InboxDetailsGroupMembers.vue

@@ -16,6 +16,33 @@ list-disclosure(
   class="c-inbox-details-group-members"
   separated
 )
+  list-button(
+    v-for="member in members"
+    size="small"
+    class="c-inbox-details-group-members__member"
+  )
+    template(
+      v-slot:icon
+    )
+      base-avatar(
+        :jid="member.jid"
+        class="c-inbox-details-group-members__avatar"
+        size="20px"
+        shadow="none"
+      )
+
+    template(
+      v-slot:default
+    )
+      span.c-inbox-details-group-members__name.u-ellipsis
+        | {{ member.name }}
+
+      base-presence(
+        :jid="member.jid"
+        size="tiny"
+        class="c-inbox-details-group-members__presence"
+        available-only
+      )
 </template>
 
 <!-- **********************************************************************
@@ -26,6 +53,7 @@ list-disclosure(
 // NPM
 import { Room } from "@prose-im/prose-sdk-js";
 import { PropType } from "vue";
+import { JID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: STORES
 import Store from "@/store";
@@ -45,6 +73,17 @@ export default {
     }
   },
 
+  computed: {
+    members(): Array<{ jid: JID; name: string }> {
+      return this.room.members.map((memberJID: JID) => {
+        return {
+          jid: memberJID,
+          name: Store.$roster.getEntryName(memberJID)
+        };
+      });
+    }
+  },
+
   methods: {
     // --> EVENT LISTENERS <--
 
@@ -63,6 +102,12 @@ export default {
 $c: ".c-inbox-details-group-members";
 
 .c-inbox-details-group-members {
-  /* TODO */
+  #{$c}__member {
+    #{$c}__presence {
+      margin-inline-start: 4px;
+      margin-block-start: 3px;
+      flex: 0 0 auto;
+    }
+  }
 }
 </style>