show members in a room

front/src/views/room/Header.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import Badge from "@/components/Badge.vue";
-import { RoomType } from "@/store/models/model";
+import { RoomType, Address } from "@/store/models/model";
+import MemberList from "./MemberList.vue";
 
 const props = defineProps({ id: Number, room: Object });
 
 const roomTitle = () => {
-    const type =  props.room?.roomType;
+    const type = props.room?.roomType;
     if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
-        return  props.room?.user;
+        return props.room?.user;
     }
-    return  props.room?.roomName;
+    return props.room?.roomName;
 };
+
+const to = () => props.room?.members.filter((member: Address) => member.type == "to");
+const cc = () => props.room?.members.filter((member: Address) => member.type == "cc");
 </script>
 
 <template>
@@ -23,20 +27,30 @@ const roomTitle = () => {
             </div>
             <div class="action">action: threads message important</div>
         </div>
+        <div class="members" v-if="room?.roomType != RoomType.DM">
+            <MemberList v-if="to()?.length > 0" type="to" :members="to()" />
+            <MemberList v-if="cc()?.length > 0" type="cc" :members="cc()" />
+        </div>
     </div>
 </template>
 
 <style scoped>
+.main {
+    border-bottom: 1px solid #505050;
+}
 .context {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
     border-bottom: 1px solid #505050;
+    align-items: center;
     width: 100%;
     height: 35px;
 }
 
+.members {
+}
+
 .infos {
     margin-left: 15px;
 }

front/src/views/room/MemberList.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import { Address } from "@/store/models/model";
 import { defineProps } from "vue";
 
 const props = defineProps({ type: String, members: Object });
-
+let emails = "";
+props.members?.forEach((member: Address) => {
+    emails += member.email + "; ";
+});
 </script>
 
 <template>
     <div class="main">
-        
+        {{ props.type }}:
+        {{ emails }}
     </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

front/src/views/room/Message.vue

@@ -3,7 +3,6 @@ import { defineProps, onMounted, ref, watch } from "vue";
 import { decodeEmojis } from "../../utils/string";
 import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
-import store from "@/store/store";
 
 const props = defineProps({
     data: {
@@ -12,7 +11,7 @@ const props = defineProps({
         content: String,
         date: String,
     },
-    members: Array
+    members: Array,
 });
 const iframe = ref(null);
 

front/src/views/sidebar/rooms/Room.vue

@@ -2,7 +2,7 @@
 import { useRouter } from "vue-router";
 import { defineProps } from "vue";
 import BaseAvatar from "../../avatars/BaseAvatar.vue";
-import Badge from "../../../components/Badge.vue";
+import Badge from "@/components/Badge.vue";
 import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
 

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -2,6 +2,7 @@
 import store from "@/store/store";
 import { defineProps } from "vue";
 import { useRouter } from "vue-router";
+import Badge from "@/components/Badge.vue";
 
 const props = defineProps({
     threadId: Number,