app.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Banner v-if="banner" />
-    <NuxtPage :keepalive="true" />
+    <NuxtPage />
   </div>
 </template>
 
@@ -12,12 +12,6 @@ const banner = useState("banner", () => false);
 </script>
 
 <style>
-:root {
-  --background-color: rgb(30, 30, 30);
-  --main-text-color: rgb(190, 190, 190);
-  --outline-border: 1px solid rgb(150, 150, 150);
-}
-
 html,
 body {
   font-family: Arial, Helvetica, sans-serif;
@@ -28,7 +22,7 @@ body {
 }
 
 *:focus-visible {
-	outline: var(--outline-border);
+	outline: 1px solid rgb(150, 150, 150);
 }
 
 a {

components/Message.vue

@@ -95,10 +95,6 @@ onMounted(async () => {
 	margin-top: 1dvh;
 }
 
-.grouped-message {
-	margin-top: .3em;
-}
-
 #last-message {
 	margin-bottom: 2dvh;
 }

components/MessageArea.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
+import type { MessageResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
@@ -101,11 +101,6 @@ if (messagesRes) {
 	}
 }
 
-function pushMessage(message: MessageResponse) {
-	groupMessage(message);
-	messages.value.push(message);
-}
-
 const messages = ref<MessageResponse[]>([]);
 
 const messageInput = ref<string>();
@@ -142,13 +137,14 @@ if (accessToken && apiBase) {
 		console.log("message uuid:", event.data.uuid);
 		const parsedData = JSON.parse(event.data);
 		
+		groupMessage(parsedData);
 		console.log("parsed message type:", messagesType.value[parsedData.uuid]);
 		console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
-		pushMessage(parsedData);
+		messages.value.push(parsedData);
 		await nextTick();
 		if (messagesElement.value) {
 			console.log("scrolling to bottom");
-			scrollToBottom(messagesElement.value);
+			scrollToBottom(messagesElement);
 		}
 	});
 
@@ -172,7 +168,7 @@ const route = useRoute();
 onMounted(async () => {
 	if (import.meta.server) return;
 	if (messagesElement.value) {
-		scrollToBottom(messagesElement.value);
+		scrollToBottom(messagesElement);
 		let fetched = false;
 		const amount = messages.value.length;
 		let offset = messages.value.length;
@@ -207,40 +203,14 @@ onMounted(async () => {
 	}
 });
 
-let scrollPosition = ref<Record<string, ScrollPosition>>({});
-
-onActivated(async () => {
-	await nextTick();
-	console.log("scroll activated");
-	if (messagesElement.value) {
-		if (scrollPosition.value[route.params.channelId as string]) {
-			console.log("saved scroll position:", scrollPosition.value);
-			setScrollPosition(messagesElement.value, scrollPosition.value[route.params.channelId as string]);
-			console.log("scrolled to saved scroll position");
-		} else {
-			scrollToBottom(messagesElement.value);
-			console.log("scrolled to bottom");
-		}
-	}
-});
-
-const router = useRouter();
-
-router.beforeEach((to, from, next) => {
-	console.log("scroll hi");
-  	if (messagesElement.value && from.params.channelId) {
-    	scrollPosition.value[from.params.channelId as string] = getScrollPosition(messagesElement.value)
-		console.log("set saved scroll position to:", scrollPosition.value);
-  	}
-  	next()
-})
-
 </script>
 
 <style scoped>
 #message-area {
 	display: grid;
+	grid-template-columns: 1fr;
 	grid-template-rows: 8fr 1fr;
+	justify-content: space-between;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;

types/interfaces.ts

@@ -70,14 +70,3 @@ export interface StatsResponse {
     email_verification_required: boolean,
     build_number: string
 }
-
-export interface ScrollPosition {
-	scrollHeight: number,
-	scrollWidth: number,
-	scrollTop: number,
-	scrollLeft: number
-	offsetHeight: number,
-	offsetWidth: number,
-	offsetTop: number,
-	offsetLeft: number
-}

utils/getScrollPosition.ts

@@ -1,14 +0,0 @@
-import type { ScrollPosition } from "~/types/interfaces";
-
-export default (element: HTMLElement): ScrollPosition => {
-  return {
-    scrollHeight: element.scrollHeight,
-    scrollWidth: element.scrollWidth,
-    scrollTop: element.scrollTop,
-    scrollLeft: element.scrollLeft,
-    offsetHeight: element.offsetHeight,
-    offsetWidth: element.offsetWidth,
-    offsetTop: element.offsetTop,
-    offsetLeft: element.offsetLeft
-  };
-}

utils/scrollToBottom.ts

@@ -1,6 +1,6 @@
-export default (element: HTMLElement) => {
+export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
-  if (element) {
+  if (element.value) {
-    element.scrollTo({ top: element.scrollHeight });
+    element.value.scrollTo({ top: element.value.scrollHeight });
     return;
   }
 }

utils/setScrollPosition.ts

@@ -1,5 +0,0 @@
-import type { ScrollPosition } from "~/types/interfaces";
-
-export default (element: HTMLElement, scrollPosition: ScrollPosition) => {
-  return element.scrollTo({ top: scrollPosition.scrollTop, left: scrollPosition.scrollLeft });
-}