From ff9bce6635eed901d29ba319308367bd670dbec5 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:00:48 +0200
Subject: [PATCH 1/7] feat: move some colors to root variables

---
 app.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 9e6e124..839c04f 100644
--- a/app.vue
+++ b/app.vue
@@ -12,6 +12,12 @@ 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;
@@ -22,7 +28,7 @@ body {
 }
 
 *:focus-visible {
-	outline: 1px solid rgb(150, 150, 150);
+	outline: var(--outline-border);
 }
 
 a {

From 806a9320635094a33db33d1e54a8039a57ede7b9 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:42:02 +0200
Subject: [PATCH 2/7] feat: add spacing between grouped messages

---
 components/Message.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/Message.vue b/components/Message.vue
index e4fd9a6..5cd7773 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -95,6 +95,10 @@ onMounted(async () => {
 	margin-top: 1dvh;
 }
 
+.grouped-message {
+	margin-top: .3em;
+}
+
 #last-message {
 	margin-bottom: 2dvh;
 }

From 4679b3658cb2be08838ea2ada13b8466b4b0cf78 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:44:24 +0200
Subject: [PATCH 3/7] feat: remove useless css properties

---
 components/MessageArea.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 104788e..f4a76fe 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -208,9 +208,7 @@ onMounted(async () => {
 <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;

From 59a6759bba3569673cd802234f8e1caf70b60f3f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:45:06 +0200
Subject: [PATCH 4/7] feat: update scrollToBottom()

---
 components/MessageArea.vue | 4 ++--
 utils/scrollToBottom.ts    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index f4a76fe..253634e 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -144,7 +144,7 @@ if (accessToken && apiBase) {
 		await nextTick();
 		if (messagesElement.value) {
 			console.log("scrolling to bottom");
-			scrollToBottom(messagesElement);
+			scrollToBottom(messagesElement.value);
 		}
 	});
 
@@ -168,7 +168,7 @@ const route = useRoute();
 onMounted(async () => {
 	if (import.meta.server) return;
 	if (messagesElement.value) {
-		scrollToBottom(messagesElement);
+		scrollToBottom(messagesElement.value);
 		let fetched = false;
 		const amount = messages.value.length;
 		let offset = messages.value.length;
diff --git a/utils/scrollToBottom.ts b/utils/scrollToBottom.ts
index aca99b4..8064bd8 100644
--- a/utils/scrollToBottom.ts
+++ b/utils/scrollToBottom.ts
@@ -1,6 +1,6 @@
-export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
-  if (element.value) {
-    element.value.scrollTo({ top: element.value.scrollHeight });
+export default (element: HTMLElement) => {
+  if (element) {
+    element.scrollTo({ top: element.scrollHeight });
     return;
   }
 }

From 7e2deb2a0a8ec40f52887672c702cd75522e2ec3 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:46:09 +0200
Subject: [PATCH 5/7] feat: create function to push messages to chat

---
 components/MessageArea.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 253634e..ddcd6cc 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -101,6 +101,11 @@ if (messagesRes) {
 	}
 }
 
+function pushMessage(message: MessageResponse) {
+	groupMessage(message);
+	messages.value.push(message);
+}
+
 const messages = ref<MessageResponse[]>([]);
 
 const messageInput = ref<string>();
@@ -137,10 +142,9 @@ 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]);
-		messages.value.push(parsedData);
+		pushMessage(parsedData);
 		await nextTick();
 		if (messagesElement.value) {
 			console.log("scrolling to bottom");

From 6363a6eac1f864c9b95cdc088c2b9a800506dce9 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:02:29 +0200
Subject: [PATCH 6/7] feat: make <NuxtPage> keepalive

---
 app.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 839c04f..fbc6572 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Banner v-if="banner" />
-    <NuxtPage />
+    <NuxtPage :keepalive="true" />
   </div>
 </template>
 

From f5d4e0d011ba8a32eb47414f263f8b69de94796a Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:03:54 +0200
Subject: [PATCH 7/7] feat: implement scroll position retention

---
 components/MessageArea.vue | 30 +++++++++++++++++++++++++++++-
 types/interfaces.ts        | 11 +++++++++++
 utils/getScrollPosition.ts | 14 ++++++++++++++
 utils/setScrollPosition.ts |  5 +++++
 4 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 utils/getScrollPosition.ts
 create mode 100644 utils/setScrollPosition.ts

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index ddcd6cc..49577f9 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { MessageResponse } from '~/types/interfaces';
+import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
@@ -207,6 +207,34 @@ 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>
diff --git a/types/interfaces.ts b/types/interfaces.ts
index b4869e2..1aba1bc 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -70,3 +70,14 @@ 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
+}
diff --git a/utils/getScrollPosition.ts b/utils/getScrollPosition.ts
new file mode 100644
index 0000000..1f4a99f
--- /dev/null
+++ b/utils/getScrollPosition.ts
@@ -0,0 +1,14 @@
+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
+  };
+}
diff --git a/utils/setScrollPosition.ts b/utils/setScrollPosition.ts
new file mode 100644
index 0000000..c7ddfd2
--- /dev/null
+++ b/utils/setScrollPosition.ts
@@ -0,0 +1,5 @@
+import type { ScrollPosition } from "~/types/interfaces";
+
+export default (element: HTMLElement, scrollPosition: ScrollPosition) => {
+  return element.scrollTo({ top: scrollPosition.scrollTop, left: scrollPosition.scrollLeft });
+}