From a56e12149bc4ef0cc1082ee75b0546116f4c5872 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 3 Jun 2025 06:15:51 +0200
Subject: [PATCH 01/17] fix: modify message css to avoid weird line spacing

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

diff --git a/components/Message.vue b/components/Message.vue
index 64af1d9..5db6ec3 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -19,7 +19,7 @@
 	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
 		<div class="left-column">
 			<div>
-				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
+				<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
 					{{ messageDate }}
 				</span>
 			</div>
@@ -140,7 +140,7 @@ onMounted(async () => {
 }
 
 .left-column {
-	margin-right: .5dvw;
+	min-width: 4dvw;
 	text-align: center;
 	align-content: center;
 }
@@ -156,6 +156,10 @@ onMounted(async () => {
 	cursor: default;
 }
 
+.side-message-date {
+	font-size: .625em;
+}
+
 /*
 .message-date-tooltip {
 	height: 20px;;

From d85eb03ad0abe5742b5aab5408bc48252b4bf1ca Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 16:18:13 +0200
Subject: [PATCH 02/17] feat: change message history grids to fix scaling of
 message timestamps

---
 components/Message.vue     | 10 +++++-----
 components/MessageArea.vue |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 5db6ec3..e488adc 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
+	<div v-else ref="messageElement" class="message grouped-message" tabindex="0">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
@@ -24,7 +24,7 @@
 				</span>
 			</div>
 		</div>
-		<div class="message-data">
+		<div class="message-data" :id="props.last ? 'last-message' : undefined">
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
@@ -100,8 +100,7 @@ onMounted(async () => {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	display: grid;
-	grid-template-columns: 1fr 19fr;
+	display: contents;
 	align-items: center;
 }
 
@@ -110,7 +109,7 @@ onMounted(async () => {
 }
 
 #last-message {
-	margin-bottom: 2dvh;
+	margin-bottom: 1dvh;
 }
 
 .message-metadata {
@@ -143,6 +142,7 @@ onMounted(async () => {
 	min-width: 4dvw;
 	text-align: center;
 	align-content: center;
+	white-space: nowrap;
 }
 
 .author-username {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index e3dcdbf..e142641 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -245,8 +245,8 @@ onMounted(async () => {
 
 #messages {
 	overflow-y: scroll;
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: min-content 1fr;
 	gap: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;

From d986f601dec7466d9a81974c9336c31e0e64a238 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 20:42:34 +0200
Subject: [PATCH 03/17] feat: improve 24-hour to 12-hour format conversion by
 using Date methods

---
 components/Message.vue | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index e488adc..61f1c10 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -10,7 +10,7 @@
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
-					{{ messageDate }}
+					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized"></div>
@@ -20,7 +20,7 @@
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-					{{ messageDate }}
+					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
 		</div>
@@ -46,32 +46,14 @@ const props = defineProps<{
 	last: boolean
 }>();
 
-const messageDate = ref<string>();
-
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 
-let dateHour = date.getHours();
-let dateMinute = date.getMinutes();
-if (props.format == "12") {
-	if (dateHour > 12) {
-		dateHour = dateHour - 12;
-		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
-	} else {
-		if (dateHour == 0) {
-			dateHour = 12;
-		}
-		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
-	}
-} else {
-	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
-}
-
 console.log("message:", props.text);
-console.log("author:", props.username);
+console.log("author:", props.username)
 
 const sanitized = ref<string>();
 

From 82fde5671dc68a9f9bd47292ae6991d5ef377c3e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 20:49:41 +0200
Subject: [PATCH 04/17] fix: last message from user not having bottom margin

---
 components/Message.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 61f1c10..1912854 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
+	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message grouped-message" tabindex="0">
+	<div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
@@ -86,6 +86,10 @@ onMounted(async () => {
 	align-items: center;
 }
 
+.message-margin-bottom > * {
+	margin-bottom: 1dvh;
+}
+
 .normal-message {
 	margin-top: 1dvh;
 }
@@ -121,7 +125,6 @@ onMounted(async () => {
 }
 
 .left-column {
-	min-width: 4dvw;
 	text-align: center;
 	align-content: center;
 	white-space: nowrap;

From 263c823ceb920592a64c6d6b6bd0daa93adb2cca Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 20:50:28 +0200
Subject: [PATCH 05/17] fix: tabIndex not working after changing messages to
 use "display: contents;"

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

diff --git a/components/Message.vue b/components/Message.vue
index 1912854..66cf1b5 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,19 +1,19 @@
 <template>
 	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
 		<div class="left-column">
-			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
+			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username">
+				<span class="message-author-username" tabindex="0">
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized"></div>
+			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
 	<div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
@@ -25,7 +25,7 @@
 			</div>
 		</div>
 		<div class="message-data" :id="props.last ? 'last-message' : undefined">
-			<div class="message-text" v-html="sanitized"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
 </template>

From 67e10a4387f6838548d0de95b3a56c8701da4277 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 20:52:42 +0200
Subject: [PATCH 06/17] feat: refactor to allow more markdown tags, syling
 changes to make lists and headings not take up as much space

---
 components/Message.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 66cf1b5..8df20cd 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import DOMPurify from 'dompurify';
-import { parseInline } from 'marked';
+import { parse } from 'marked';
 
 const props = defineProps<{
 	class?: string,
@@ -53,13 +53,13 @@ const dateHidden = ref<boolean>(true);
 const date = new Date(props.timestamp);
 
 console.log("message:", props.text);
-console.log("author:", props.username)
+console.log("author:", props.username);
 
 const sanitized = ref<string>();
 
 onMounted(async () => {
-	const parsed = await parseInline(props.text, {gfm: true });
-	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] });
+	const parsed = await parse(props.text, { gfm: true });
+	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
 	console.log("adding listeners")
 	await nextTick();
 	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
@@ -151,4 +151,17 @@ onMounted(async () => {
 	width: 20px;
 }
 */
-</style>
\ No newline at end of file
+</style>
+
+<style module>
+.message-text ul {
+	margin-top: 1dvh;
+	margin-bottom: 1dvh;
+	padding-left: 2dvw;
+}
+
+.message-text h1, h2, h3, h4, h5, h6 {
+	margin-top: 1dvh;
+	margin-bottom: 1dvh;
+}
+</style>

From d22e77ed144d63be1cf3b6a331afee3eefddf795 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 3 Jun 2025 20:53:30 +0200
Subject: [PATCH 07/17] feat: improve appearance of members list, same method
 as messages

---
 pages/servers/[serverId]/channels/[channelId].vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 31efe9b..a9939f0 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -97,12 +97,14 @@ function toggleInvitePopup(e: Event) {
 
 #members-list {
 	display: grid;
-	grid-template-columns: auto;
+	grid-template-columns: min-content 1fr;
+	gap: 2dvh;
+	align-items: center;
+	margin-top: 1dvh;
 }
 
 .member-item {
-	display: grid;
-	grid-template-columns: 2dvw auto;
+	display: contents;
 	margin-top: .5em;
 	margin-bottom: .5em;
 	gap: 1em;

From 3899843a7c14aa42d8944531c51bd9f4e356e0c1 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 6 Jun 2025 01:55:18 +0200
Subject: [PATCH 08/17] feat: change message area back to using flex display,
 improvement for UI

---
 components/Message.vue     | 49 ++++++++++++++++++++------------------
 components/MessageArea.vue |  5 ++--
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 8df20cd..e4fd9a6 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -16,15 +16,13 @@
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
 		<div class="left-column">
-			<div>
-				<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
-				</span>
-			</div>
+			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
+				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+			</span>
 		</div>
-		<div class="message-data" :id="props.last ? 'last-message' : undefined">
+		<div class="message-data">
 			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
 		</div>
 	</div>
@@ -82,12 +80,15 @@ onMounted(async () => {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	display: contents;
+	display: grid;
+	grid-template-columns: 2dvw 1fr;
 	align-items: center;
+	column-gap: 1dvw;
+	width: 100%;
 }
 
-.message-margin-bottom > * {
-	margin-bottom: 1dvh;
+.message:hover {
+	background-color: rgb(20, 20, 20);
 }
 
 .normal-message {
@@ -95,7 +96,7 @@ onMounted(async () => {
 }
 
 #last-message {
-	margin-bottom: 1dvh;
+	margin-bottom: 2dvh;
 }
 
 .message-metadata {
@@ -109,8 +110,8 @@ onMounted(async () => {
 	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
-	height: 100%;
+	height: fit-content;
+	width: 100%;
 }
 
 .message-author {
@@ -119,15 +120,15 @@ onMounted(async () => {
 }
 
 .message-author-avatar {
-	height: 2.3em;
-	width: 2.3em;
+	width: 100%;
 	border-radius: 50%;
 }
 
 .left-column {
+	display: flex;
 	text-align: center;
-	align-content: center;
 	white-space: nowrap;
+	
 }
 
 .author-username {
@@ -143,6 +144,9 @@ onMounted(async () => {
 
 .side-message-date {
 	font-size: .625em;
+	display: flex;
+	align-items: center;
+	align-content: center;
 }
 
 /*
@@ -154,14 +158,13 @@ onMounted(async () => {
 </style>
 
 <style module>
-.message-text ul {
-	margin-top: 1dvh;
-	margin-bottom: 1dvh;
-	padding-left: 2dvw;
+.message-text ul, h1, h2, h3, h4, h5, h6 {
+	padding-top: 1dvh;
+	padding-bottom: 1dvh;
+	margin: 0;
 }
 
-.message-text h1, h2, h3, h4, h5, h6 {
-	margin-top: 1dvh;
-	margin-bottom: 1dvh;
+.message-text ul  {
+	padding-left: 2dvw;
 }
 </style>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index e142641..104788e 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -245,9 +245,8 @@ onMounted(async () => {
 
 #messages {
 	overflow-y: scroll;
-	display: grid;
-	grid-template-columns: min-content 1fr;
-	gap: 1dvh;
+	display: flex;
+	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 }

From d49d5337241d8ee91d5d8718d69707ad241a6bdc Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 6 Jun 2025 01:56:15 +0200
Subject: [PATCH 09/17] feat: change members list back to using flex display

---
 pages/servers/[serverId]/channels/[channelId].vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index a9939f0..c9aa8d2 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -96,15 +96,17 @@ function toggleInvitePopup(e: Event) {
 }
 
 #members-list {
-	display: grid;
-	grid-template-columns: min-content 1fr;
-	gap: 2dvh;
-	align-items: center;
+	display: flex;
+	flex-direction: column;
+	overflow-y: scroll;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	margin-top: 1dvh;
 }
 
 .member-item {
-	display: contents;
+	display: grid;
+	grid-template-columns: 2dvw 1fr;
 	margin-top: .5em;
 	margin-bottom: .5em;
 	gap: 1em;

From 774e10d68cbe45840051adb0ae7be683cb83572d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 6 Jun 2025 01:57:19 +0200
Subject: [PATCH 10/17] fix: automatic auth refresh

---
 utils/fetchWithApi.ts | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/utils/fetchWithApi.ts b/utils/fetchWithApi.ts
index 79fdae8..4089db8 100644
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@@ -9,8 +9,6 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
     path = path.slice(0, path.lastIndexOf("/"));
   }
   console.log("formatted path:", path);
-  const accessToken = useCookie("access_token");
-  console.log("access token:", accessToken.value);
   const apiBase = useCookie("api_base").value;
   const apiVersion = useRuntimeConfig().public.apiVersion;
   console.log("heyoooo")
@@ -21,23 +19,24 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
   }
   console.log("path:", path)
   const { revoke, refresh } = useAuth();
-  console.log("access token 2:", accessToken.value);
-
+  
   let headers: HeadersInit = {};
-
-  if (accessToken.value) {
-    headers = {
-      ...options.headers,
-      "Authorization": `Bearer ${accessToken.value}`
-    };
-  } else {
-    headers = {
-      ...options.headers
-    };
-  }
-
+  
+  
   let reauthFailed = false;
   while (!reauthFailed) {
+    const accessToken = useCookie("access_token");
+    console.log("access token:", accessToken.value);
+    if (accessToken.value) {
+      headers = {
+        ...options.headers,
+        "Authorization": `Bearer ${accessToken.value}`
+      };
+    } else {
+      headers = {
+        ...options.headers
+      };
+    }
     try {
       console.log("fetching:", URL.parse(apiBase + path));
       const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
@@ -74,9 +73,10 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
           console.log("Path is refresh endpoint, throwing error");
           throw error;
         }
+      } else {
+        console.log("throwing error:", error);
+        throw error;
       }
-      console.log("throwing error");
-      throw error;
     }
   }
 }

From c0f4697d0083a28e51c339783f478953eac2079a Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:00:48 +0200
Subject: [PATCH 11/17] 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 cca348b476603e56473bd91171bb8a1195c6b7cd Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:42:02 +0200
Subject: [PATCH 12/17] 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 ccefc8ca19a0f30f3c96625c65d1cfdae80ed81f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:44:24 +0200
Subject: [PATCH 13/17] 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 2c76edaa320163db65c0e3af8f00926c827cf4a0 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:45:06 +0200
Subject: [PATCH 14/17] 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 61df171c5994b6f314b8c18f824a50137d09368b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 05:46:09 +0200
Subject: [PATCH 15/17] 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 acca8468f0148b78b4787b895ff2e6a8f9b78cf4 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:02:29 +0200
Subject: [PATCH 16/17] 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 010472c83d8ad0a7151fee054ddf1849c2f5cf0b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 7 Jun 2025 06:03:54 +0200
Subject: [PATCH 17/17] 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 });
+}