From c4a31276bea607d7dd6b377222db09635a55957c Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 3 Aug 2025 20:41:02 +0200
Subject: [PATCH 1/2] feat: add highlighting of reply when scrolled to

---
 components/UserInterface/MessageReply.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/UserInterface/MessageReply.vue b/components/UserInterface/MessageReply.vue
index f60c0bc..c3efd2b 100644
--- a/components/UserInterface/MessageReply.vue
+++ b/components/UserInterface/MessageReply.vue
@@ -46,11 +46,22 @@ onMounted(async () => {
 function scrollToReply(e: MouseEvent) {
 	e.preventDefault();
 	console.log("clicked on reply box");
-	const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
-	if (reply) {
+	let replyId: string;
+	if (props.maxWidth == "reply") {
+		replyId = props.replyId;
+	} else {
+		replyId = props.id;
+	}
+	const reply = document.querySelector(`.message[data-message-id="${replyId}"]`);
+	if (reply instanceof HTMLDivElement) {
 		console.log("reply:", reply);
 		console.log("scrolling into view");
 		reply.scrollIntoView({ behavior: "smooth", block: "center" });
+		reply.style.transition = "background-color .3s";
+		reply.style.backgroundColor = "var(--primary-highlighted-color)";
+		setTimeout(() => {
+			reply.style.backgroundColor = "";
+		}, 1000);
 	}
 }
 
-- 
2.47.3


From e92e1cde01e9e83cc85a357506ca81e18c59dd1d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 3 Aug 2025 20:54:25 +0200
Subject: [PATCH 2/2] feat: highlight message user is actively replying to

---
 components/Message.vue     | 8 ++++++++
 components/MessageArea.vue | 4 ++++
 utils/replyToMessage.ts    | 4 ++++
 3 files changed, 16 insertions(+)

diff --git a/components/Message.vue b/components/Message.vue
index ed32c50..63cccd6 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -284,3 +284,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	padding-left: 1em;
 }
 </style>
+
+<style>
+
+.replying-to {
+	background-color: var(--primary-highlighted-color);
+}
+
+</style>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 17b4a3e..e81d33d 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -221,6 +221,10 @@ function sendMessage(e: Event) {
 		if (messageReply && messageReply.dataset.messageId) {
 			console.log("[MSG] message is a reply");
 			message.reply_to = messageReply.dataset.messageId;
+			const replyToMessage = document.querySelector(`.message[data-message-id='${message.reply_to}']`);
+			if (replyToMessage) {
+				replyToMessage.classList.remove("replying-to");
+			}
 		}
 
 		console.log("[MSG] sent message:", message);
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 8ee0c28..b2b31a8 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -10,5 +10,9 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
+		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);
+		if (message) {
+			message.classList.add("replying-to");
+		}
 	}
 }
-- 
2.47.3