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> = {};
+	messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
-	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;
 });
 
 </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 {

nuxt.config.ts

@@ -10,7 +10,19 @@ export default defineNuxtConfig({
       E.g.: baseURL set to "/web" would host at https://gorb.app/web
       Default is "/" (aka root), which hosts at https://gorb.app/
     */
-    baseURL: "/"
+    baseURL: "/",
+    head: {
+      title: 'Gorb',
+      // this is purely used to embed in that other chat app, and similar stuff
+      meta: [
+        { property: 'og:title', content: 'Gorb' },
+        { property: 'og:description', content: 'Gorb is an open-source (and eventually federated) chat platform where you can join and chat in servers, chat privately in DMs, and more.' },
+        { property: 'og:url', content: 'https://gorb.app/web' },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:site_name', content: 'Gorb' },
+        { property: 'theme-color', content: "#df5f0b" }
+      ]
+    }
   },
   runtimeConfig: {
     public: {