From 6658c28c856236a7e32648335b628cbda65d91d9 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:09:44 +0200
Subject: [PATCH 1/5] feat: add utility to scroll to bottom of element

---
 utils/scrollToBottom.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 utils/scrollToBottom.ts

diff --git a/utils/scrollToBottom.ts b/utils/scrollToBottom.ts
new file mode 100644
index 0000000..aca99b4
--- /dev/null
+++ b/utils/scrollToBottom.ts
@@ -0,0 +1,6 @@
+export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
+  if (element.value) {
+    element.value.scrollTo({ top: element.value.scrollHeight });
+    return;
+  }
+}

From 25fc9e23c5d6ced6ea41a137c0843c901fac8ce2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:11:03 +0200
Subject: [PATCH 2/5] fix: redirect missing ? before query parameters

---
 middleware/auth.global.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index 0fc6765..613e928 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -1,5 +1,5 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
-	console.log("to.path:", to.path);
+	console.log("to.fullPath:", to.fullPath);
 	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
 	if (["/login", "/register"].includes(to.path)) {
@@ -19,6 +19,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		query.set("redirect_to", to.path);
 		loading.value = false;
 		console.log("set loading to false");
-		return await navigateTo("/login" + (query ?? ""));
+		return await navigateTo("/login?" + (query ?? ""));
 	}
 })

From 52eab190ee059728eb52627381ba443bb0ea947b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:12:13 +0200
Subject: [PATCH 3/5] fix: auth layout causing too much recursion due to having
 forgotten to remove <NuxtLayout>

---
 layouts/auth.vue | 80 +++++++++++++++++++++++-------------------------
 1 file changed, 39 insertions(+), 41 deletions(-)

diff --git a/layouts/auth.vue b/layouts/auth.vue
index a395a7c..356dcd5 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -1,50 +1,48 @@
 <template>
-  <NuxtLayout>
-    <div id="root-container" style="margin-top: 5dvh;">
-      <div id="main-container">
-        <div v-if="!instanceUrl">
-          <div v-if="instanceError" style="color: red;">
-            {{ instanceError }}
-          </div>
-          <form @submit="selectInstance">
-            <div>
-              <label for="instance-url">Instance URL</label>
-              <br>
-              <input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
-            </div>
-            <div>
-              <button type="submit">Next</button>
-            </div>
-          </form>
+  <div id="root-container" style="margin-top: 5dvh;">
+    <div id="main-container">
+      <div v-if="!instanceUrl">
+        <div v-if="instanceError" style="color: red;">
+          {{ instanceError }}
         </div>
-        <div v-else id="auth-form-container">
-          <slot />
+        <form @submit="selectInstance">
+          <div>
+            <label for="instance-url">Instance URL</label>
+            <br>
+            <input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
+          </div>
+          <div>
+            <button type="submit">Next</button>
+          </div>
+        </form>
+      </div>
+      <div v-else id="auth-form-container">
+        <slot />
+      </div>
+      <div v-if="auth.accessToken.value">
+        You're logged in!
+        <form @submit="logout">
+          <div>
+            <label for="logout-password">Password</label>
+            <br>
+            <input type="password" name="logout-password" id="logout-password" v-model="form.password" required>
+          </div>
+          <div>
+            <button type="submit">Log out</button>
+          </div>
+        </form>
+        <div>
+          <button @click="refresh">Refresh</button>
         </div>
-        <div v-if="auth.accessToken.value">
-          You're logged in!
-          <form @submit="logout">
-            <div>
-              <label for="logout-password">Password</label>
-              <br>
-              <input type="password" name="logout-password" id="logout-password" v-model="form.password" required>
-            </div>
-            <div>
-              <button type="submit">Log out</button>
-            </div>
-          </form>
-          <div>
-            <button @click="refresh">Refresh</button>
-          </div>
-          <div>
-            <button @click="showUser">Show user</button>
-          </div>
-          <div>
-            <button @click="getUser">Get me</button>
-          </div>
+        <div>
+          <button @click="showUser">Show user</button>
+        </div>
+        <div>
+          <button @click="getUser">Get me</button>
         </div>
       </div>
     </div>
-  </NuxtLayout>
+  </div>
 </template>
 
 <script lang="ts" setup>

From e0cc80230cfd2a6314cfd1ba7ccb74b0ad57a6b4 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:12:42 +0200
Subject: [PATCH 4/5] feat: add small additional check for refresh res variable

---
 composables/auth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composables/auth.ts b/composables/auth.ts
index 5c42d73..19ac694 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -64,7 +64,7 @@ export const useAuth = () => {
       method: "POST"
     }) as any;
     console.log("finished refreshing:", res);
-    if (res.access_token) {
+    if (res && res.access_token) {
       accessToken.value = res.access_token;
       console.log("set new access token");
     } else {

From b164abeda9861bb6811c5a88354da0b2e9fb2bab Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:13:02 +0200
Subject: [PATCH 5/5] feat: implement autoscroll

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

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index f3b86a6..7d20ff0 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -18,6 +18,7 @@
 <script lang="ts" setup>
 import type { MessageResponse } from '~/types/interfaces';
 import fetchUser from '~/utils/fetchUser';
+import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>();
 
@@ -71,11 +72,16 @@ ws.addEventListener("open", (event) => {
 	console.log("WebSocket connected!");
 });
 
-ws.addEventListener("message", (event) => {
+ws.addEventListener("message", async (event) => {
 	console.log("event data:", event.data);
 	messages.value?.push(
 		JSON.parse(event.data)
 	);
+	await nextTick();
+	if (messagesElement.value) {
+		console.log("scrolling to bottom");
+		scrollToBottom(messagesElement);
+	}
 });
 } else {
 	await refresh();
@@ -100,7 +106,9 @@ function sendMessage(e: Event) {
 }
 
 onMounted(async () => {
-	messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
+	if (messagesElement.value) {
+		scrollToBottom(messagesElement);
+	}
 });
 
 </script>