add actions header room

front/src/assets/svg/pushpin-2-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 3V5H17V11L19 14V16H13V23H11V16H5V14L7 11V5H6V3H18ZM9 5V11.6056L7.4037 14H16.5963L15 11.6056V5H9Z"></path></svg>

front/src/assets/svg/pushpin-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.8273 1.68994L22.3126 10.1752L20.8984 11.5894L20.1913 10.8823L15.9486 15.125L15.2415 18.6605L13.8273 20.0747L9.58466 15.8321L4.63492 20.7818L3.2207 19.3676L8.17045 14.4179L3.92781 10.1752L5.34202 8.76101L8.87756 8.0539L13.1202 3.81126L12.4131 3.10416L13.8273 1.68994ZM14.5344 5.22548L9.86358 9.89631L7.0417 10.4607L13.5418 16.9608L14.1062 14.1389L18.7771 9.46812L14.5344 5.22548Z"></path></svg>

front/src/components/utils/SvgLoader.vue

@@ -36,6 +36,8 @@ const classes = () => props.classes?.split(",") ?? "";
 
 img {
     padding: 1px;
+    min-width: 26px;
+    min-height: 26px;
     filter: var(--svg-primary-text);
     &.danger {
         filter: var(--svg-danger);

front/src/services/imapAPI.ts

@@ -31,4 +31,7 @@ export default {
     deleteEverywhere(data: { mailboxId: number; messageId: number }) {
         return API().post(`/message/delete`, data);
     },
+    deleteRoom(id: number) {
+        return API().post(`/room/delete`, id);
+    },
 };

front/src/views/room/Header.vue

@@ -4,6 +4,7 @@ import Badge from "@/components/Badge.vue";
 import SvgLoader from "@/components/utils/SvgLoader.vue";
 import { RoomType, Address, Room } from "@/store/models/model";
 import MemberList from "./MemberList.vue";
+import imapAPI from "@/services/imapAPI";
 
 const props = defineProps({ id: Number, room: Object as PropType<Room> });
 
@@ -15,33 +16,37 @@ const roomTitle = () => {
     return props.room?.roomName;
 };
 
+const handleDelete = () => {
+    if (props.room?.id) {
+        imapAPI.deleteRoom(props.room.id);
+    }
+    // todo loading, delete
+};
+
 // todo remove us from list
 const to = () => props.room?.members.filter((member: Address) => member.type == "to");
 const cc = () => props.room?.members.filter((member: Address) => member.type == "cc");
 </script>
 
 <template>
-    <div class="main">
+    <div>
         <div class="context">
             <div class="infos">
                 <Badge :value="RoomType[room?.roomType ?? 0]" />
                 {{ roomTitle() }}
             </div>
             <div class="action">
-                action: threads message important
+                <SvgLoader svg="list-unordered" classes="selectable" v-tooltip="{ text: 'Thread list' }" />
+                <SvgLoader svg="pushpin-line" classes="selectable" v-tooltip="{ text: 'Important messages' }" />
                 <SvgLoader
                     svg="delete-bin-4-line"
-                    @click="
+                    @click="handleDelete()"
-                        () => {
-                            console.log('clicked');
-                        }
-                    "
                     classes="danger,selectable"
                     v-tooltip="{ text: 'Delete room' }"
                 />
             </div>
         </div>
-        <div class="members" v-if="room?.roomType != RoomType.DM">
+        <div v-if="room?.roomType != RoomType.DM">
             <MemberList class="members-list" v-if="to()?.length ?? 0 > 0" type="to" :members="to()" />
             <MemberList class="members-list" v-if="cc()?.length ?? 0 > 0" type="cc" :members="cc()" />
         </div>
@@ -49,8 +54,6 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
 </template>
 
 <style scoped>
-.main {
-}
 .context {
     display: flex;
     flex-direction: row;
@@ -65,9 +68,6 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
     padding: 3px 5px;
     border-bottom: 1px solid var(--border-color);
 }
-.members {
-}
-
 .infos {
     margin-left: 15px;
 }