From 19fcccfb5b900487c4ad2f2ef89c354b9d5e3fe3 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 20:20:28 +0200
Subject: [PATCH] feat: make chat scroll position to be at the bottom upon load

---
 components/MessageArea.vue | 37 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index b99b487..f3b86a6 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="message-area">
-	<div id="messages">
+	<div id="messages" ref="messagesElement">
 		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
 			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
 	</div>
@@ -29,7 +29,7 @@ if (messagesRes && props.reverse) {
   messagesRes.reverse();
 }
 
-const messages = ref(messagesRes ?? []);
+const messages = ref<MessageResponse[]>([]);
 
 const displayNames = ref<Record<string, string>>({});
 
@@ -37,6 +37,18 @@ const route = useRoute();
 
 const messageInput = ref<string>();
 
+const messagesElement = ref<HTMLDivElement>();
+
+if (messagesRes) messages.value = messagesRes;
+	const displayNamesArr: Record<string, string> = {};
+	for (const message of messages.value) {
+		if (!displayNamesArr[message.user_uuid]) {
+			const displayName = await getDisplayName(message.user_uuid);
+			displayNamesArr[message.user_uuid] = displayName;
+		}
+	}
+	displayNames.value = displayNamesArr;
+
 const accessToken = useCookie("access_token").value;
 const apiBase = useCookie("api_base").value;
 const { refresh } = useAuth();
@@ -88,14 +100,7 @@ function sendMessage(e: Event) {
 }
 
 onMounted(async () => {
-	const displayNamesArr: Record<string, string> = {};
-	for (const message of messages.value) {
-		if (!displayNamesArr[message.user_uuid]) {
-			const displayName = await getDisplayName(message.user_uuid);
-			displayNamesArr[message.user_uuid] = displayName;
-		}
-	}
-	displayNames.value = displayNamesArr;
+	messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
 });
 
 </script>
@@ -117,17 +122,9 @@ onMounted(async () => {
 
 #message-box {
 	border: 1px solid rgb(70, 70, 70);
+	padding-bottom: 1dvh;
+	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	height: 7%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-}
-
-#message-form {
-	height: 50%;
-	width: 100%;
 }
 
 #message-input {