show list of users in rooms

front/src/views/room/Header.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, PropType } from "vue";
 import Badge from "@/components/Badge.vue";
-import { RoomType, Address } from "@/store/models/model";
+import { RoomType, Address, Room } from "@/store/models/model";
 import MemberList from "./MemberList.vue";
 
-const props = defineProps({ id: Number, room: Object });
+const props = defineProps({ id: Number, room: Object as PropType<Room> });
 
 const roomTitle = () => {
     const type = props.room?.roomType;
@@ -22,21 +22,20 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
     <div class="main">
         <div class="context">
             <div class="infos">
-                <Badge :value="RoomType[room?.roomType]" />
+                <Badge :value="RoomType[room?.roomType ?? 0]" />
                 {{ 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()" />
+            <MemberList class="members-list" v-if="to()?.length ?? 0 > 0" type="to" :members="to()" />
+            <MemberList class="members-list" v-if="cc()?.length ?? 0 > 0" type="cc" :members="cc()" />
         </div>
     </div>
 </template>
 
 <style scoped>
 .main {
-    border-bottom: 1px solid #505050;
 }
 .context {
     display: flex;
@@ -48,6 +47,11 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
     height: 35px;
 }
 
+.members-list {
+    padding: 3px 0;
+    margin: 0 5px;
+    border-bottom: 1px solid #505050;
+}
 .members {
 }
 

front/src/views/room/MemberList.vue

@@ -1,19 +1,36 @@
 <script setup lang="ts">
+import Badge from "@/components/Badge.vue";
+import User from "@/components/User.vue";
 import { Address } from "@/store/models/model";
-import { defineProps } from "vue";
+import { defineProps, PropType } from "vue";
 
-const props = defineProps({ type: String, members: Object });
-let emails = "";
-props.members?.forEach((member: Address) => {
-    emails += member.email + "; ";
-});
+const props = defineProps({ type: String, members: Object as PropType<Address[]> });
+// const members: Address[] = [];
+
+// for (let i = 0; i < 4; i++) {
+//     if (!props.members) continue;
+//     members?.push(props?.members[0]);
+// }
 </script>
 
 <template>
     <div class="main">
-        {{ props.type }}:
-        {{ emails }}
+        <Badge :value="props.type + ': '" />
+        <div class="users">
+            <User class="user" v-for="(member, index) in props?.members" :key="index" :address="member" />
+        </div>
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.main {
+    display: flex;
+}
+.users {
+    display: flex;
+}
+
+.user {
+    margin-left: 5px;
+}
+</style>