open viewMessageModal on double click

front/src/components/modals/MessageViewModal.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Message } from "@/store/models/model";
+import { ref, watch, defineProps, PropType } from "vue";
+import Modal from "./Modal.vue";
+
+const props = defineProps({ messageId: { type: Number, require: true }, message: Object as PropType<Message> });
+
+const messageId = ref(-1);
+watch(
+    () => props.messageId,
+    (newMessageId: number | undefined) => {
+        if (!newMessageId) return;
+        messageId.value = newMessageId;
+    },
+);
+</script>
+
+<template>
+    <div>
+        <Modal v-if="messageId != -1" :title="props.message?.subject" @close-modal="() => $emit('close')">
+            <template v-slot:body> yep </template>
+        </Modal>
+    </div>
+</template>
+
+<style></style>

front/src/store/models/model.ts

@@ -7,6 +7,7 @@ export enum RoomType {
 }
 
 export interface Message {
+    id: number;
     fromA: string;
     toA: string;
     ccA?: string;

front/src/views/room/Message.vue

@@ -85,7 +85,7 @@ const classes = (): string => {
         content
         attachments -->
 <template>
-    <div class="message">
+    <div class="message" @dblclick="$emit('openMessageView', props.msg?.id)">
         <div id="context">
             <div class="left" id="profile">
                 {{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}

front/src/views/room/RoomView.vue

@@ -4,11 +4,14 @@ import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import { onBeforeMount, ref } from "vue";
 import Header from "./Header.vue";
 import Message from "./Message.vue";
-import { RoomType } from "@/store/models/model";
+import { Room, RoomType } from "@/store/models/model";
+import MessageViewModal from "@/components/modals/MessageViewModal.vue";
 
 const store = useStore();
 const route = useRoute();
-const id = ref(parseInt(route.params?.id));
+const messageIdView = ref(-1);
+const message = ref(undefined);
+const id = ref(parseInt(route.params.id));
 let room;
 onBeforeMount(async () => {
     store.commit("setActiveRoom", id.value);
@@ -27,6 +30,11 @@ const shouldDisplayComposer = () => {
     if (!room) return false;
     return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
 };
+
+function openMessageView(id) {
+    messageIdView.value = id;
+    message.value = room?.messages.find((message) => message.id == id);
+}
 </script>
 
 <template>
@@ -39,10 +47,12 @@ const shouldDisplayComposer = () => {
                     :key="index"
                     :msg="message"
                     :members="room?.members"
+                    @open-message-view="(id) => openMessageView(id)"
                 />
             </div>
             <div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
         </div>
+        <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
     </div>
 </template>
 

front/src/views/sidebar/accounts/Accounts.vue

@@ -14,7 +14,7 @@
 <script>
 import { mapState } from "vuex";
 import Account from "./Account";
-import AddAccountModal from "../../modals/AddAccountModal";
+import AddAccountModal from "@/components/modals/AddAccountModal";
 import store from "@/store/store";
 
 export default {