From 7ddc2acb02aaa4c5d4bd4b3bd27903a299208d0c Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 9 Jul 2025 07:37:05 +0200
Subject: [PATCH 01/24] feat: add message id as data field of Message component

---
 components/Message.vue     | 7 ++++---
 components/MessageArea.vue | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 5cd7773..188960a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
+	<div @click="emitId" v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId">
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }" :data-message-id="props.messageId">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
 				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -41,7 +41,8 @@ const props = defineProps<{
 	format: "12" | "24",
 	type: "normal" | "grouped",
 	marginBottom: boolean,
-	last: boolean
+	last: boolean,
+	messageId: string
 }>();
 
 const messageElement = ref<HTMLDivElement>();
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 49577f9..2b3e408 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -5,7 +5,7 @@
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				format="12" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" />
+				:last="i == messages.length - 1" :message-id="message.uuid" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">

From 950d27b2cf9970de1be4bbd3d3c30c5bf0af16e7 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 9 Jul 2025 07:38:50 +0200
Subject: [PATCH 02/24] feat(wip): add custom context menu

---
 components/ContextMenu.vue | 52 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 components/ContextMenu.vue

diff --git a/components/ContextMenu.vue b/components/ContextMenu.vue
new file mode 100644
index 0000000..3e710af
--- /dev/null
+++ b/components/ContextMenu.vue
@@ -0,0 +1,52 @@
+<template>
+	<div v-for="item of menuItems" class="context-menu-item">
+		{{ item.name }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{ cursorX: number, cursorY: number }>();
+
+
+
+const menuItems = [
+	{ name: "Edit", callback: editMessage },
+	{ name: "Reply", callback: replyMessage }
+];
+
+onMounted(() => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.style.left = props.cursorX.toString() + "px";
+		contextMenu.style.top = props.cursorY.toString() + "px";
+	}
+});
+
+
+function editMessage() {
+	//
+}
+
+function replyMessage(id: string) {
+	//
+}
+
+</script>
+
+<style>
+
+#context-menu {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	width: 10dvw;
+	border: .15rem solid cyan;
+	background-color: var(--background-color);
+	text-align: center;
+}
+
+.context-menu-item:hover {
+	background-color: rgb(50, 50, 50);
+}
+
+</style>
\ No newline at end of file

From fef618795d8c99d6d947a11865eb8bf1b988b748 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 9 Jul 2025 07:39:42 +0200
Subject: [PATCH 03/24] feat: add custom context handling

---
 app.vue | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/app.vue b/app.vue
index fbc6572..918b5ab 100644
--- a/app.vue
+++ b/app.vue
@@ -6,9 +6,47 @@
 </template>
 
 <script lang="ts" setup>
+import { ContextMenu } from '#components';
+import { render } from 'vue';
 
 const banner = useState("banner", () => false);
 
+onMounted(() => {
+	document.removeEventListener("contextmenu", contextMenuHandler);
+	document.addEventListener("contextmenu", (e) => {
+		contextMenuHandler(e);
+	});
+	document.addEventListener("mousedown", (e) => {
+		console.log("click");
+		console.log("target:", e.target);
+		console.log(e.target instanceof HTMLDivElement);
+		if (e.target instanceof HTMLDivElement) {
+			const classes = e.target.classList;
+			console.log(classes);
+			if (classes.contains("message-data") || classes.contains("message-metadata") || classes.contains("message-text")) {
+				const closest = e.target.closest("div.message") as HTMLDivElement;
+				console.log("message ID:", closest.dataset.messageId);
+			}
+		}
+		const contextMenu = document.getElementById("context-menu");
+		if (contextMenu) {
+			contextMenu.remove();
+		}
+	});
+});
+
+function contextMenuHandler(e: MouseEvent) {
+	e.preventDefault();
+	console.log("Opened context menu");
+	console.log("Rendering new context menu");
+	const menuContainer = document.createElement("div");
+	menuContainer.id = "context-menu";
+	document.body.appendChild(menuContainer);
+	const contextMenu = h(ContextMenu, { cursorX: e.clientX, cursorY: e.clientY });
+	render(contextMenu, menuContainer);
+	console.log("Rendered");
+}
+
 </script>
 
 <style>

From 704de034b78022b67c14af5fd43bbcc2429a7524 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 9 Jul 2025 07:40:20 +0200
Subject: [PATCH 04/24] feat(wip): start working on seeing if emitting events
 between component and parent works

---
 components/Message.vue | 5 +++++
 types/hooks.ts         | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 types/hooks.ts

diff --git a/components/Message.vue b/components/Message.vue
index 188960a..1df0dc9 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -75,6 +75,11 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
+const nuxtApp = useNuxtApp();
+function emitId() {
+	// nuxtApp.callHook()
+}
+
 </script>
 
 <style scoped>
diff --git a/types/hooks.ts b/types/hooks.ts
new file mode 100644
index 0000000..73a7894
--- /dev/null
+++ b/types/hooks.ts
@@ -0,0 +1,7 @@
+import type { RuntimeNuxtHooks } from 'nuxt/schema';
+
+declare module "nuxt/schema" {
+	interface RuntimeNuxtHooks {
+		"app:message:right-clicked": (payload: { messageId: string }) => void
+	}
+}

From 11802040bd5fc6b8bae48b82632b7cffc3089817 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 23:55:26 +0200
Subject: [PATCH 05/24] feat: add ContextMenuItem interface

---
 types/interfaces.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/types/interfaces.ts b/types/interfaces.ts
index e451a4b..7577377 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -83,3 +83,8 @@ export interface ScrollPosition {
 	offsetTop: number,
 	offsetLeft: number
 }
+
+export interface ContextMenuItem {
+	name: string,
+	callback: (...args: any[]) => any;
+}

From 0ea9c8f16811a25684762b6b916a6cb8291b5a24 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 23:56:28 +0200
Subject: [PATCH 06/24] feat: update ContextMenu props var to use new interface
 and move setting of menuItems to Message component

---
 components/ContextMenu.vue |  9 ++-------
 components/Message.vue     | 11 +++++++----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/ContextMenu.vue b/components/ContextMenu.vue
index 3e710af..f767bcb 100644
--- a/components/ContextMenu.vue
+++ b/components/ContextMenu.vue
@@ -5,14 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{ cursorX: number, cursorY: number }>();
+import type { ContextMenuItem } from '~/types/interfaces';
 
-
-
-const menuItems = [
-	{ name: "Edit", callback: editMessage },
-	{ name: "Reply", callback: replyMessage }
-];
+const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
 
 onMounted(() => {
 	const contextMenu = document.getElementById("context-menu");
diff --git a/components/Message.vue b/components/Message.vue
index 1df0dc9..94636c1 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -75,11 +75,14 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
-const nuxtApp = useNuxtApp();
-function emitId() {
-	// nuxtApp.callHook()
-}
+const menuItems = [
+	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+]
 
+console.log("me:", props.me);
+if (props.author?.uuid == props.me.uuid) {
+	menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
+}
 </script>
 
 <style scoped>

From b51efc01e9db38127303971cc127dd5ffd80fc47 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 23:57:25 +0200
Subject: [PATCH 07/24] feat: add utils to create and remove the context menu

---
 utils/createContextMenu.ts | 17 +++++++++++++++++
 utils/removeContextMenu.ts |  6 ++++++
 2 files changed, 23 insertions(+)
 create mode 100644 utils/createContextMenu.ts
 create mode 100644 utils/removeContextMenu.ts

diff --git a/utils/createContextMenu.ts b/utils/createContextMenu.ts
new file mode 100644
index 0000000..f3c4aab
--- /dev/null
+++ b/utils/createContextMenu.ts
@@ -0,0 +1,17 @@
+import { render } from "vue";
+import ContextMenu from "~/components/ContextMenu.vue";
+import type { ContextMenuItem } from "~/types/interfaces";
+
+export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
+  console.log("Rendering new context menu");
+  const menuContainer = document.createElement("div");
+  menuContainer.id = "context-menu";
+  document.body.appendChild(menuContainer);
+  const contextMenu = h(ContextMenu, {
+  	menuItems,
+  	cursorX: e.clientX,
+  	cursorY: e.clientY 
+  });
+  render(contextMenu, menuContainer);
+  console.log("Rendered");
+}
diff --git a/utils/removeContextMenu.ts b/utils/removeContextMenu.ts
new file mode 100644
index 0000000..3b42c8b
--- /dev/null
+++ b/utils/removeContextMenu.ts
@@ -0,0 +1,6 @@
+export default () => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.remove();
+	}
+}

From b28920898cf430019b14341d16d5cece19f53588 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 23:58:00 +0200
Subject: [PATCH 08/24] feat: add utils to reply to and edit messages

---
 types/props.ts          | 17 +++++++++++++++++
 utils/editMessage.ts    | 24 ++++++++++++++++++++++++
 utils/replyToMessage.ts |  5 +++++
 3 files changed, 46 insertions(+)
 create mode 100644 types/props.ts
 create mode 100644 utils/editMessage.ts
 create mode 100644 utils/replyToMessage.ts

diff --git a/types/props.ts b/types/props.ts
new file mode 100644
index 0000000..f97405d
--- /dev/null
+++ b/types/props.ts
@@ -0,0 +1,17 @@
+import type { UserResponse } from "./interfaces";
+
+export interface MessageProps {
+	class?: string,
+	img?: string | null,
+	author?: UserResponse
+	text: string,
+	timestamp: number,
+	format: "12" | "24",
+	type: "normal" | "grouped",
+	marginBottom: boolean,
+	last: boolean,
+	messageId: string,
+	replyingTo?: boolean,
+	editing?: boolean,
+	me: UserResponse
+}
\ No newline at end of file
diff --git a/utils/editMessage.ts b/utils/editMessage.ts
new file mode 100644
index 0000000..5cc3ce8
--- /dev/null
+++ b/utils/editMessage.ts
@@ -0,0 +1,24 @@
+import type { MessageProps } from "~/types/props";
+
+export default async (element: HTMLDivElement, props: MessageProps) => {
+	console.log("message:", element);
+	const me = await fetchWithApi("/me") as any;
+	if (props.author?.uuid == me.uuid) {
+		const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement;
+		text.contentEditable = "true";
+		text.focus();
+		const range = document.createRange();
+		range.selectNodeContents(text);
+		range.collapse(false);
+		const selection = window.getSelection();
+		selection?.removeAllRanges();
+		selection?.addRange(range);
+		element.addEventListener("keyup", (e) => {
+			console.log("key released:", e.key);
+			if (e.key == "Escape") {
+				text.contentEditable = "false";
+			}
+			text.blur();
+		}, { once: true });
+	}
+}
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
new file mode 100644
index 0000000..03253d2
--- /dev/null
+++ b/utils/replyToMessage.ts
@@ -0,0 +1,5 @@
+import type { MessageProps } from "~/types/props";
+
+export default (element: HTMLDivElement, props: MessageProps) => {
+	console.log("element:", element);
+}

From c746f816d843b354d2ee50b34bcb2db1e61af1db Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 23:59:08 +0200
Subject: [PATCH 09/24] feat: add author and logged-in user (me) as props for
 Message component

---
 components/Message.vue     | 6 +++---
 components/MessageArea.vue | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 94636c1..e6c978d 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,13 +1,13 @@
 <template>
 	<div @click="emitId" v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId">
 		<div class="left-column">
-			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
+			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
 				<span class="message-author-username" tabindex="0">
-					{{ username }}
+					{{ author?.display_name || author?.username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -52,7 +52,7 @@ const dateHidden = ref<boolean>(true);
 const date = new Date(props.timestamp);
 
 console.log("message:", props.text);
-console.log("author:", props.username);
+console.log("author:", props.author);
 
 const sanitized = ref<string>();
 
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 2b3e408..38db13c 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -5,7 +5,7 @@
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				format="12" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" :message-id="message.uuid" />
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -20,11 +20,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
+import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
+const me = await fetchWithApi("/me") as UserResponse;
+
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
 const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference

From 4f4063fa88625ba4483c53e3b9cdb6ae09d3715f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 00:03:42 +0200
Subject: [PATCH 10/24] feat: make both message div types use ref and add
 contextmenu listeners to message divs

---
 components/Message.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index e6c978d..299eebf 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
 <template>
-	<div @click="emitId" v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId">
+	<div v-if="props.type == 'normal'" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }" :data-message-id="props.messageId">
+	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }" :data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
 				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -61,14 +61,16 @@ onMounted(async () => {
 	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
 	console.log("adding listeners")
 	await nextTick();
-	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
-		dateHidden.value = false;
-	});
-
-	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
-		dateHidden.value = true;
-	});
-	console.log("added listeners");
+	if (messageElement.value?.classList.contains("grouped-message")) {
+		messageElement.value?.addEventListener("mouseenter", (e: Event) => {
+			dateHidden.value = false;
+		});
+	
+		messageElement.value?.addEventListener("mouseleave", (e: Event) => {
+			dateHidden.value = true;
+		});
+		console.log("added listeners");
+	}
 });
 
 //function toggleTooltip(e: Event) {

From 64b10b48aa6c74d1e90dcd927baabc17e23672d8 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 00:04:18 +0200
Subject: [PATCH 11/24] feat: switch to using MessageProps interface in Message
 component

---
 components/Message.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 299eebf..9558ce4 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -31,19 +31,9 @@
 <script lang="ts" setup>
 import DOMPurify from 'dompurify';
 import { parse } from 'marked';
+import type { MessageProps } from '~/types/props';
 
-const props = defineProps<{
-	class?: string,
-	img?: string | null,
-	username: string,
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	last: boolean,
-	messageId: string
-}>();
+const props = defineProps<MessageProps>();
 
 const messageElement = ref<HTMLDivElement>();
 

From 069d3392d27f4107bef462c477a22e965f9e1d2f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 00:05:20 +0200
Subject: [PATCH 12/24] feat: improve context menu handling in app.vue

---
 app.vue | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/app.vue b/app.vue
index 918b5ab..294c9f9 100644
--- a/app.vue
+++ b/app.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ContextMenu } from '#components';
+import ContextMenu from '~/components/ContextMenu.vue';
 import { render } from 'vue';
 
 const banner = useState("banner", () => false);
@@ -17,34 +17,23 @@ onMounted(() => {
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {
+		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
 		console.log("click");
 		console.log("target:", e.target);
 		console.log(e.target instanceof HTMLDivElement);
-		if (e.target instanceof HTMLDivElement) {
-			const classes = e.target.classList;
-			console.log(classes);
-			if (classes.contains("message-data") || classes.contains("message-metadata") || classes.contains("message-text")) {
-				const closest = e.target.closest("div.message") as HTMLDivElement;
-				console.log("message ID:", closest.dataset.messageId);
-			}
-		}
-		const contextMenu = document.getElementById("context-menu");
-		if (contextMenu) {
-			contextMenu.remove();
+		removeContextMenu();
+		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
+			e.target.contentEditable = "false";
 		}
 	});
 });
 
 function contextMenuHandler(e: MouseEvent) {
 	e.preventDefault();
-	console.log("Opened context menu");
-	console.log("Rendering new context menu");
-	const menuContainer = document.createElement("div");
-	menuContainer.id = "context-menu";
-	document.body.appendChild(menuContainer);
-	const contextMenu = h(ContextMenu, { cursorX: e.clientX, cursorY: e.clientY });
-	render(contextMenu, menuContainer);
-	console.log("Rendered");
+	//console.log("Opened context menu");
+	//createContextMenu(e, [
+	//	{ name: "Wah", callback: () => { return } }
+	//]);
 }
 
 </script>

From 292bd64ed4654f276f392d81ea3f91ac4f30fd51 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 00:05:59 +0200
Subject: [PATCH 13/24] feat: add runCallback function to handle closing
 removal of context menu before running callback

---
 components/ContextMenu.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/ContextMenu.vue b/components/ContextMenu.vue
index f767bcb..1388bbd 100644
--- a/components/ContextMenu.vue
+++ b/components/ContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-for="item of menuItems" class="context-menu-item">
+	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
 		{{ item.name }}
 	</div>
 </template>
@@ -18,12 +18,9 @@ onMounted(() => {
 });
 
 
-function editMessage() {
-	//
-}
-
-function replyMessage(id: string) {
-	//
+function runCallback(item: ContextMenuItem) {
+	removeContextMenu();
+	item.callback();
 }
 
 </script>

From c2b06f40b4bcaaf74558b114db89cc352a7ec3e7 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 11 Jul 2025 02:34:08 +0200
Subject: [PATCH 14/24] fix: align textbox to bottom of the screen

---
 components/MessageArea.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 466224d..59e5e06 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -301,6 +301,7 @@ router.beforeEach((to, from, next) => {
 }
 
 #message-box {
+	margin-top: auto; /* force it to the bottom of the screen */
 	margin-bottom: 2dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;

From 84b7c012519adf2e6966bc55f1acd3735accdce2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:28:50 +0200
Subject: [PATCH 15/24] feat: include new reply_to property in MessageResponse
 interface

---
 types/interfaces.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/types/interfaces.ts b/types/interfaces.ts
index 0325e54..8921c72 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -44,7 +44,8 @@ export interface MessageResponse {
 	channel_uuid: string,
 	user_uuid: string,
 	message: string,
-	user: UserResponse
+	reply_to: string | null,
+	user: UserResponse,
 }
 
 export interface InviteResponse {

From 21f441bccf7a4b87f838c8fac58314e024f6330e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:30:05 +0200
Subject: [PATCH 16/24] feat: add properties for whether a message is a reply
 or user is mentioned and message response to MessageProps

---
 types/props.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/types/props.ts b/types/props.ts
index f97405d..aa6ff0c 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -1,4 +1,4 @@
-import type { UserResponse } from "./interfaces";
+import type { MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
 	class?: string,
@@ -14,4 +14,7 @@ export interface MessageProps {
 	replyingTo?: boolean,
 	editing?: boolean,
 	me: UserResponse
+	message: MessageResponse,
+	replyMessage?: MessageResponse
+	isMentioned?: boolean,
 }
\ No newline at end of file

From 53c2f93791f36797dc92b2167337a0c09e33531f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:30:51 +0200
Subject: [PATCH 17/24] feat: add MessageReply component

---
 components/MessageReply.vue | 91 +++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 components/MessageReply.vue

diff --git a/components/MessageReply.vue b/components/MessageReply.vue
new file mode 100644
index 0000000..0e069aa
--- /dev/null
+++ b/components/MessageReply.vue
@@ -0,0 +1,91 @@
+<template>
+  <div :id="props.maxWidth == 'full' ? 'message-reply' : undefined" :class="{ 'message-reply-preview' : props.maxWidth == 'reply' }"
+  		:data-message-id="props.id" @click="scrollToReply">
+    <p id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></p>
+	<!-- <span id="message-reply-cancel"><Icon name="lucide:x" /></span> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import DOMPurify from "dompurify";
+import { parse } from "marked";
+
+const props = defineProps<{ author: string, text: string, id: string, replyId: string, maxWidth: "full" | "reply" }>();
+
+const existingReply = document.getElementById("message-reply");
+
+if (existingReply) {
+	existingReply.remove();
+}
+
+console.log("text:", props.text);
+
+const sanitized = ref<string>();
+
+onMounted(async () => {
+	
+	const parsed = await parse(props.text.trim().replaceAll("<br>", " "), { gfm: true });
+	
+	sanitized.value = DOMPurify.sanitize(parsed, {
+		ALLOWED_TAGS: [],
+		ALLOW_DATA_ATTR: false,
+		ALLOW_SELF_CLOSE_IN_ATTR: false,
+		ALLOWED_ATTR: [],
+		KEEP_CONTENT: true
+	});
+	
+	console.log("sanitized:", sanitized.value);
+
+	const messageBoxInput = document.getElementById("message-textbox-input") as HTMLDivElement;
+	if (messageBoxInput) {
+		messageBoxInput.focus();
+	}
+});
+
+function scrollToReply(e: MouseEvent) {
+	e.preventDefault();
+	console.log("clicked on reply box");
+	const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
+	if (reply) {
+		console.log("reply:", reply);
+		console.log("scrolling into view");
+		reply.scrollIntoView({ behavior: "smooth", block: "center" });
+	}
+}
+
+</script>
+
+<style scoped>
+
+#message-reply, .message-reply-preview {
+	display: flex;
+	text-align: left;
+	border-bottom: 1px solid var(--padding-color);
+	margin-bottom: .5rem;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+#message-reply {
+	width: 100%;
+}
+
+.message-reply-preview {
+	width: 30%;
+	margin-left: .5dvw;
+}
+
+#reply-text {
+	color: var(--secondary-text-color);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+}
+
+#reply-author-field {
+	color: var(--text-color);
+}
+
+</style>
\ No newline at end of file

From 2ff892b0da73a9d0e1ad5522e2dece2f74c7a16f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:31:25 +0200
Subject: [PATCH 18/24] feat: add util to create MessageReply instance

---
 utils/replyToMessage.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 03253d2..bbb453b 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -1,5 +1,14 @@
+import { render } from "vue";
+import MessageReply from "~/components/MessageReply.vue";
 import type { MessageProps } from "~/types/props";
 
 export default (element: HTMLDivElement, props: MessageProps) => {
 	console.log("element:", element);
+	const messageBox = document.getElementById("message-box") as HTMLDivElement;
+	if (messageBox) {
+		const div = document.createElement("div");
+		const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		messageBox.prepend(div);
+		render(messageReply, div);
+	}
 }

From a8ee8122ee0f7d03a0e3abc65a9595d041684d56 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:33:24 +0200
Subject: [PATCH 19/24] feat: implement message replies

---
 components/Message.vue     | 27 ++++++++++++++++++++++++---
 components/MessageArea.vue | 29 ++++++++++++++++++++++++++---
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index d3d4086..d86f0ad 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,9 @@
 <template>
-	<div v-if="props.type == 'normal'" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid }" :data-message-id="props.messageId"
+			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+		<MessageReply v-if="props.replyMessage" :author="props.message.user.display_name || props.message.user.username" :text="props.replyMessage?.message"
+			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
@@ -18,7 +22,9 @@
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }" :data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
+			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
 				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -44,8 +50,9 @@ const dateHidden = ref<boolean>(true);
 const date = new Date(props.timestamp);
 const currentDate: Date = new Date()
 
-console.log("message:", props.text);
+console.log("[MSG] message to render:", props.message);
 console.log("author:", props.author);
+console.log("[MSG] reply message:", props.replyMessage);
 
 const sanitized = ref<string>();
 
@@ -113,6 +120,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	overflow-wrap: anywhere;
 }
 
+.message-reply-preview {
+	grid-row: 1;
+	grid-column: 2;
+}
+
 .message:hover {
 	background-color: var(--chat-highlighted-background-color);
 }
@@ -142,6 +154,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	flex-direction: column;
 	height: fit-content;
 	width: 100%;
+	grid-row: 2;
+	grid-column: 2;
 }
 
 .message-author {
@@ -160,6 +174,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
+	grid-row: 2;
+	grid-column: 1;
 }
 
 .author-username {
@@ -186,6 +202,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	width: 20px;
 }
 */
+
+.mentioned {
+	background-color: var(--secondary-color);
+}
+
 </style>
 
 <style module>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 832802b..e58097e 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -5,7 +5,9 @@
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				format="12" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me" />
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
+				:message="message" :is-reply="message.reply_to"
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -116,6 +118,7 @@ if (messagesRes) {
 	messagesRes.reverse();
 	console.log("messages res:", messagesRes.map(msg => msg.message));
 	for (const message of messagesRes) {
+		console.log("[MSG] processing message:", message);
 		groupMessage(message);
 	}
 }
@@ -187,6 +190,7 @@ if (accessToken && apiBase) {
 		console.log("event data:", event.data);
 		console.log("message uuid:", event.data.uuid);
 		const parsedData = JSON.parse(event.data);
+		console.log("[MSG] parsed message:", parsedData);
 		
 		console.log("parsed message type:", messagesType.value[parsedData.uuid]);
 		console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
@@ -205,11 +209,18 @@ if (accessToken && apiBase) {
 function sendMessage(e: Event) {
 	e.preventDefault();
 	if (messageInput.value && messageInput.value.trim() !== "") {
-		const message = {
+		const message: Record<string, string> = {
 			message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
 		}
 
-		console.log("message:", message);
+		const messageReply = document.getElementById("message-reply") as HTMLDivElement;
+		console.log("[MSG] message reply:", messageReply);
+		if (messageReply && messageReply.dataset.messageId) {
+			console.log("[MSG] message is a reply");
+			message.reply_to = messageReply.dataset.messageId;
+		}
+
+		console.log("[MSG] sent message:", message);
 		ws.send(JSON.stringify(message));
 
 		// reset input field
@@ -222,10 +233,22 @@ function sendMessage(e: Event) {
 	}
 }
 
+function getReplyMessage(id: string) {
+	console.log("[REPLYMSG] id:", id);
+	const messagesValues = Object.values(messages.value);
+	console.log("[REPLYMSG] messages values:", messagesValues);
+	for (const message of messagesValues) {
+		console.log("[REPLYMSG] message:", message);
+		console.log("[REPLYMSG] IDs match?", message.uuid == id);
+		if (message.uuid == id) return message;
+	}
+}
+
 const route = useRoute();
 
 onMounted(async () => {
 	if (import.meta.server) return;
+	console.log("[MSG] messages keys:", Object.values(messages.value));
 	if (messagesElement.value) {
 		scrollToBottom(messagesElement.value);
 		let fetched = false;

From daa13dbbed025ea14874c1130a870b8ead44c4f4 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:33:45 +0200
Subject: [PATCH 20/24] feat: add global listener for Escape key to remove
 message reply box

---
 app.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app.vue b/app.vue
index 4c0484a..758cde0 100644
--- a/app.vue
+++ b/app.vue
@@ -26,6 +26,13 @@ onMounted(() => {
 			e.target.contentEditable = "false";
 		}
 	});
+	document.addEventListener("keyup", (e) => {
+		const messageReply = document.getElementById("message-reply") as HTMLDivElement;
+		if (e.key == "Escape" && messageReply) {
+			e.preventDefault();
+			messageReply.remove();
+		}
+	});
 });
 
 function contextMenuHandler(e: MouseEvent) {

From fdabe96a688b4f808d33d5b8b83d4e22e5991297 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 03:52:29 +0200
Subject: [PATCH 21/24] fix: replies displaying replier's name rather than the
 name of the user being replied to

---
 components/Message.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Message.vue b/components/Message.vue
index d86f0ad..2f5157f 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -2,7 +2,7 @@
 	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid }" :data-message-id="props.messageId"
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
-		<MessageReply v-if="props.replyMessage" :author="props.message.user.display_name || props.message.user.username" :text="props.replyMessage?.message"
+		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
 			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />

From c06c732afbb6a6fab6d2c8d7b2024092b0dbb617 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 04:09:26 +0200
Subject: [PATCH 22/24] fix: replies being highlighted even if the replies
 weren't for the logged-in user

---
 components/Message.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Message.vue b/components/Message.vue
index 2f5157f..4f76646 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid }" :data-message-id="props.messageId"
+			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
 			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />

From 51d8909a51bf0b20fe33bf8749fcf3566a009a5d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 04:10:16 +0200
Subject: [PATCH 23/24] feat: change color of reply message text and remove
 bottom margin

---
 components/Message.vue      | 2 +-
 components/MessageReply.vue | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 4f76646..c9a8331 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -204,7 +204,7 @@ function getDayDifference(date1: Date, date2: Date) {
 */
 
 .mentioned {
-	background-color: var(--secondary-color);
+	background-color: rgba(90, 255, 200, 0.123);
 }
 
 </style>
diff --git a/components/MessageReply.vue b/components/MessageReply.vue
index 0e069aa..8ba0902 100644
--- a/components/MessageReply.vue
+++ b/components/MessageReply.vue
@@ -77,10 +77,11 @@ function scrollToReply(e: MouseEvent) {
 }
 
 #reply-text {
-	color: var(--secondary-text-color);
+	color: rgb(150, 150, 150);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	margin-bottom: 0;
 
 }
 

From cd1f294600a0ef40d1553066a4e3ce2fea7d7742 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 11 Jul 2025 04:12:29 +0200
Subject: [PATCH 24/24] feat: change color of reply background and add
 highlight color

---
 components/Message.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Message.vue b/components/Message.vue
index c9a8331..929092a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -204,7 +204,11 @@ function getDayDifference(date1: Date, date2: Date) {
 */
 
 .mentioned {
-	background-color: rgba(90, 255, 200, 0.123);
+	background-color: rgba(0, 255, 166, 0.123);
+}
+
+.mentioned:hover {
+	background-color: rgba(90, 255, 200, 0.233);
 }
 
 </style>