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] 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">