From 010472c83d8ad0a7151fee054ddf1849c2f5cf0b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:03:54 +0200
Subject: [PATCH] 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 });
+}