add button to set seen flag on front

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

@@ -1,23 +1,49 @@
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch, PropType } from "vue";
-import { decodeEmojis } from "../../../utils/string";
-import { removeDuplicates } from "../../../utils/array";
-import DOMPurify from "dompurify";
-import { Address, Message } from "@/store/models/model";
+import { defineProps, PropType } from "vue";
+import { Message } from "@/store/models/model";
+import API from "@/services/imapAPI";
+import store from "@/store/store";
+import { isSeenFc } from "@/utils/flagsUtils";
 
 const props = defineProps({
     msg: Object as PropType<Message>,
+    mailboxId: Number,
+    roomId: Number,
 });
+
+const setFlag = (flag: string) => {
+    // todo loading
+    if (!props.mailboxId || !props.msg) return;
+    let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
+    apiCall({
+        mailboxId: props.mailboxId,
+        messageId: props.msg?.id,
+        flag: flag,
+    })
+        .then((res) => {
+            if (isSeenFc(props.msg?.flags)) {
+                store.commit("removeFlag", { roomId: props.roomId, messageId: props.msg?.id, flag: flag });
+            } else {
+                store.commit("addFlag", { roomId: props.roomId, messageId: props.msg?.id, flag: flag });
+            }
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+};
 </script>
 <template>
     <div>
-        <div>mark as not read</div>
+        <div class="button" @click="setFlag('\\Seen')">
+            {{ isSeenFc(props.msg?.flags) ? "Mark as not read" : "Mark as read" }}
+        </div>
         <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>
 </template>
 
@@ -25,4 +51,16 @@ const props = defineProps({
 div {
     text-align: center;
 }
+
+.button {
+    border: solid 1px;
+    border-radius: 6px;
+    display: initial;
+    padding: 1px 5px;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: var(--selected);
+}
 </style>