From 7f989928396d77b7b464d2ab55ad2f8cb9830fb6 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 3 Aug 2025 20:28:14 +0200
Subject: [PATCH] feat: add type property to ContextMenu and set delete message
 item to danger

---
 components/Message.vue                   | 6 +++---
 components/UserInterface/ContextMenu.vue | 4 +++-
 types/interfaces.ts                      | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 198a88b..61ffdb6 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -146,18 +146,18 @@ console.log("media links:", mediaLinks);
 //}
 
 const menuItems: ContextMenuItem[] = [
-	{ name: "Reply", icon: "lucide:reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
 console.log("me:", props.me);
 if (props.author?.uuid == props.me.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
-	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
+	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
 if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
-	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", callback: () => {} });
+	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
 
 function getDayDifference(date1: Date, date2: Date) {
diff --git a/components/UserInterface/ContextMenu.vue b/components/UserInterface/ContextMenu.vue
index 5b8f165..44513be 100644
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@@ -1,6 +1,8 @@
 <template>
 	<div id="context-menu">
-		<button v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+		<button v-for="item of props.menuItems" class="context-menu-item"
+				:class="'context-menu-item-' + item.type"
+				@click="runCallback(item)">
 			{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
 		</button>
 	</div>
diff --git a/types/interfaces.ts b/types/interfaces.ts
index b2f63a3..2e873e0 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -102,6 +102,7 @@ export interface ModalProps {
 export interface ContextMenuItem {
 	name: string,
 	icon?: string,
+	type: "normal" | "danger"
 	callback: (...args: any[]) => any;
 }