Merge branch 'main' into highlight-reply

components/Message.vue

@@ -290,3 +290,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	padding-left: 1em;
 }
 </style>
+
+<style>
+
+.replying-to {
+	background-color: var(--primary-highlighted-color);
+}
+
+</style>

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);

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);
 	}
 }
 

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");
+		}
 	}
 }