From 81403355184092306105ca6418cc986c2f2eafc2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:17:00 +0200
Subject: [PATCH 01/35] feat: disable ssr to enable client-side rendering

---
 nuxt.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index cafe2e0..55bb13d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
   modules: ['@nuxt/eslint', '@nuxt/image', "@pinia/nuxt", "@nuxt/icon"],
+  ssr: false,
   app: {
     /*
       Defines what prefix the client runs on
-- 
2.47.2


From 22ca450651c9ac82e594e487f1a8b6960a927535 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:17:54 +0200
Subject: [PATCH 02/35] feat: make Loading component a spinning load circle

---
 components/Loading.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/Loading.vue b/components/Loading.vue
index 14a379d..c9b38ac 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    Loading...
+  <div id="loading-container">
+    <Icon name="lucide:loader-circle" id="loading-circle" />
   </div>
 </template>
 
@@ -8,6 +8,31 @@
 
 </script>
 
-<style>
+<style scoped>
+
+#loading-container {
+	position: fixed;
+	left: 50dvw;
+	top: 50dvh;
+	transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+#loading-circle {
+	animation-name: spin;
+	animation-duration: 1s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	font-size: 2rem;
+}
 
 </style>
\ No newline at end of file
-- 
2.47.2


From 6a11108ec15a7eba5af10c2570797c0b10b6c080 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:18:29 +0200
Subject: [PATCH 03/35] feat: add auth middleware

---
 middleware/auth.global.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 middleware/auth.global.ts

diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
new file mode 100644
index 0000000..e567c70
--- /dev/null
+++ b/middleware/auth.global.ts
@@ -0,0 +1,17 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+	console.log("to.path:", to.path);
+	const accessToken = useCookie("access_token").value;
+	if (["/login", "/register"].includes(to.path)) {
+		if (accessToken) {
+			return await navigateTo("/");
+		}
+		return;
+	};
+
+	if (!accessToken) {
+		const { refresh } = useAuth();
+		console.log("hi");
+		await refresh();
+		return await navigateTo("/login");
+	}
+})
-- 
2.47.2


From a15f85a08276b3824890a1c7fbd7ede015180761 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:24:54 +0200
Subject: [PATCH 04/35] fix: refresh returning 401 not properly logging you out
 of client

---
 composables/auth.ts   |  20 +++----
 utils/fetchWithApi.ts | 129 +++++++++++++++++++++++-------------------
 2 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/composables/auth.ts b/composables/auth.ts
index ccb45ca..7ce077c 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -30,11 +30,11 @@ export const useAuth = () => {
       {
         username, password: hashedPass, device_name: "Linux Laptop"
       }
-    }) as { access_token: string, refresh_token: string }; fetch
+    }) as { access_token: string, refresh_token: string };
     console.log("hi");
     accessToken.value = res.access_token;
     console.log("access token:", accessToken.value);
-    await fetchUser();
+    //await fetchUser();
   }
 
   async function logout(password: string) {
@@ -60,19 +60,17 @@ export const useAuth = () => {
 
   async function refresh() {
     console.log("refreshing");
-    try {
-      const res = await fetchWithApi("/auth/refresh", {
-        method: "POST"
-      }) as { access_token: string };
-      accessToken.value = res.access_token;
-      console.log("set new access token");
-    } catch (error) {
-      console.error("refresh error:", error);
-    }
+	const res = await fetchWithApi("/auth/refresh", {
+	method: "POST"
+	}) as any;
+	console.log("finished refreshing:", res);
+	accessToken.value = res?.access_token;
+	console.log("set new access token");
   }
 
   async function fetchUser() {
     if (!accessToken.value) return;
+	console.log("fetchuser access token:", accessToken.value);
     const res = await fetchWithApi("/users/me") as UserResponse;
     user.value = res;
     return user.value;
diff --git a/utils/fetchWithApi.ts b/utils/fetchWithApi.ts
index c0ebf2e..11856fb 100644
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@@ -9,63 +9,74 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
     path = path.slice(0, path.lastIndexOf("/"));
   }
   console.log("formatted path:", path);
-  try {
-    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")
-    console.log("apiBase:", apiBase);
-    if (!apiBase) {
-      console.log("no api base");
-      return;
-    }
-    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) {
-      try {
-        console.log("fetching:", URL.parse(apiBase + path));
-        const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
-          ...options,
-          headers,
-          credentials: "include"
-        });
-    
-        return res;
-      } catch (error: any) {
-        if (error?.response?.status === 401) {
-          if (!path.startsWith("/auth/refresh")) {
-            try {
-              await refresh();
-            } catch (error: any) {
-              if (error?.response?.status === 401) {
-                reauthFailed = true;
-                await revoke();
-                return;
-              }
-            }
-          }
-        }
-        throw error;
-      }
-    }
-  } catch (error) {
-    console.error("error:", error);
-  }
+	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")
+	console.log("apiBase:", apiBase);
+	if (!apiBase) {
+		console.log("no api base");
+		return;
+	}
+	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) {
+		try {
+		console.log("fetching:", URL.parse(apiBase + path));
+		const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
+			...options,
+			headers,
+			credentials: "include"
+		});
+
+		return res;
+		} catch (error: any) {
+		console.error("Error fetching resource");
+		if (error?.response?.status === 401) {
+			console.log("Error status is 401");
+			if (!path.startsWith("/auth/refresh")) {
+			console.log("Path is not refresh endpoint");
+			try {
+				console.log("Trying to refresh");
+				await refresh();
+				console.log("Successfully refreshed token");
+			} catch (error: any) {
+				console.log("Failed to refresh token");
+				if (error?.response?.status === 401) {
+				console.log("Refresh returned 401");
+				reauthFailed = true;
+				console.log("Revoking");
+				await revoke();
+				console.log("Redirecting to login");
+				await navigateTo("/login");
+				console.log("redirected");
+				return;
+				}
+			}
+			} else {
+			console.log("Path is refresh endpoint, throwing error");
+			throw error;
+			}
+		}
+		console.log("throwing error");
+		throw error;
+		}
+	}
 }
-- 
2.47.2


From 9f6490d744e8879ee6fd79d74d1c5f990967295e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:26:17 +0200
Subject: [PATCH 05/35] feat: add verify-email page, wip

---
 pages/verify-email.vue | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 pages/verify-email.vue

diff --git a/pages/verify-email.vue b/pages/verify-email.vue
new file mode 100644
index 0000000..cae02ea
--- /dev/null
+++ b/pages/verify-email.vue
@@ -0,0 +1,32 @@
+<template>
+	<div id="container">
+		<div v-if="errorMessage">
+			{{ errorMessage }}
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const errorMessage = ref();
+
+const token = useRoute().query.token;
+
+try {
+	const res = await fetchWithApi("/auth/verify-email", { query: { token } });
+	console.log("hi");
+} catch (error) {
+	console.error("Error verifying email:", error);
+	errorMessage.value = error;
+}
+
+</script>
+
+<style scoped>
+
+#container {
+	text-align: center;
+	margin: auto;
+}
+
+</style>
\ No newline at end of file
-- 
2.47.2


From 8bfa17631c32d0e41a25b064082695bacaa1b511 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:27:22 +0200
Subject: [PATCH 06/35] feat: add support for redirect_to query param in
 register page

---
 pages/register.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/pages/register.vue b/pages/register.vue
index cd17005..18276ee 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -33,7 +33,7 @@
       </div>
     </form>
     <div>
-      Already have an account? <NuxtLink href="/login">Log in</NuxtLink>!
+      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
     </div>
   </NuxtLayout>
 </template>
@@ -74,7 +74,9 @@ const errorMessages = reactive({
 
 //const authStore = useAuthStore();
 const auth = useAuth();
-const redirectTo = useRoute().query.redirect_to;
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+const loginUrl = `/login?${searchParams}`
 
 onMounted(() => {
   if (auth.accessToken.value) {
@@ -120,7 +122,12 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
 async function register(e: Event) {
   e.preventDefault();
   console.log("Sending registration data");
-  await auth.register(form.username, form.email, form.password);
+  try {
+	await auth.register(form.username, form.email, form.password);
+	return await navigateTo(query.redirect_to);
+  } catch (error) {
+	console.error("Error registering:", error);
+  }
   //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
 }
 
-- 
2.47.2


From e1cce87cdb6b87638c389a5895f87d36816077ef Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:28:09 +0200
Subject: [PATCH 07/35] fix: always redirecting to / due to missing if
 statement in login page

---
 pages/login.vue | 68 +++++++++++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 27 deletions(-)

diff --git a/pages/login.vue b/pages/login.vue
index 485166d..4ae6de3 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,46 +1,60 @@
 <template>
-  <NuxtLayout>
-    <form @submit="formLogin">
-      <div>
-        <label for="username">Username/Email</label>
-        <br>
-        <input type="text" name="username" id="username" v-model="form.username">
-      </div>
-      <div>
-        <label for="password">Password</label>
-        <br>
-        <input type="password" name="password" id="password" v-model="form.password">
-      </div>
-      <div>
-        <button type="submit">Login</button>
-      </div>
-    </form>
-    <div>
-      Don't have an account? <NuxtLink href="/register">Register</NuxtLink> one!
-    </div>
-  </NuxtLayout>
+	<NuxtLayout>
+		<form @submit="formLogin">
+			<div>
+				<label for="username">Username/Email</label>
+				<br>
+				<input type="text" name="username" id="username" v-model="form.username">
+			</div>
+			<div>
+				<label for="password">Password</label>
+				<br>
+				<input type="password" name="password" id="password" v-model="form.password">
+			</div>
+			<div>
+				<button type="submit">Login</button>
+			</div>
+		</form>
+		<div>
+			Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
+		</div>
+	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 
 definePageMeta({
-  layout: "auth"
+	layout: "auth"
 })
 
 const form = reactive({
-  username: "",
-  password: "",
+	username: "",
+	password: "",
 });
 
 //const authStore = useAuthStore();
 
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+const registerUrl = `/register?${searchParams}`
+
 const { login } = useAuth();
 
 async function formLogin(e: Event) {
-  e.preventDefault();
-  console.log("Sending login data");
-  await login(form.username, form.password, "Linux Laptop");
-  //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
+	e.preventDefault();
+	console.log("Sending login data");
+	try {
+		await login(form.username, form.password, "Linux Laptop");
+		console.log("logged in");
+		if (query.redirect_to) {
+			console.log("redirecting to:", query.redirect_to);
+			return await navigateTo(query.redirect_to);
+		}
+		return await navigateTo("/");
+	} catch (error) {
+		console.error("Error logging in:", error);
+	}
+	//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
 }
 
 </script>
-- 
2.47.2


From 073e93cb572ce7935dd1f3407db077c16f066997 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:29:05 +0200
Subject: [PATCH 08/35] feat: move Loading in auth layout to outside root
 container

---
 layouts/auth.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/layouts/auth.vue b/layouts/auth.vue
index f90dc84..f9d5bff 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -1,7 +1,7 @@
 <template>
-  <div id="root-container" style="margin-top: 5dvh;">
-    <Loading v-if="!mounted" />
-    <div v-else id="main-container">
+  <Loading v-if="!mounted" />
+  <div v-else id="root-container" style="margin-top: 5dvh;">
+    <div id="main-container">
       <div v-if="!instanceUrl">
         <div v-if="instanceError" style="color: red;">
           {{ instanceError }}
-- 
2.47.2


From 1783928c3614ece745149fca4378420d0fcf4132 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:29:26 +0200
Subject: [PATCH 09/35] feat: add / page

---
 pages/index.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 pages/index.vue

diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..f970926
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <NuxtLayout>
+
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+
+definePageMeta({
+	layout: "client"
+});
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
-- 
2.47.2


From 582435a3c7b2c67b00588d9f85a01b99325a8b49 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:29:44 +0200
Subject: [PATCH 10/35] feat: create custom error page, wip

---
 error.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 error.vue

diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..dff8c5f
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,29 @@
+<template>
+	<div id="error-container">
+		<h2>{{ error?.statusCode }}</h2>
+		<p>{{ error?.message }}</p>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { NuxtError } from '#app';
+
+const props = defineProps({
+	error: Object as () => NuxtError
+});
+
+if (props.error?.statusCode == 401) {
+	console.log("HELLO THERE");
+	clearError({ redirect: `/login?redirect_to=${useRoute().fullPath}` });
+}
+
+</script>
+
+<style scoped>
+
+#error-container {
+	text-align: center;
+	margin: auto;
+}
+
+</style>
-- 
2.47.2


From 508af367045ac1890f9691f0e5bd5bab95f74019 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:30:18 +0200
Subject: [PATCH 11/35] feat: add Loading component to app.vue

---
 app.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 643fc86..e011b8d 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,16 @@
 <template>
-  <NuxtPage />
+  <div>
+	<Loading v-if="loading" />
+    <NuxtPage />
+  </div>
 </template>
 
+<script lang="ts" setup>
+
+const loading = useState("loading");
+
+</script>
+
 <style>
 html,
 body {
-- 
2.47.2


From 585e79dac65961c1efbcd3de45384f95b58f7e11 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 22:36:14 +0200
Subject: [PATCH 12/35] feat: set baseURL back to root rather than /web

---
 nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 55bb13d..fb4f692 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,7 +10,7 @@ export default defineNuxtConfig({
       E.g.: baseURL set to "/web" would host at https://gorb.app/web
       Default is "/" (aka root), which hosts at https://gorb.app/
     */
-    baseURL: "/web"
+    baseURL: "/"
   },
   runtimeConfig: {
     public: {
-- 
2.47.2


From e6bff0042d4f8fc821f75e93c3f802b8efaed133 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 22:37:25 +0200
Subject: [PATCH 13/35] feat: switched from setting height to 100% to using
 100dvh

---
 app.vue            | 1 -
 layouts/client.vue | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/app.vue b/app.vue
index e011b8d..5d47bb7 100644
--- a/app.vue
+++ b/app.vue
@@ -18,7 +18,6 @@ body {
   box-sizing: border-box;
   color: rgb(190, 190, 190);
   background-color: rgb(30, 30, 30);
-  height: 100%;
   margin: 0;
 }
 
diff --git a/layouts/client.vue b/layouts/client.vue
index 02f7ded..b0fbf02 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -90,7 +90,7 @@ function sendMessage(e: Event) {
 <style>
 #client-root {
 	/* border: 1px solid white; */
-	height: 100%;
+	height: 100dvh;
 	display: grid;
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
@@ -114,7 +114,6 @@ function sendMessage(e: Event) {
 #__nuxt {
 	display: flex;
 	flex-flow: column;
-	height: 100%;
 }
 
 .grid-column {
-- 
2.47.2


From 6548f9329ef998fb0bdaed21b4ee0ec03e7be266 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 22:38:11 +0200
Subject: [PATCH 14/35] fix: redirect query set to undefined due to missing if
 statement check

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

diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index e567c70..75fc12e 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -12,6 +12,8 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		const { refresh } = useAuth();
 		console.log("hi");
 		await refresh();
-		return await navigateTo("/login");
+		const query = new URLSearchParams();
+		query.set("redirect_to", to.path);
+		return await navigateTo("/login" + (query ?? ""));
 	}
 })
-- 
2.47.2


From 7ad2b6f299da2536720dbaccf926bcd18973dca0 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 22:38:54 +0200
Subject: [PATCH 15/35] style: fix indentation

---
 pages/register.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/register.vue b/pages/register.vue
index 18276ee..73d0920 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -123,10 +123,10 @@ async function register(e: Event) {
   e.preventDefault();
   console.log("Sending registration data");
   try {
-	await auth.register(form.username, form.email, form.password);
-	return await navigateTo(query.redirect_to);
+    await auth.register(form.username, form.email, form.password);
+    return await navigateTo(query.redirect_to);
   } catch (error) {
-	console.error("Error registering:", error);
+    console.error("Error registering:", error);
   }
   //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
 }
-- 
2.47.2


From a5f0e1971695597575c271bf7d9be30c1dc0e35a Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 22:40:26 +0200
Subject: [PATCH 16/35] feat: added check for if refresh returned access token

---
 composables/auth.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/composables/auth.ts b/composables/auth.ts
index 7ce077c..5c42d73 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -60,17 +60,21 @@ export const useAuth = () => {
 
   async function refresh() {
     console.log("refreshing");
-	const res = await fetchWithApi("/auth/refresh", {
-	method: "POST"
-	}) as any;
-	console.log("finished refreshing:", res);
-	accessToken.value = res?.access_token;
-	console.log("set new access token");
+    const res = await fetchWithApi("/auth/refresh", {
+      method: "POST"
+    }) as any;
+    console.log("finished refreshing:", res);
+    if (res.access_token) {
+      accessToken.value = res.access_token;
+      console.log("set new access token");
+    } else {
+      console.log("refresh didn't return access token");
+    }
   }
 
   async function fetchUser() {
     if (!accessToken.value) return;
-	console.log("fetchuser access token:", accessToken.value);
+    console.log("fetchuser access token:", accessToken.value);
     const res = await fetchWithApi("/users/me") as UserResponse;
     user.value = res;
     return user.value;
-- 
2.47.2


From 379b85db4e80633fd2b227c4df77f5776b13630a Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 23:38:04 +0200
Subject: [PATCH 17/35] feat: remove Loading component from app.vue

---
 app.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app.vue b/app.vue
index 5d47bb7..b20c5ab 100644
--- a/app.vue
+++ b/app.vue
@@ -1,14 +1,11 @@
 <template>
   <div>
-	<Loading v-if="loading" />
     <NuxtPage />
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const loading = useState("loading");
-
 </script>
 
 <style>
-- 
2.47.2


From a439f9481a8d7a11e6591fb87a6a505445ac26f2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 23:38:52 +0200
Subject: [PATCH 18/35] feat: manage loading state in auth middleware

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

diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index 75fc12e..0fc6765 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -1,5 +1,6 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
 	console.log("to.path:", to.path);
+	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
 	if (["/login", "/register"].includes(to.path)) {
 		if (accessToken) {
@@ -9,11 +10,15 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	};
 
 	if (!accessToken) {
+		loading.value = true;
+		console.log("set loading to true");
 		const { refresh } = useAuth();
 		console.log("hi");
 		await refresh();
 		const query = new URLSearchParams();
 		query.set("redirect_to", to.path);
+		loading.value = false;
+		console.log("set loading to false");
 		return await navigateTo("/login" + (query ?? ""));
 	}
 })
-- 
2.47.2


From a324cc9300153f421998a688315eed8a6e310a46 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 02:33:48 +0200
Subject: [PATCH 19/35] style: fix indentation

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

diff --git a/utils/fetchWithApi.ts b/utils/fetchWithApi.ts
index 11856fb..79fdae8 100644
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@@ -9,74 +9,74 @@ 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")
-	console.log("apiBase:", apiBase);
-	if (!apiBase) {
-		console.log("no api base");
-		return;
-	}
-	console.log("path:", path)
-	const { revoke, refresh } = useAuth();
-	console.log("access token 2:", accessToken.value);
+  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")
+  console.log("apiBase:", apiBase);
+  if (!apiBase) {
+    console.log("no api base");
+    return;
+  }
+  console.log("path:", path)
+  const { revoke, refresh } = useAuth();
+  console.log("access token 2:", accessToken.value);
 
-	let headers: HeadersInit = {};
+  let headers: HeadersInit = {};
 
-	if (accessToken.value) {
-		headers = {
-		...options.headers,
-		"Authorization": `Bearer ${accessToken.value}`
-		};
-	} else {
-		headers = {
-		...options.headers
-		};
-	}
+  if (accessToken.value) {
+    headers = {
+      ...options.headers,
+      "Authorization": `Bearer ${accessToken.value}`
+    };
+  } else {
+    headers = {
+      ...options.headers
+    };
+  }
 
-	let reauthFailed = false;
-	while (!reauthFailed) {
-		try {
-		console.log("fetching:", URL.parse(apiBase + path));
-		const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
-			...options,
-			headers,
-			credentials: "include"
-		});
+  let reauthFailed = false;
+  while (!reauthFailed) {
+    try {
+      console.log("fetching:", URL.parse(apiBase + path));
+      const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
+        ...options,
+        headers,
+        credentials: "include"
+      });
 
-		return res;
-		} catch (error: any) {
-		console.error("Error fetching resource");
-		if (error?.response?.status === 401) {
-			console.log("Error status is 401");
-			if (!path.startsWith("/auth/refresh")) {
-			console.log("Path is not refresh endpoint");
-			try {
-				console.log("Trying to refresh");
-				await refresh();
-				console.log("Successfully refreshed token");
-			} catch (error: any) {
-				console.log("Failed to refresh token");
-				if (error?.response?.status === 401) {
-				console.log("Refresh returned 401");
-				reauthFailed = true;
-				console.log("Revoking");
-				await revoke();
-				console.log("Redirecting to login");
-				await navigateTo("/login");
-				console.log("redirected");
-				return;
-				}
-			}
-			} else {
-			console.log("Path is refresh endpoint, throwing error");
-			throw error;
-			}
-		}
-		console.log("throwing error");
-		throw error;
-		}
-	}
+      return res;
+    } catch (error: any) {
+      console.error("Error fetching resource");
+      if (error?.response?.status === 401) {
+        console.log("Error status is 401");
+        if (!path.startsWith("/auth/refresh")) {
+          console.log("Path is not refresh endpoint");
+          try {
+            console.log("Trying to refresh");
+            await refresh();
+            console.log("Successfully refreshed token");
+          } catch (error: any) {
+            console.log("Failed to refresh token");
+            if (error?.response?.status === 401) {
+              console.log("Refresh returned 401");
+              reauthFailed = true;
+              console.log("Revoking");
+              await revoke();
+              console.log("Redirecting to login");
+              await navigateTo("/login");
+              console.log("redirected");
+              return;
+            }
+          }
+        } else {
+          console.log("Path is refresh endpoint, throwing error");
+          throw error;
+        }
+      }
+      console.log("throwing error");
+      throw error;
+    }
+  }
 }
-- 
2.47.2


From 3b1581d95084b84536dd0dd748f031ac8be1440a Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 02:36:10 +0200
Subject: [PATCH 20/35] feat: add loading on client layout

---
 layouts/client.vue                            | 15 ++++++++-
 .../[serverId]/channels/[channelId].vue       | 33 +++++++++++++------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index b0fbf02..ae749e3 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,5 +1,6 @@
 <template>
-	<div id="client-root">
+	<Loading v-show="loading" />
+	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
 				main bar
@@ -21,6 +22,8 @@
 
 <script lang="ts" setup>
 
+const loading = useState("loading", () => false);
+
 const servers = [
 	{
 		name: "Test",
@@ -95,6 +98,16 @@ function sendMessage(e: Event) {
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
 	text-align: center;
+	
+}
+
+.hidden {
+	opacity: 0%;
+}
+
+.visible {
+	opacity: 100%;
+	transition-duration: 500ms;
 }
 
 #homebar {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index efa2858..c122043 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -39,25 +39,20 @@
 
 const route = useRoute();
 
-const server: GuildResponse | undefined = await fetchWithApi(`servers/${route.params.serverId}`);
-
-const channels: ChannelResponse[] | undefined = await fetchWithApi(
-	`servers/${route.params.serverId}/channels`
-);
-const channel: ChannelResponse | undefined = await fetchWithApi(
-	route.path
-);
+const loading = useState("loading");
 
 const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`;
 
-console.log("channel:", channel);
+const server = ref<GuildResponse | undefined>();
+const channels = ref<ChannelResponse[] | undefined>();
+const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
 import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("servers:", servers);
+//console.log("channelid: servers:", servers);
 const members = [
 	{
 		id: "3287484395",
@@ -106,6 +101,24 @@ const members = [
 	}
 ];
 
+onMounted(async () => {
+	loading.value = true;
+	console.log("channelid: set loading to true");
+	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
+
+	channels.value = await fetchWithApi(
+		`servers/${route.params.serverId}/channels`
+	);
+	channel.value = await fetchWithApi(
+		route.path
+	);
+
+	console.log("channelid: channel:", channel);
+	await sleep(3000);
+	loading.value = false;
+	console.log("channelid: set loading to false");
+});
+
 function showServerSettings() { }
 
 function toggleInvitePopup(e: Event) {
-- 
2.47.2


From 59c9acdc9e8d14d10d27cba35f6aef2a515e6db0 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 02:36:44 +0200
Subject: [PATCH 21/35] feat: remove loading on this page in favor of
 layout-wide loading

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

diff --git a/layouts/auth.vue b/layouts/auth.vue
index f9d5bff..a395a7c 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -1,55 +1,55 @@
 <template>
-  <Loading v-if="!mounted" />
-  <div v-else id="root-container" style="margin-top: 5dvh;">
-    <div id="main-container">
-      <div v-if="!instanceUrl">
-        <div v-if="instanceError" style="color: red;">
-          {{ instanceError }}
+  <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>
-        <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 v-else id="auth-form-container">
+          <slot />
         </div>
-        <div>
-          <button @click="showUser">Show user</button>
-        </div>
-        <div>
-          <button @click="getUser">Get me</button>
+        <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>
       </div>
     </div>
-  </div>
+  </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
 
-const mounted = ref(false);
 const redirectTo = useRoute().query.redirect_to;
 
 const apiVersion = useRuntimeConfig().public.apiVersion;
@@ -64,7 +64,6 @@ if (auth.accessToken.value) {
 }
 
 onMounted(() => {
-  mounted.value = true;
   const cookie = useCookie("instance_url").value;
   instanceUrl.value = cookie;
   console.log(cookie);
-- 
2.47.2


From f44d67212ba3bb970e0fc9eeea52388c17fa7668 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 02:38:18 +0200
Subject: [PATCH 22/35] feat: remove sleep I forgot to remove

---
 pages/servers/[serverId]/channels/[channelId].vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index c122043..eb6ba46 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -114,7 +114,6 @@ onMounted(async () => {
 	);
 
 	console.log("channelid: channel:", channel);
-	await sleep(3000);
 	loading.value = false;
 	console.log("channelid: set loading to false");
 });
-- 
2.47.2


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 23/35] 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;
+  }
+}
-- 
2.47.2


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 24/35] 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 ?? ""));
 	}
 })
-- 
2.47.2


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 25/35] 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>
-- 
2.47.2


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 26/35] 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 {
-- 
2.47.2


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 27/35] 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>
-- 
2.47.2


From 46483c336a90910a833c71717a0344bce4b0e783 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:26:34 +0200
Subject: [PATCH 28/35] feat: add user property to MessageResponse interface

---
 types/interfaces.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/types/interfaces.ts b/types/interfaces.ts
index 05830d2..c0c87a9 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -32,10 +32,11 @@ export interface ChannelResponse {
 }
 
 export interface MessageResponse {
-	uuid: string
-	channel_uuid: string
-	user_uuid: string
-	message: string
+	uuid: string,
+	channel_uuid: string,
+	user_uuid: string,
+	message: string,
+	user: UserResponse
 }
 
 export interface InviteResponse {
@@ -49,6 +50,6 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
-	email: string,
-	email_verified: boolean
+	email?: string,
+	email_verified?: boolean
   }
-- 
2.47.2


From bc94d22ef0f665c689393e61369eb8602b916798 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:27:19 +0200
Subject: [PATCH 29/35] feat: switch to using user property of message object

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

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 7d20ff0..d58b037 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="message-area">
 	<div id="messages" ref="messagesElement">
-		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
-			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
+		<Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message"
+			:timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" />
 	</div>
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
@@ -17,7 +17,6 @@
 
 <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 }>();
@@ -32,8 +31,6 @@ if (messagesRes && props.reverse) {
 
 const messages = ref<MessageResponse[]>([]);
 
-const displayNames = ref<Record<string, string>>({});
-
 const route = useRoute();
 
 const messageInput = ref<string>();
@@ -41,14 +38,6 @@ const messageInput = ref<string>();
 const messagesElement = ref<HTMLDivElement>();
 
 if (messagesRes) messages.value = messagesRes;
-	const displayNamesArr: Record<string, string> = {};
-	for (const message of messages.value) {
-		if (!displayNamesArr[message.user_uuid]) {
-			const displayName = await getDisplayName(message.user_uuid);
-			displayNamesArr[message.user_uuid] = displayName;
-		}
-	}
-	displayNames.value = displayNamesArr;
 
 const accessToken = useCookie("access_token").value;
 const apiBase = useCookie("api_base").value;
@@ -87,13 +76,6 @@ ws.addEventListener("message", async (event) => {
 	await refresh();
 }
 
-async function getDisplayName(memberId: string): Promise<string> {
-	//const user = await fetchMember((route.params.serverId as string), memberId);
-	const user = await fetchUser((route.params.serverId as string), memberId);
-	return user!.display_name ?? user!.username;
-
-}
-
 function sendMessage(e: Event) {
 	e.preventDefault();
 	const text = messageInput.value;
-- 
2.47.2


From d80731a1c0bf924275fa5909540ac0318f0d9447 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:28:58 +0200
Subject: [PATCH 30/35] fix: props definition not allowing for null value on
 img

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

diff --git a/components/Message.vue b/components/Message.vue
index 78f2889..70115c5 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="message">
 		<div>
-			<img v-if="props.img" class="message-author-avatar" :src="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">
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{ class?: string, img?: string, username: string, text: string, timestamp: number, format: "12" | "24" }>();
+const props = defineProps<{ class?: string, img?: string | null, username: string, text: string, timestamp: number, format: "12" | "24" }>();
 
 const messageDate = ref<string>();
 const showHover = ref(false);
@@ -74,6 +74,7 @@ if (now.getUTCHours() >= 0) {
 	display: flex;
 	flex-direction: column;
 	gap: 1dvh;
+	height: 100%;
 }
 
 .message-author {
@@ -84,6 +85,7 @@ if (now.getUTCHours() >= 0) {
 .message-author-avatar {
 	margin-right: 1dvw;
 	width: 3em;
+	border-radius: 50%;
 }
 
 .author-username {
-- 
2.47.2


From 94fa7dc1c0c3df4cc82e6577680737e4cdb9dabb Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:30:24 +0200
Subject: [PATCH 31/35] feat: add top margin for message box

---
 components/MessageArea.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index d58b037..f5a7081 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -115,6 +115,7 @@ onMounted(async () => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
+	margin-top: 1dvh;
 }
 
 #message-input {
-- 
2.47.2


From fb85a2a33fdd17868e859b525587e26fd8b78a1b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:52:02 +0200
Subject: [PATCH 32/35] feat: improve styling of message box area

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

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index f5a7081..3d4c231 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -98,19 +98,21 @@ onMounted(async () => {
 <style scoped>
 
 #message-area {
-	padding-top: 3dvh;
-}
-
-#message-area {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 8fr 1fr;
 	justify-content: space-between;
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
 }
 
 #message-box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-content: center;
 	border: 1px solid rgb(70, 70, 70);
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
@@ -118,8 +120,16 @@ onMounted(async () => {
 	margin-top: 1dvh;
 }
 
-#message-input {
-	width: 100%;
+#message-form {
+	display: flex;
+	justify-content: center;
+	height: 60%;
+}
+
+#message-box-input {
+	width: 80%;
+	background-color: rgb(50, 50, 50);
+	border: none;
 }
 
 #messages {
-- 
2.47.2


From cedf3c201fbf51c05e115cb6d0e73eb5031be23b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:52:53 +0200
Subject: [PATCH 33/35] feat: set focus outline of all items to light gray

---
 app.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app.vue b/app.vue
index b20c5ab..47873f0 100644
--- a/app.vue
+++ b/app.vue
@@ -18,6 +18,10 @@ body {
   margin: 0;
 }
 
+*:focus-visible {
+	outline: 1px solid rgb(150, 150, 150);
+}
+
 a {
   color: aquamarine;
 }
-- 
2.47.2


From e1578a1302d43477a20eecf20084fd68afd2afe0 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:58:28 +0200
Subject: [PATCH 34/35] feat: disable input history in message text box

---
 components/MessageArea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 3d4c231..72e38d9 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -6,7 +6,7 @@
 	</div>
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
-			<input v-model="messageInput" type="text" name="message-input" id="message-box-input">
+			<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off">
 			<button type="submit">
 				<Icon name="lucide:send" />
 			</button>
-- 
2.47.2


From 454633720b01f392ca2710771e3ed3f506dc29c8 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 04:58:43 +0200
Subject: [PATCH 35/35] feat: styled button a bit

---
 components/MessageArea.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 72e38d9..3389475 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -7,7 +7,7 @@
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
 			<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off">
-			<button type="submit">
+			<button id="submit-button" type="submit">
 				<Icon name="lucide:send" />
 			</button>
 		</form>
@@ -139,4 +139,14 @@ onMounted(async () => {
 	gap: 1dvh;
 }
 
+#submit-button {
+	background-color: inherit;
+	border: none;
+	color: white;
+}
+
+#submit-button:hover {
+	background-color: rgb(40, 40, 40);
+}
+
 </style>
\ No newline at end of file
-- 
2.47.2