show list of users in rooms

front/src/assets/css/main.css

@@ -8,5 +8,6 @@
     --tertiary-background: #2a2a33;
     --quaternary-background: #303a46;
     --selected: #41474f;
+    /* 343a46 */
 }
 /* .badge-primary { */

front/src/components/User.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { Address } from "@/store/models/model";
+import Badge from "./Badge.vue";
+
+const props = defineProps({ address: Object as PropType<Address> });
+const value = props.address?.name ? props.address?.name : props.address?.email;
+</script>
+
+<template>
+    <div class="main">
+        {{ value }}
+    </div>
+</template>
+
+<style scoped>
+.main {
+    align-items: center;
+    background-color: var(--quaternary-background);
+    border-radius: 1.6rem;
+    color: var(--primary-text);
+    display: inline-flex;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0.1rem 0.4em;
+}
+</style>

front/src/utils/string.ts

@@ -1,7 +1,7 @@
 // todo optimize
 
-export function decodeEmojis(text: string): string {
-    if (!text) return text;
+export function decodeEmojis(text: string | undefined): string {
+    if (!text) return "";
     const regex = /\\u{([^}]+)}/g;
     const decodedText = text.replace(regex, (_: string, hex: string) => String.fromCodePoint(parseInt(hex, 16)));
     return decodedText;

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>