fix svg errors on display and add flagged

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

@@ -225,7 +225,11 @@ function sendMessage() {
                 :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
             /> -->
         </div>
-        <bubble-menu v-if="!showOptions" class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+        <bubble-menu
+            :class="[showOptions ? 'hide' : '', 'bubble-menu']"
+            :tippy-options="{ duration: 100 }"
+            :editor="editor"
+        >
             <SvgLoader
                 svg="bold"
                 @click="editor.chain().focus().toggleBold().run()"
@@ -235,7 +239,6 @@ function sendMessage() {
                 svg="italic"
                 @click="editor.chain().focus().toggleItalic().run()"
                 :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
-                v-tooltip="'Italic'"
             />
             <SvgLoader
                 svg="strikethrough"
@@ -282,6 +285,10 @@ function sendMessage() {
     overflow: auto;
 }
 
+.hide {
+    display: none !important;
+}
+
 .editor {
     background-color: var(--secondary-background);
     flex: 1;

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { defineProps, inject, PropType, ref } from "vue";
+import { defineProps, inject, PropType, Ref, ref } from "vue";
 import { Message } from "@/store/models/model";
 import API from "@/services/imapAPI";
 import store from "@/store/store";
-import { isSeenFc } from "@/utils/flagsUtils";
+import { isSeenFc, hasFlag } from "@/utils/flagsUtils";
 import SvgLoader from "@/components/utils/SvgLoader.vue";
 
 const props = defineProps({
@@ -11,65 +11,88 @@ const props = defineProps({
 });
 
 const room: any = inject("room");
-const readLoading = ref(false);
 
-const setFlag = (flag: string) => {
-    if (readLoading.value) return;
-    readLoading.value = true;
+const seenLoading = ref(false);
+const flaggedLoading = ref(false);
+
+const setReadFlag = () => setFlag("\\Seen", seenLoading);
+const setFlaggedFlag = () => setFlag("\\Flagged", flaggedLoading);
+
+const setFlag = (flag: string, loadingState: Ref<boolean>) => {
+    if (loadingState.value) return;
     if (!room?.value || !props.msg) return;
-    let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
+    loadingState.value = true;
+
+    let apiCall = hasFlag(props.msg?.flags, flag) ? API.removeFlag : API.addFlag;
     apiCall({
         mailboxId: room.value?.mailboxId,
         messageId: props.msg?.id,
         flag: flag,
     })
-        .then((res) => {
-            if (isSeenFc(props.msg?.flags)) {
+        .then(() => {
+            if (hasFlag(props.msg?.flags, flag)) {
                 store.commit("removeFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
             } else {
                 store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
             }
-            readLoading.value = false;
+            loadingState.value = false;
         })
         .catch((err) => {
             console.log(err);
-            readLoading.value = false;
+            loadingState.value = false;
         });
 };
 </script>
+
 <template>
     <div id="main">
-        <span @click="setFlag('\\Seen')">
-            <SvgLoader
-                v-if="isSeenFc(props.msg?.flags)"
-                svg="mail-check-line"
-                class="option"
-                v-tooltip="'Mark unread'"
-                :loading="readLoading"
-            />
-            <SvgLoader
-                v-if="!isSeenFc(props.msg?.flags)"
-                svg="mail-unread-line"
-                class="option"
-                v-tooltip="'Mark as read'"
-                :loading="readLoading"
-            />
-        </span>
-        <div>flag favorite</div>
-        <div>reply</div>
-        <div>delete from all</div>
-        <div>delete from remote</div>
-        <div>transfer</div>
-        <div>see source</div>
-        <div>{{ props.msg?.flags }}</div>
         <div class="icons">
-            <SvgLoader svg="flag-line" class="option" />
+            <span @click="setReadFlag()">
+                <SvgLoader
+                    v-if="isSeenFc(props.msg?.flags)"
+                    svg="mail-check-line"
+                    class="option"
+                    v-tooltip="'Mark unread'"
+                    :loading="seenLoading"
+                />
+                <SvgLoader
+                    v-if="!isSeenFc(props.msg?.flags)"
+                    svg="mail-unread-line"
+                    class="option"
+                    v-tooltip="'Mark as read'"
+                    :loading="seenLoading"
+                />
+            </span>
+            <span @click="setFlaggedFlag()">
+                <SvgLoader svg="flag-line" class="option" :loading="flaggedLoading" />
+                <!-- 
+                <SvgLoader
+                    v-if="isSeenFc(props.msg?.flags)"
+                    svg="mail-check-line"
+                    class="option"
+                    v-tooltip="'Mark unread'"
+                    :loading="seenLoading"
+                />
+                <SvgLoader
+                    v-if="!isSeenFc(props.msg?.flags)"
+                    svg="mail-unread-line"
+                    class="option"
+                    v-tooltip="'Mark as read'"
+                    :loading="seenLoading"
+                /> -->
+            </span>
             <SvgLoader svg="reply-line" class="option" />
             <SvgLoader svg="delete-bin-4-line" class="option" classes="danger" v-tooltip="'Delete from server'" />
             <SvgLoader svg="delete-bin-6-line" class="option" classes="danger" v-tooltip="'Delete everywhere'" />
             <SvgLoader svg="share-forward-line" class="option" />
             <SvgLoader svg="reply-all-line" class="option" />
         </div>
+        <div>reply</div>
+        <div>delete from all</div>
+        <div>delete from remote</div>
+        <div>transfer</div>
+        <div>see source</div>
+        <div>{{ props.msg?.flags }}</div>
     </div>
 </template>
 

front/src/components/utils/SvgLoader.vue

@@ -6,6 +6,11 @@ const props = defineProps({
     isDisabled: Boolean,
     classes: String,
     loading: { type: Boolean, default: false },
+    color: {
+        type: String,
+        default: `brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1934%) hue-rotate(130deg)
+            brightness(114%) contrast(100%)`,
+    },
 });
 
 console.log(props.loading);
@@ -15,22 +20,27 @@ const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
 <template>
     <div class="mainSvg">
         <div class="lds-dual-ring" v-if="loading"></div>
-        <img v-if="!loading" :disabled="props.isDisabled" :src="pathSvg()" :class="props.classes" />
+        <img
+            v-if="!loading"
+            :disabled="props.isDisabled"
+            :src="pathSvg()"
+            :class="props.classes"
+            :style="{ filter: color }"
+        />
     </div>
 </template>
 
 <style scoped>
 .mainSvg {
-    max-height: 26px;
+    display: inherit;
 }
 
 img {
-    filter: var(--svg-primary-text);
     padding: 1px;
 }
 
 img.danger {
-    filter: var(--svg-danger);
+    filter: var(--svg-danger) !important;
 }
 
 .lds-dual-ring {

front/src/utils/flagsUtils.ts

@@ -1,3 +1,13 @@
 export function isSeenFc(flags: string[] | undefined): boolean {
     return flags?.includes("\\Seen") ?? false;
 }
+
+export function hasFlag(flags: string[] | undefined, flag: string): boolean {
+    if (!flags) return false;
+    for (let i = 0; i < flags.length; i++) {
+        if (flags[i] == flag) {
+            return true;
+        }
+    }
+    return false;
+}