show flags on front

front/src/views/room/Message.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch, PropType, Prop } from "vue";
+import { defineProps, onMounted, ref, watch, PropType } from "vue";
 import { decodeEmojis } from "../../utils/string";
 import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
@@ -9,6 +9,7 @@ const props = defineProps({
     msg: Object as PropType<Message>,
     members: Array as PropType<Address[]>,
 });
+console.log(props.msg);
 const iframe = ref<HTMLIFrameElement>();
 
 // todo dompurify
@@ -62,6 +63,21 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
     });
     return res;
 };
+
+const classes = (): string => {
+    const flags = props.msg?.flags?.split(",");
+
+    // not flags implies no seen flag
+    if (!flags) return "msg-notSeen";
+
+    // Important takes the priority on Seen flag
+    if (flags.includes("\\Important")) {
+        return "msg-important";
+    } else if (!flags.includes("\\Seen")) {
+        return "msg-notSeen";
+    }
+    return "msg-basic";
+};
 </script>
 <!-- to if to is more than me
         cc -->
@@ -89,7 +105,7 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
                 }}
             </div>
         </div>
-        <div class="content">
+        <div class="content" :class="[classes()]">
             <iframe ref="iframe"></iframe>
             <div class="options">options</div>
         </div>
@@ -126,8 +142,18 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
     display: flex;
     padding-top: 6px;
     flex-direction: row;
-    /* background-color: #ec7a4342;
-    background-color: #353c6261; */
+}
+
+.msg-important {
+    background-color: #ec7a4342;
+}
+
+.msg-notSeen {
+    background-color: #222b5b61;
+}
+
+.msg-basic {
+    background-color: var(--tertiary-background);
 }
 
 iframe {
@@ -135,7 +161,7 @@ iframe {
     max-height: 300px;
     flex-basis: 100%;
     border: none;
-    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    max-width: 640px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);
 }
 

front/src/views/room/RoomView.vue

@@ -37,7 +37,7 @@ const shouldDisplayComposer = () => {
                 <Message
                     v-for="(message, index) in room?.messages"
                     :key="index"
-                    :data="message"
+                    :msg="message"
                     :members="room?.members"
                 />
             </div>

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

@@ -1,23 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { useRouter } from "vue-router";
-import { defineProps } from "vue";
+import { defineProps, PropType } from "vue";
 import BaseAvatar from "../../avatars/BaseAvatar.vue";
 import Badge from "@/components/Badge.vue";
 import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
+import { Room } from "@/store/models/model";
 
 const props = defineProps({
-    data: {
-        id: Number,
-        roomName: String,
-        user: String,
-        userId: Number,
-        notSeen: Number,
-        mailboxId: Number,
-        threadIds: Array,
-    },
+    room: Object as PropType<Room>,
 });
-// console.log(props.data.threadIds);
+// console.log(props.room?.threadIds);
 
 const router = useRouter();
 </script>
@@ -26,18 +19,17 @@ const router = useRouter();
     <div>
         <div
             class="room"
-            @click="router.push(`/${props.data.id}`)"
-            v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
+            @click="router.push(`/${props.room?.id}`)"
+            v-bind:class="store.state.activeRoom == props.room?.id ? 'selected' : ''"
         >
             <BaseAvatar url="vue.png" />
             <div class="content">
-                <div class="sender">{{ props.data.user }}</div>
-                <div class="object">{{ props.data.roomName }}</div>
+                <div class="sender">{{ props.room?.user }}</div>
+                <div class="object">{{ props.room?.roomName }}</div>
             </div>
-            {{ props.data.unseen }}
-            <Badge class="badge" v-if="props.data.notSeen > 0" :value="props.data.notSeen" type="badge-number" />
+            <Badge class="badge" v-if="props.room?.notSeen ?? 0 > 0" :value="props.room?.notSeen" type="badge-number" />
         </div>
-        <ThreadList :threadIds="props.data.threadIds" />
+        <ThreadList :threadIds="props.room?.threadIds" />
     </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
     <div class="content">
-        <Room v-for="(room, index) in rooms()" :key="index" :data="room" />
+        <Room v-for="(room, index) in rooms()" :key="index" :room="room" />
     </div>
 </template>