more options on composer inside editor

front/src/assets/css/main.css

@@ -19,3 +19,7 @@
     /* 343a46 */
 }
 /* .badge-primary { */
+
+.selected {
+    background-color: var(--selected);
+}

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

@@ -1,8 +1,8 @@
 <script setup>
-import imapAPI from "@/services/imapAPI";
+import { inject, ref } from "vue";
 import store from "@/store/store";
 import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
-import { inject } from "vue";
+import imapAPI from "@/services/imapAPI";
 import Underline from "@tiptap/extension-underline";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -61,8 +61,9 @@ const editor = useEditor({
 });
 
 const room = inject("room");
+const showOptions = ref(true);
 
-const send = () => {
+function sendMessage() {
     const htmlContent = editor.value.getHTML();
     const textContent = editor.value.getText();
     const accountUser = store.getters.accountOfRoom(room.value.id);
@@ -72,7 +73,7 @@ const send = () => {
         text: textContent,
         html: htmlContent,
     });
-};
+}
 
 // todo subject input when dm of group...
 // Font selection: choose the font family, size, color, and style
@@ -136,14 +137,30 @@ const send = () => {
             </floating-menu>
         </div>
 
-        <editor-content class="editor" :editor="editor" aria-expanded="false" />
+        <div class="editor">
-        <SvgLoader class="sendMessage" svg="send-plane-line" @click="send()" />
+            <div class="options" v-if="showOptions">heruipaghruie</div>
+            <editor-content class="editorContent" :editor="editor" aria-expanded="false" />
+        </div>
+        <div class="actions">
+            <SvgLoader class="sendMessage" svg="send-plane-line" @click="sendMessage()" />
+            <SvgLoader
+                :class="[{ selected: showOptions }, 'moreOptions']"
+                svg="menu-add-line"
+                @click="showOptions = !showOptions"
+            />
+        </div>
     </div>
 </template>
 
-<style>
+<style lang="scss">
-.ProseMirror:focus {
+.ProseMirror {
+    &:focus {
         outline: none;
+    }
+
+    p {
+        margin: 0;
+    }
 }
 </style>
 
@@ -153,10 +170,21 @@ const send = () => {
     flex-direction: row;
     padding: 10px;
 }
+
 .editor {
-    background-color: var(--secondary-background);
+    display: flex;
+    flex-direction: column;
     flex: 1;
     margin-right: 10px;
+}
+
+.options {
+    background-color: blue;
+}
+
+.editorContent {
+    flex: 1;
+    background-color: var(--secondary-background);
     border-radius: 10px;
     padding: 0 10px;
 }
@@ -186,8 +214,24 @@ const send = () => {
     }
 }
 
+.actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.moreOptions,
 .sendMessage {
+    border-radius: 6px;
+
+    ::v-deep img {
         filter: var(--svg-primary-text);
+        padding: 3px;
         cursor: pointer;
+    }
+}
+
+.moreOptions:hover {
+    background-color: var(--selected);
 }
 </style>

front/src/views/room/RoomView.vue

@@ -81,6 +81,5 @@ provide("room", room);
 
 .composer {
     display: flex;
-    align-items: center;
 }
 </style>

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

@@ -46,10 +46,9 @@ const router = useRouter();
     cursor: pointer;
 }
 
-.room:hover,
+.room:hover {
-.selected {
-    background-color: var(--selected);
     border-radius: 8px;
+    background-color: var(--selected);
 }
 
 .content {

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -32,6 +32,7 @@ const router = useRouter();
     padding: 4px;
     cursor: pointer;
     color: var(--secondary-text);
+    border-radius: 8px;
 }
 
 .badge {
@@ -44,10 +45,8 @@ const router = useRouter();
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.room:hover,
+.room:hover {
-.selected {
     background-color: var(--selected);
-    border-radius: 8px;
 }
 
 .room::before {