back/db/api-db.ts

@@ -27,7 +27,7 @@ export async function getAccounts() {
     return await execQueryAsync(query, values);
 }
 
-export async function getRooms(mailboxId: number) {
+export async function getRooms(mailboxId) {
     const query = `
         SELECT 
             room.room_id AS id,

front/src/components/structure/message/Composer.vue

@@ -3,7 +3,7 @@ import imapAPI from "@/services/imapAPI";
 import store from "@/store/store";
 import StarterKit from "@tiptap/starter-kit";
 import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
-import { inject } from "vue";
+import { inject, onBeforeUnmount } from "vue";
 
 const editor = useEditor({
     extensions: [StarterKit],
@@ -35,7 +35,6 @@ const send = () => {
 </script>
 
 <template>
-    <div class="main">
     <div v-if="editor">
         <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
             <button
@@ -80,30 +79,76 @@ const send = () => {
         </floating-menu>
     </div>
 
-        <editor-content class="editor" :editor="editor" aria-expanded="false" />
+    <editor-content class="editor" :editor="editor" />
 
-        <button @click="send()">SEND</button>
+    <div class="send" @click="send()">SEND</div>
-    </div>
 </template>
 
-<style>
+<style lang="scss">
-.ProseMirror:focus {
+.send:hover {
-    outline: none;
+    background-color: var(--selected);
-}
-</style>
-
-<style lang="scss" scoped>
-.main {
-    display: flex;
-    flex-direction: row;
-    padding: 10px;
 }
+/* Basic editor styles */
 .editor {
     background-color: var(--secondary-background);
-    flex: 1;
+}
-    margin-right: 10px;
+
-    border-radius: 10px;
+.ProseMirror {
-    padding: 0 10px;
+    > * + * {
-    line-height: 0.6rem;
+        margin-top: 0.75em;
+    }
+
+    ul,
+    ol {
+        padding: 0 1rem;
+    }
+
+    blockquote {
+        padding-left: 1rem;
+        border-left: 2px solid rgba(#0d0d0d, 0.1);
+    }
+}
+
+.bubble-menu {
+    display: flex;
+    background-color: #0d0d0d;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+        border: none;
+        background: none;
+        color: #fff;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0 0.2rem;
+        opacity: 0.6;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+        }
+    }
+}
+
+.floating-menu {
+    display: flex;
+    background-color: #0d0d0d10;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+        border: none;
+        background: none;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0 0.2rem;
+        opacity: 0.6;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+        }
+    }
 }
 </style>

front/src/store/store.ts

@@ -21,6 +21,8 @@ interface AccountFromBack {
     email: string;
 }
 
+const buffer: RoomFromBack[] = [];
+
 function createRoom(options: RoomFromBack): Room {
     return {
         id: options.id,
@@ -115,7 +117,6 @@ const store = createStore<State>({
         },
         addRooms(state, payload) {
             // todo add if not exist
-            const buffer: RoomFromBack[] = [];
             payload.rooms.forEach((room: RoomFromBack) => {
                 if (room.roomType == RoomType.THREAD) {
                     buffer.push(room);
@@ -173,7 +174,7 @@ const store = createStore<State>({
     },
     getters: {
         rooms: (state) => (): Room[] => {
-            if (state.activeAccount === 0) return state.rooms.filter((room) => room.roomType != RoomType.THREAD);
+            if (state.activeAccount === 0) return state.rooms;
             return state.rooms.filter(
                 (room) => room.mailboxId == state.activeAccount && room.roomType != RoomType.THREAD,
             );
@@ -199,13 +200,6 @@ const store = createStore<State>({
                 store.dispatch("fetchMessages", { roomId: roomId, obj: msgOnRoomId(state, roomId) });
                 return msgOnRoomId(state, roomId)?.messages ?? [];
             },
-        message:
-            (state) =>
-            (roomId: number, messageId: number): Message | undefined => {
-                const roomMessage = msgOnRoomId(state, roomId);
-                if (!roomMessage) return;
-                return roomMessage.messages.find((msg) => msg.id === messageId);
-            },
         accountOfRoom:
             (state) =>
             (roomId: number): string | undefined => {

front/src/views/room/RoomView.vue

@@ -39,19 +39,19 @@ const shouldDisplayComposer = () => {
     );
 };
 
-function openMessageView(messageId) {
+function openMessageView(id) {
-    messageIdView.value = messageId;
+    messageIdView.value = id;
-    if (messageId === -1) return;
+    message.value = room.value?.messages.find((message) => message.id == id);
-    message.value = store.getters.message(room.value.id, messageId);
 }
 
 provide("room", room);
 </script>
 
 <template>
-    <div class="container">
+    <div id="main">
         <Header :id="id" :room="room"></Header>
-        <div class="messages">
+        <div id="RoomViewBody">
+            <div class="content">
                 <Message
                     v-for="(message, index) in store.getters.messages(room?.id)"
                     :key="index"
@@ -61,26 +61,37 @@ provide("room", room);
                 />
             </div>
             <Composer class="composer" v-if="shouldDisplayComposer()" />
+        </div>
         <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
     </div>
 </template>
 
 <style scoped>
-.container {
+#main {
-    display: flex;
-    flex-direction: column;
     background-color: var(--primary-background);
     color: var(--primary-text);
-    height: 100vh;
     width: 100%;
 }
 
-.messages {
+#RoomViewBody {
-    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .composer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding-top: 10px;
+
+    height: 35px;
+}
+
+.content {
     display: flex;
-    align-items: center;
+    flex-direction: column-reverse;
+    overflow: auto;
+    margin-bottom: 60px;
 }
 </style>