From 8102412ef2990941269c07d94ddde16295753cb7 Mon Sep 17 00:00:00 2001
From: Radiicall <radical@radical.fun>
Date: Mon, 23 Jun 2025 21:46:55 +0200
Subject: [PATCH 01/40] chore: commit to make the CI work

the CI server was down during the last commit
---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index b86a3a8..98ab3a8 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
 
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
+
 ## Setup
 
 Make sure to install dependencies:

From cca2c5ffd91674afe2f3bc85066f50b0d2e15501 Mon Sep 17 00:00:00 2001
From: Radiicall <radical@radical.fun>
Date: Mon, 23 Jun 2025 21:50:40 +0200
Subject: [PATCH 02/40] chore: CI thingy

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 98ab3a8..ecdb2d5 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,9 @@
 # Nuxt Minimal Starter
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
 
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
 ## Setup
 
 Make sure to install dependencies:

From 8c92a7ad0cba673cb2758f01b5aa6805c004108d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 2 Jul 2025 20:17:30 +0200
Subject: [PATCH 03/40] feat: Use actual server icons instead of placeholder

---
 layouts/client.vue | 50 +++++++---------------------------------------
 1 file changed, 7 insertions(+), 43 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 73a40d6..0f79cbf 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -12,7 +12,8 @@
 			</NuxtLink>
 			<div id="servers-list">
 				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<Icon name="lucide:server" class="white" size="2rem" />
+					<img v-if="guild.icon" class="server-icon" :src="guild.icon" :alt="guild.name"/>
+					<Icon v-else name="lucide:server" class="server-icon white" :alt="guild.name" />
 				</NuxtLink>
 			</div>
 		</div>
@@ -26,48 +27,6 @@ import type { GuildResponse } from '~/types/interfaces';
 const loading = useState("loading", () => false);
 
 const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
-
-//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("servers:", servers);
-const members = [
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	}
-];
-
 </script>
 
 <style>
@@ -118,6 +77,11 @@ const members = [
 	padding-right: .5dvw;
 }
 
+.server-icon {
+	width: 3rem;
+	height: 3rem;
+}
+
 #current-info {
 	grid-column: 2;
 	grid-row: 1;

From 692dd6d1c7782392e48c1dcddd3dc58dbeb7680b Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 2 Jul 2025 21:42:24 +0200
Subject: [PATCH 04/40] feat: icons, user popus, and polish

user popus are WEIRD, and i need help with layering
---
 components/MemberEntry.vue                    |  39 ++++++
 components/Message.vue                        |   5 +-
 components/UserArea.vue                       |  20 +++
 components/UserPopup.vue                      |   2 +
 layouts/client.vue                            |   8 +-
 .../[serverId]/channels/[channelId].vue       |  14 +-
 public/icon.svg                               | 121 ++++++++++++++++++
 7 files changed, 196 insertions(+), 13 deletions(-)
 create mode 100644 components/MemberEntry.vue
 create mode 100644 components/UserArea.vue
 create mode 100644 public/icon.svg

diff --git a/components/MemberEntry.vue b/components/MemberEntry.vue
new file mode 100644
index 0000000..48c9242
--- /dev/null
+++ b/components/MemberEntry.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
+        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
+        <Icon v-else class="member-avatar" name="lucide:user" />
+        <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { GuildMemberResponse } from '~/types/interfaces';
+import UserPopup from './UserPopup.vue';
+
+const props = defineProps<{
+    member: GuildMemberResponse
+}>();
+
+const isPopupVisible = ref(false);
+
+const togglePopup = () => {
+    isPopupVisible.value = !isPopupVisible.value;
+};
+
+const hidePopup = () => {
+    isPopupVisible.value = false;
+};
+</script>
+
+<style>
+.member-item {
+    position: relative; /* Set the position to relative for absolute positioning of the popup */
+}
+
+.profile-popup {
+    position: absolute; /* Use absolute positioning */
+    left: -100px; /* Adjust this value to position the popup to the left */
+}
+</style>
diff --git a/components/Message.vue b/components/Message.vue
index 5cd7773..05392a0 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 2rem 1fr;
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
@@ -129,10 +129,11 @@ onMounted(async () => {
 }
 
 .left-column {
+	min-width: 2rem;
 	display: flex;
+	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
-	
 }
 
 .author-username {
diff --git a/components/UserArea.vue b/components/UserArea.vue
new file mode 100644
index 0000000..d922c3f
--- /dev/null
+++ b/components/UserArea.vue
@@ -0,0 +1,20 @@
+<template>
+	<div id="user-panel">
+		HELLO!!
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+	user: UserResponse,
+}>();
+
+</script>
+
+<style scoped>
+#user-panel {
+	width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 092e7d5..befe4f5 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="profile-popup">
     <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <Icon v-else id="avatar" name="lucide:user" />
+
     <div id="cover-colour"></div>
     <div id="main-body">
       <p id="display-name">
diff --git a/layouts/client.vue b/layouts/client.vue
index 0f79cbf..93217f5 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -8,12 +8,12 @@
 			</div>
 				<div id="left-column">
 			<NuxtLink id="home-button" href="/">
-				<Icon name="lucide:house" class="white" size="2rem" />
+				<img class="sidebar-icon" src="/public/icon.svg"/>
 			</NuxtLink>
 			<div id="servers-list">
 				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<img v-if="guild.icon" class="server-icon" :src="guild.icon" :alt="guild.name"/>
-					<Icon v-else name="lucide:server" class="server-icon white" :alt="guild.name" />
+					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 				</NuxtLink>
 			</div>
 		</div>
@@ -77,7 +77,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-right: .5dvw;
 }
 
-.server-icon {
+.sidebar-icon {
 	width: 3rem;
 	height: 3rem;
 }
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index c9aa8d2..212d77a 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -26,11 +26,7 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<div id="members-container">
 			<div id="members-list">
-				<div class="member-item" v-for="member of members" tabindex="0">
-					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
-					<Icon v-else class="member-avatar" name="lucide:user" />
-					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
-				</div>
+				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -50,7 +46,8 @@ const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
-import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+import UserPopup from "~/components/UserPopup.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
@@ -78,6 +75,9 @@ function toggleInvitePopup(e: Event) {
 	e.preventDefault();
 	showInvitePopup.value = !showInvitePopup.value;
 }
+
+function handleMemberClick(member: GuildMemberResponse) {
+}
 </script>
 
 <style>
@@ -112,7 +112,7 @@ function toggleInvitePopup(e: Event) {
 	gap: 1em;
 	align-items: center;
 	text-align: left;
-	
+	cursor: pointer;
 }
 
 #channels-list {
diff --git a/public/icon.svg b/public/icon.svg
new file mode 100644
index 0000000..2b2d33f
--- /dev/null
+++ b/public/icon.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="drawing.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.35399828"
+     inkscape:cx="2.8248725"
+     inkscape:cy="731.64198"
+     inkscape:window-width="1440"
+     inkscape:window-height="863"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="matrix(0.93746412,0,0,0.93746412,18.749279,18.749282)">
+    <g
+       id="g1543"
+       style="display:inline"
+       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-298.33565)">
+      <circle
+         style="fill:#000000;stroke-width:0.264583"
+         id="path60"
+         cx="106.78797"
+         cy="145.89536"
+         r="72.25267" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.257596"
+         id="path899"
+         cx="106.78797"
+         cy="145.89536"
+         r="65.485863" />
+    </g>
+    <g
+       id="g1460-1"
+       transform="matrix(4.1481001,0,0,4.1481002,45.149918,-354.52402)"
+       style="display:inline">
+      <circle
+         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
+         id="path1129-3"
+         cx="78.140816"
+         cy="136.65092"
+         r="17.372646" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
+         id="path1354-0"
+         cx="86.078323"
+         cy="136.65092"
+         r="11.576728" />
+    </g>
+    <g
+       id="g1460-1-3"
+       transform="matrix(4.1481001,0,0,4.1481002,-187.26754,-354.52402)"
+       style="display:inline">
+      <circle
+         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
+         id="path1129-3-4"
+         cx="78.140816"
+         cy="136.65092"
+         r="17.372646" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
+         id="path1354-0-6"
+         cx="86.078323"
+         cy="136.65092"
+         r="11.576728" />
+    </g>
+    <g
+       id="g3530"
+       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-294.3357)">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 c 0,0 -17.461156,15.02392 -28.153795,0.49121"
+         id="path1817" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 c 0,0 17.46116,15.02392 28.15379,0.49121"
+         id="path1817-6" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 -5.74494,-9.7603"
+         id="path2191"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 5.74494,-9.7603"
+         id="path2191-6"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 101.04303,158.3602 h 11.48988"
+         id="path2675"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>

From 8033fd27e1523e7383a428ac7afeddbe9dfcadf5 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 2 Jul 2025 23:50:09 +0200
Subject: [PATCH 05/40] feat: Add theming, no settings menu yet

---
 app.vue                                       | 22 +++++++++----------
 components/Button.vue                         | 19 +++++++++++-----
 components/Channel.vue                        |  2 +-
 components/Message.vue                        |  4 ++--
 components/MessageArea.vue                    | 10 +++++----
 components/Settings/UserSettings/Account.vue  |  4 ++--
 components/UserPopup.vue                      | 10 ++++-----
 layouts/client.vue                            | 10 +++++----
 .../[serverId]/channels/[channelId].vue       |  5 +++--
 pages/settings.vue                            | 10 ++++-----
 public/themes/dark.css                        | 19 ++++++++++++++++
 public/themes/default-themes.json             |  4 ++++
 public/themes/light.css                       | 19 ++++++++++++++++
 13 files changed, 96 insertions(+), 42 deletions(-)
 create mode 100644 public/themes/dark.css
 create mode 100644 public/themes/default-themes.json
 create mode 100644 public/themes/light.css

diff --git a/app.vue b/app.vue
index fbc6572..c0c5700 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <link :href="'/themes/' + current_theme + '.css'" rel="stylesheet" type="text/css"></link>
     <Banner v-if="banner" />
     <NuxtPage :keepalive="true" />
   </div>
@@ -9,21 +10,20 @@
 
 const banner = useState("banner", () => false);
 
+let current_theme = "dark" // default theme
+const saved_theme = localStorage.getItem("selectedTheme");
+if (saved_theme) {
+	current_theme = saved_theme;
+}
 </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;
   box-sizing: border-box;
-  color: rgb(190, 190, 190);
-  background-color: rgb(30, 30, 30);
+  color: var(--text-color);
+  background-color: var(--chat-background-color);
   margin: 0;
 }
 
@@ -40,15 +40,15 @@ a {
 }
 
 .bottom-border {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 }
 
 .left-border {
-	border-left: 1px solid rgb(70, 70, 70);
+	border-left: 1px solid var(--padding-color);
 }
 
 .right-border {
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
 }
 
 .rounded-corners {
diff --git a/components/Button.vue b/components/Button.vue
index db8bb8e..fb44cf2 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -18,8 +18,8 @@ const props = defineProps<{
 .button {
 	cursor: pointer;
 
-	background-color: #b35719;
-	color: #ffffff;
+	background-color: var(--primary-color);
+	color: var(--text-color);
 
 	padding: 0.7dvh 1.2dvw;
 	font-size: 1.1em;
@@ -30,15 +30,22 @@ const props = defineProps<{
 	display: inline-block;
 }
 
+.button:hover {
+	background-color: var(--primary-highlighted-color);
+}
+
 .scary-button {
 	background-color: red;
 }
+.scary-button:hover {
+	background-color: red;
+}
 
 .neutral-button {
-	background-color: grey;
+	background-color: var(--accent-color);
+}
+.neutral-button:hover {
+	background-color: var(--accent-highlighted-color);
 }
 
-.button:hover {
-	background-color: #934410;
-}
 </style>
\ No newline at end of file
diff --git a/components/Channel.vue b/components/Channel.vue
index 1828641..0f48323 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -36,6 +36,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 }
 
 .current-channel {
-	background-color: rgb(70, 70, 70);
+	background-color: var(--sidebar-highlighted-background-color);
 }
 </style>
\ No newline at end of file
diff --git a/components/Message.vue b/components/Message.vue
index 5cd7773..e8bb600 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -88,7 +88,7 @@ onMounted(async () => {
 }
 
 .message:hover {
-	background-color: rgb(20, 20, 20);
+	background-color: var(--chat-highlighted-background-color);
 }
 
 .normal-message {
@@ -142,7 +142,7 @@ onMounted(async () => {
 
 .message-date {
 	font-size: .7em;
-	color: rgb(150, 150, 150);
+	color: var(--secondary-text-color);
 	cursor: default;
 }
 
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 49577f9..7612243 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -251,7 +251,7 @@ router.beforeEach((to, from, next) => {
 	flex-direction: column;
 	justify-content: center;
 	align-content: center;
-	border: 1px solid rgb(70, 70, 70);
+	border: 1px solid var(--padding-color);
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
@@ -266,7 +266,7 @@ router.beforeEach((to, from, next) => {
 
 #message-box-input {
 	width: 80%;
-	background-color: rgb(50, 50, 50);
+	background-color: var(--sidebar-background-color);
 	border: none;
 	color: inherit;
 	padding-left: 1dvw;
@@ -284,11 +284,13 @@ router.beforeEach((to, from, next) => {
 #submit-button {
 	background-color: inherit;
 	border: none;
-	color: rgb(200, 200, 200);
+	color: var(--primary-color);
+	transition: color 100ms;
 	font-size: 1.5em;
 }
 
 #submit-button:hover {
-	color: rgb(255, 255, 255);
+	color: var(--primary-highlighted-color);
+	cursor: pointer;
 }
 </style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 0fe5013..4247c60 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -145,8 +145,8 @@ const deleteAccount = async () => {
   font-size: 1em;
   border-radius: 8px;
   border: none;
-  color: white;
-  background-color: #54361b;
+  color: var(--text-color);
+  background-color: var(--accent-color);
 }
 
 .profile-popup {
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 092e7d5..b27ecea 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="profile-popup">
     <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
-    <div id="cover-colour"></div>
+    <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
         <strong>{{ props.user.display_name }}</strong>
@@ -38,17 +38,17 @@ const props = defineProps<{
   flex-direction: column;
 }
 
-#cover-colour {
+#cover-color {
   border-radius: 12px 12px 0 0;
   min-height: 60px;
-  background-color: #442505;
+  background-color: var(--primary-color);
 }
 
 #main-body {
   border-radius: 0 0 12px 12px;
   padding: 12px;
   min-height: 280px;
-  background-color: #4b3018;
+  background-color: var(--accent-color);
   overflow-wrap: break-word;
   hyphens: manual;
 }
@@ -75,7 +75,7 @@ const props = defineProps<{
 }
 
 #about-me {
-  background-color: #34200f;
+  background-color: var(--secondary-color);
   border-radius: 12px;
 
   margin-top: 32px;
diff --git a/layouts/client.vue b/layouts/client.vue
index 73a40d6..a1c1c24 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -96,12 +96,13 @@ const members = [
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	background-color: var(--topbar-background-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 }
 
 #client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 }
 
 #__nuxt {
@@ -129,18 +130,19 @@ const members = [
 	gap: 2dvh;
 	padding-left: .5dvw;
 	padding-right: .5dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
+	background-color: var(--sidebar-background-color);
 	padding-top: 1.5dvh;
 }
 
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
 }
 
 #home-button {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 	padding-bottom: 1dvh;
 }
 
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index c9aa8d2..f0e3e08 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -85,14 +85,15 @@ function toggleInvitePopup(e: Event) {
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
+	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
 	padding-top: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-left: 1px solid rgb(70, 70, 70);
+	border-left: 1px solid var(--padding-color);
 }
 
 #members-list {
diff --git a/pages/settings.vue b/pages/settings.vue
index 5db18fe..96944ba 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -98,8 +98,8 @@ function selectCategory(page: Page) {
 #sidebar {
   min-width: 25dvw;
   max-width: 25dvw;
-  background-color: #2f3136;
-  color: white;
+  background-color: var(--sidebar-background-color);
+  color: var(--text-color);
   padding: 1dvh 1dvw;
   margin-left: auto;
 
@@ -127,11 +127,11 @@ function selectCategory(page: Page) {
 }
 
 .sidebar-focus {
-  background-color: #383B41;
+  background-color: var(--sidebar-highlighted-background-color);
 }
 
 #sidebar li:hover {
-  background-color: #40444b;
+  background-color: var(--sidebar-highlighted-background-color);
 }
 
 #sub-page {
@@ -149,7 +149,7 @@ function selectCategory(page: Page) {
   height: 0.2dvh;
   display: block;
   margin: 0.8dvh 1dvw;
-  background-color: #2c2e32;
+  background-color: var(--spacing-color);
 }
 
 /* applies to child pages too */
diff --git a/public/themes/dark.css b/public/themes/dark.css
new file mode 100644
index 0000000..8245724
--- /dev/null
+++ b/public/themes/dark.css
@@ -0,0 +1,19 @@
+:root {
+	--text-color: #f7eee8;
+	--secondary-text-color: #f0e8e4;
+
+	--chat-background-color: #1f1e1d;
+    --chat-highlighted-background-color: #2f2b28;
+	--sidebar-background-color: #2e2a27;
+	--sidebar-highlighted-background-color: #36322b;
+	--topbar-background-color: #2a2723;
+
+    --padding-color: #484848;
+    
+	--primary-color: #f4741f;
+	--primary-highlighted-color: #f68a3f;
+	--secondary-color: #7c4018;
+	--secondary-highlighted-color: #8f5b2c;
+	--accent-color: #b35719;
+	--accent-highlighted-color: #c76a2e;
+}
\ No newline at end of file
diff --git a/public/themes/default-themes.json b/public/themes/default-themes.json
new file mode 100644
index 0000000..fb9478d
--- /dev/null
+++ b/public/themes/default-themes.json
@@ -0,0 +1,4 @@
+[
+	"dark.css",
+	"light.css"
+]
\ No newline at end of file
diff --git a/public/themes/light.css b/public/themes/light.css
new file mode 100644
index 0000000..cb51d8c
--- /dev/null
+++ b/public/themes/light.css
@@ -0,0 +1,19 @@
+:root {
+	--text-color: #170f08;
+	--secondary-text-color: #2f2b28;
+
+    --chat-background-color: #f0ebe8;
+    --chat-highlighted-background-color: #e8e4e0;
+	--sidebar-background-color: #dbd8d4;
+	--sidebar-highlighted-background-color: #d4d0ca;
+	--topbar-background-color: #dfdbd6;
+
+    --padding-color: #484848;
+    
+    --primary-color: #df5f0b;
+    --primary-highlighted-color: #ef6812;
+    --secondary-color: #e8ac84;
+    --secondary-highlighted-color: #f8b68a;
+    --accent-color: #e68b4e;
+    --accent-highlighted-color: #f69254;
+}
\ No newline at end of file

From 5a09b39fcf10984dee8cec3840f6a61014c36c96 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:09:25 +0200
Subject: [PATCH 06/40] feat: Add date to messages if they weren't sent today

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

diff --git a/components/Message.vue b/components/Message.vue
index c699109..b6b38cc 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -10,6 +10,8 @@
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
+					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
+					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
@@ -49,6 +51,7 @@ const messageElement = ref<HTMLDivElement>();
 const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
+const currentDate: Date = new Date()
 
 console.log("message:", props.text);
 console.log("author:", props.username);
@@ -74,6 +77,20 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
+function getDayDifference(date_1: Date, date_2: Date) {
+// Normalize both dates to midnight
+    const midnight1 = new Date(date_1.getFullYear(), date_1.getMonth(), date_1.getDate());
+    const midnight2 = new Date(date_2.getFullYear(), date_2.getMonth(), date_2.getDate());
+
+    // Calculate the difference in time
+    const timeDifference = midnight2.getTime() - midnight1.getTime();
+
+    // Convert time difference from milliseconds to days
+    const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
+
+    return Math.round(dayDifference); // Round to the nearest whole number
+}
+
 </script>
 
 <style scoped>

From a9ad6ba5350404a3ca20b950802f461fd324a34a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:09:52 +0200
Subject: [PATCH 07/40] chore: unwanted leading tab

---
 types/interfaces.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/interfaces.ts b/types/interfaces.ts
index e451a4b..610d007 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -62,7 +62,7 @@ export interface UserResponse {
 	about: string | null,
 	email?: string,
 	email_verified?: boolean
-  }
+}
 
 export interface StatsResponse {
 	accounts: number,

From c203d26b265c7940e1b4696832d4ae985da74b7e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:14:32 +0200
Subject: [PATCH 08/40] feat: settings button

for some reason the settings menu is a bit wonky with this, but that's likely an issue with the settings menu itself interacting with nuxt being nuxt
---
 layouts/client.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 57b2ee2..4a6ac73 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -5,8 +5,8 @@
 			<div class="homebar-item">
 				main bar
 			</div>
-			</div>
-				<div id="left-column">
+		</div>
+		<div id="left-column">
 			<NuxtLink id="home-button" href="/">
 				<img class="sidebar-icon" src="/public/icon.svg"/>
 			</NuxtLink>
@@ -16,6 +16,9 @@
 					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 				</NuxtLink>
 			</div>
+			<NuxtLink id="settings-menu" href="/settings">
+				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
+			</NuxtLink>
 		</div>
 		<slot />
 	</div>
@@ -110,6 +113,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-bottom: 1dvh;
 }
 
+#settings-menu {
+	position: absolute;
+	bottom: .25dvh
+}
+
 #servers-list {
 	display: flex;
 	flex-direction: column;

From d90252542df9f7c02a52b3bbd82da1183828a76e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:59:04 +0200
Subject: [PATCH 09/40] feat: split account into two pages, to add email
 updates

---
 components/Settings/UserSettings/Account.vue | 105 ++++----------
 components/Settings/UserSettings/Profile.vue | 138 +++++++++++++++++++
 pages/settings.vue                           |   4 +-
 3 files changed, 166 insertions(+), 81 deletions(-)
 create mode 100644 components/Settings/UserSettings/Profile.vue

diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 4247c60..85589e7 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -1,33 +1,16 @@
 <template>
-  <div>
-    <h1>My Account</h1>
+  <div v-if="user">
+    <h1>Account</h1>
 
-    <div class="profile-container">
-      <div class="user-data-fields" v-if="user">
-        <p class="subtitle">AVATAR</p>
-        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
-        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
-        
-        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
-        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
-        <label for="profile-username-input" class="subtitle">USERNAME</label>
-        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
-        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
-        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
-        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
-
-        <br>
-        <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
-      </div>
-
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
-    </div>
-
-    <h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
-    <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
+    <p class="subtitle">E-MAIL</p>
+    <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
+    <br>
+    <Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
     
-    <h2>Account Deletion</h2>
+    <p class="subtitle">PASSWORD</p>
+    <Button text="Reset Password" :callback=resetPassword></Button>
+    
+    <p class="subtitle">ACCOUNT DELETION</p>
     <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
 
   </div>
@@ -44,22 +27,13 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
-
-const saveChanges = async () => {
+async function changeEmail() {
   if (!user) return;
-  
+
+
   const formData = new FormData()
-  
-  if (newPfpFile) {
-    formData.append("avatar", newPfpFile)
-  }
-  
   const bytes = new TextEncoder().encode(JSON.stringify({
-    display_name: user.display_name,
-    username: user.username,
-    pronouns: user.pronouns,
-    about: user.about,
+    email: user.email,
   }));
   formData.append('json', new Blob([bytes], { type: 'application/json' }));
   
@@ -78,58 +52,29 @@ const saveChanges = async () => {
 };
 
 
-const removeAvatar = async () => {
-  alert("TBD")
-  // await fetchWithApi(`/auth/reset-password`);
-}
-
-const changeAvatar = async () => {
-  if (!user) return;
-
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = 'image/*';
-
-  input.addEventListener("change", (e: Event) => {
-    if (input.files?.length && input.files.length > 0) {
-      const file = input.files[0];
-      if (!file) return;
-
-      newPfpFile = file
-      
-      const reader = new FileReader();
-      reader.addEventListener("onload", () => {
-        if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
-        }
-      });
-      reader.readAsDataURL(file);
+async function resetPassword () {
+  await fetchWithApi("/auth/reset-password", {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    query: {
+      identifier: user?.username
     }
-  })
-
-  input.click()
+  });
 }
 
-const resetPassword = async () => {
-  alert("TBD")
-  // await fetchWithApi(`/auth/reset-password`);
-}
-
-const deleteAccount = async () => {
+async function deleteAccount() {
   alert("TBD")
 }
 </script>
 
 <style scoped>
-.profile-container {
-  display: flex;
-}
-
 .subtitle {
   display: block;
   font-size: 0.8em;
   font-weight: 800;
-  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 
 .user-data-fields {
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
new file mode 100644
index 0000000..ed7da0a
--- /dev/null
+++ b/components/Settings/UserSettings/Profile.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <h1>Profile</h1>
+
+    <div class="profile-container">
+      <div class="user-data-fields" v-if="user">
+        <p class="subtitle">AVATAR</p>
+        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
+        
+        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
+        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
+        <label for="profile-username-input" class="subtitle">USERNAME</label>
+        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
+        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
+        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
+        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
+        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
+
+        <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
+      </div>
+
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchUser } = useAuth();
+
+const user: UserResponse | undefined = await fetchUser()
+if (!user) {
+  alert("could not fetch user info, aborting :(")
+}
+
+let newPfpFile: File;
+
+async function saveChanges() {
+  if (!user) return;
+  
+  const formData = new FormData()
+  
+  if (newPfpFile) {
+    formData.append("avatar", newPfpFile)
+  }
+  
+  const bytes = new TextEncoder().encode(JSON.stringify({
+    display_name: user.display_name,
+    username: user.username,
+    pronouns: user.pronouns,
+    about: user.about,
+  }));
+  formData.append('json', new Blob([bytes], { type: 'application/json' }));
+  
+  try {
+    await fetchWithApi('/me', {
+      method: 'PATCH',
+      body: formData
+    })
+
+    alert('success!!')
+  } catch (error: any) {
+    if (error?.response?.status !== 200) {
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+    }
+  }
+};
+
+
+async function removeAvatar() {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+async function changeAvatar() {
+  if (!user) return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+
+  input.addEventListener("change", (e: Event) => {
+    if (input.files?.length && input.files.length > 0) {
+      const file = input.files[0];
+      if (!file) return;
+
+      newPfpFile = file
+      
+      const reader = new FileReader();
+      reader.addEventListener("onload", () => {
+        if (reader.result && typeof reader.result === 'string') {
+          user.avatar = reader.result;
+        }
+      });
+      reader.readAsDataURL(file);
+    }
+  })
+
+  input.click()
+}
+</script>
+
+<style scoped>
+.profile-container {
+  display: flex;
+}
+
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
+.user-data-fields {
+  min-width: 35dvw;
+  max-width: 35dvw;
+}
+
+.profile-data-input {
+  min-width: 30dvw;
+  margin: 0.07dvh;
+  padding: 0.1dvh 0.7dvw;
+  height: 2.5em;
+  font-size: 1em;
+  border-radius: 8px;
+  border: none;
+  color: var(--text-color);
+  background-color: var(--accent-color);
+}
+
+.profile-popup {
+  margin-left: 2dvw;
+}
+</style>
\ No newline at end of file
diff --git a/pages/settings.vue b/pages/settings.vue
index 96944ba..991d046 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -39,6 +39,7 @@ interface Category {
   pages: Page[];
 }
 
+import Profile from '~/components/Settings/UserSettings/Profile.vue';
 import Account from '~/components/Settings/UserSettings/Account.vue';
 import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
 import Devices from '~/components/Settings/UserSettings/Devices.vue';
@@ -53,7 +54,8 @@ const settingsCategories = {
   userSettings: {
     displayName: "User Settings",
     pages: [
-      { displayName: "My Account", pageData: Account },
+      { displayName: "Profile", pageData: Profile },
+      { displayName: "Account", pageData: Account },
       { displayName: "Privacy", pageData: Privacy },
       { displayName: "Devices", pageData: Devices },
       { displayName: "Connections", pageData: Connections },

From 0befc42ec8cf2d11183725fc2178a8a220c261c4 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:02:44 +0200
Subject: [PATCH 10/40] fix: use pascalCase

---
 app.vue                | 10 +++++-----
 components/Message.vue |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app.vue b/app.vue
index c0c5700..c75c62a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <link :href="'/themes/' + current_theme + '.css'" rel="stylesheet" type="text/css"></link>
+    <link :href="'/themes/' + currentTheme + '.css'" rel="stylesheet" type="text/css"></link>
     <Banner v-if="banner" />
     <NuxtPage :keepalive="true" />
   </div>
@@ -10,10 +10,10 @@
 
 const banner = useState("banner", () => false);
 
-let current_theme = "dark" // default theme
-const saved_theme = localStorage.getItem("selectedTheme");
-if (saved_theme) {
-	current_theme = saved_theme;
+let currentTheme = "dark" // default theme
+const savedTheme = localStorage.getItem("selectedTheme");
+if (savedTheme) {
+	currentTheme = savedTheme;
 }
 </script>
 
diff --git a/components/Message.vue b/components/Message.vue
index b6b38cc..facaf94 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -77,10 +77,10 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
-function getDayDifference(date_1: Date, date_2: Date) {
+function getDayDifference(date1: Date, date2: Date) {
 // Normalize both dates to midnight
-    const midnight1 = new Date(date_1.getFullYear(), date_1.getMonth(), date_1.getDate());
-    const midnight2 = new Date(date_2.getFullYear(), date_2.getMonth(), date_2.getDate());
+    const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+    const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
 
     // Calculate the difference in time
     const timeDifference = midnight2.getTime() - midnight1.getTime();

From 4ebb436fb2772734f03e6a0648d11da1eb3bb702 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:03:05 +0200
Subject: [PATCH 11/40] fix: remove LLM pilled comments

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

diff --git a/components/Message.vue b/components/Message.vue
index facaf94..e8a91b5 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -78,17 +78,14 @@ onMounted(async () => {
 //}
 
 function getDayDifference(date1: Date, date2: Date) {
-// Normalize both dates to midnight
     const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
     const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
 
-    // Calculate the difference in time
     const timeDifference = midnight2.getTime() - midnight1.getTime();
 
-    // Convert time difference from milliseconds to days
     const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
 
-    return Math.round(dayDifference); // Round to the nearest whole number
+    return Math.round(dayDifference);
 }
 
 </script>

From 2d424847f7d968ee68ac75a106cde02f7f4e232a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:04:16 +0200
Subject: [PATCH 12/40] fix: lazely remove profile popups

---
 components/MemberEntry.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/MemberEntry.vue b/components/MemberEntry.vue
index 48c9242..3eed3c5 100644
--- a/components/MemberEntry.vue
+++ b/components/MemberEntry.vue
@@ -19,7 +19,8 @@ const props = defineProps<{
 const isPopupVisible = ref(false);
 
 const togglePopup = () => {
-    isPopupVisible.value = !isPopupVisible.value;
+    isPopupVisible.value = false;
+    // isPopupVisible.value = !isPopupVisible.value;
 };
 
 const hidePopup = () => {

From 126ae5e18de241f12427abe5d86b1ffd7651f3cd Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:13:29 +0200
Subject: [PATCH 13/40] fix: properly insert stylesheet with useHead()

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

diff --git a/app.vue b/app.vue
index c0c5700..f606843 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <link :href="'/themes/' + current_theme + '.css'" rel="stylesheet" type="text/css"></link>
     <Banner v-if="banner" />
     <NuxtPage :keepalive="true" />
   </div>
@@ -15,6 +14,15 @@ const saved_theme = localStorage.getItem("selectedTheme");
 if (saved_theme) {
 	current_theme = saved_theme;
 }
+
+useHead({
+  link: [
+    {
+      rel: "stylesheet",
+      href: `/themes/${current_theme}.css`
+    }
+  ]
+})
 </script>
 
 <style>

From ea44621adc0c7c6928bc11c3d143604858f00d94 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 3 Jul 2025 19:54:10 +0200
Subject: [PATCH 14/40] fix: theme link not taking baseURL into account

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

diff --git a/app.vue b/app.vue
index ffdb884..89dd682 100644
--- a/app.vue
+++ b/app.vue
@@ -15,11 +15,13 @@ if (savedTheme) {
 	currentTheme = savedTheme;
 }
 
+const baseURL = useRuntimeConfig().app.baseURL;
+
 useHead({
   link: [
     {
       rel: "stylesheet",
-      href: `/themes/${currentTheme}.css`
+      href: `${baseURL}/themes/${currentTheme}.css`
     }
   ]
 })

From 0565964b1b0cb38d44dd2787cf49b2599f5718ce Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 3 Jul 2025 20:11:20 +0200
Subject: [PATCH 15/40] fix: baseURL in theme fetching resulting in double
 slash if baseURL is set to /

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

diff --git a/app.vue b/app.vue
index 89dd682..a0a0ed6 100644
--- a/app.vue
+++ b/app.vue
@@ -21,7 +21,7 @@ useHead({
   link: [
     {
       rel: "stylesheet",
-      href: `${baseURL}/themes/${currentTheme}.css`
+      href: `${baseURL}themes/${currentTheme}.css`
     }
   ]
 })

From 1dfc9c266c315d008fa19ee1b2e789d16c5209ab Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:29:15 +0200
Subject: [PATCH 16/40] feat: dynamically load pfp when uploading a new one

---
 components/Settings/UserSettings/Profile.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index ed7da0a..0e648c6 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -31,6 +31,7 @@ import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
 
+
 const user: UserResponse | undefined = await fetchUser()
 if (!user) {
   alert("could not fetch user info, aborting :(")
@@ -90,7 +91,7 @@ async function changeAvatar() {
       newPfpFile = file
       
       const reader = new FileReader();
-      reader.addEventListener("onload", () => {
+      reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
           user.avatar = reader.result;
         }

From 3c5525d294461fe04ef64685f9c5bada10ebcee2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:33:33 +0200
Subject: [PATCH 17/40] feat: display proper error messages when the client
 fails to update profile info

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

diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 0e648c6..13a717a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -65,7 +65,7 @@ async function saveChanges() {
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
     }
   }
 };

From 873f1c81a91d2aeaa176b286c8f67fd94ab66f6d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 06:34:15 +0200
Subject: [PATCH 18/40] fix: remove weird spacing due to weird profile popup
 inheritance

---
 components/MemberEntry.vue                   | 7 +------
 components/Settings/UserSettings/Account.vue | 4 ----
 components/Settings/UserSettings/Profile.vue | 4 ++--
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/components/MemberEntry.vue b/components/MemberEntry.vue
index 3eed3c5..c77c429 100644
--- a/components/MemberEntry.vue
+++ b/components/MemberEntry.vue
@@ -3,7 +3,7 @@
         <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
         <Icon v-else class="member-avatar" name="lucide:user" />
         <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
 
@@ -32,9 +32,4 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
-
-.profile-popup {
-    position: absolute; /* Use absolute positioning */
-    left: -100px; /* Adjust this value to position the popup to the left */
-}
 </style>
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 85589e7..ffbb9d7 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -93,8 +93,4 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
-
-.profile-popup {
-  margin-left: 2dvw;
-}
 </style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 13a717a..f1a550b 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -20,7 +20,7 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
     </div>
   </div>
 </template>
@@ -133,7 +133,7 @@ async function changeAvatar() {
   background-color: var(--accent-color);
 }
 
-.profile-popup {
+#profile-popup {
   margin-left: 2dvw;
 }
 </style>
\ No newline at end of file

From 3c4965c06f96ee215834dc2ea1fb14f0037d600d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 08:04:50 +0200
Subject: [PATCH 19/40] feat: start implementing image cropping when uploading
 pfp

still need to fix the selection to within the canvas boundries, and fix theming
---
 components/CropPopup.vue                     |  61 ++++++++++
 components/Settings/UserSettings/Profile.vue |  37 ++++++-
 package.json                                 |   1 +
 pnpm-lock.yaml                               | 110 +++++++++++++++++++
 4 files changed, 208 insertions(+), 1 deletion(-)
 create mode 100644 components/CropPopup.vue

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
new file mode 100644
index 0000000..2e1a6b1
--- /dev/null
+++ b/components/CropPopup.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="crop-popup">
+    <div class="crop-container">
+      <img ref="image" :src="imageSrc" alt="Picture">
+    </div>
+    <div class="image-preview"></div>
+    <Button text="Crop" :callback="cropImage"></Button>
+    <Button text="Cancel" :callback="closePopup"></Button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import Cropper from 'cropperjs';
+
+const props = defineProps({
+  imageSrc: String,
+  onCrop: Function,
+  onClose: Function,
+});
+
+const image = ref<HTMLImageElement | null>(null);
+const cropper = ref<Cropper | null>(null);
+
+watch(image, (newValue) => {
+  if (newValue) {
+    cropper.value = new Cropper(newValue)
+    const selection = cropper.value.getCropperSelection()
+    if (selection) {
+      selection.precise = true
+      selection.aspectRatio = 1
+      selection.initialCoverage = 1
+    }
+  }
+});
+
+async function cropImage() {
+  if (cropper) {
+    cropper.value?.element
+    const selection = cropper.value?.getCropperSelection();
+    if (selection) {
+      const canvas = await selection.$toCanvas({width: 256, height: 256})
+      console.log(canvas)
+      canvas.toBlob((blob) => {
+        if (blob && props.onCrop) {
+          props.onCrop(blob);
+        }
+      });
+    }
+  }
+}
+
+function closePopup() {
+  if (props.onClose) {
+    props.onClose();
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index f1a550b..1df8c44 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -21,12 +21,23 @@
       </div>
 
       <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
+
+      <CropPopup 
+        v-if="isCropPopupVisible" 
+        :imageSrc="cropImageSrc" 
+        :onCrop="handleCrop" 
+        :onClose="closeCropPopup" 
+      />
     </div>
   </div>
+
+  <div id="crop-container">
+  </div>
 </template>
 
 <script lang="ts" setup>
 import Button from '~/components/Button.vue';
+import CropPopup from '~/components/CropPopup.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
@@ -38,6 +49,8 @@ if (!user) {
 }
 
 let newPfpFile: File;
+const isCropPopupVisible = ref(false); // State to manage the visibility of the CropPopup
+const cropImageSrc = ref(''); // State to hold the image source for cropping
 
 async function saveChanges() {
   if (!user) return;
@@ -93,7 +106,8 @@ async function changeAvatar() {
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
+          cropImageSrc.value = reader.result;
+          isCropPopupVisible.value = true;
         }
       });
       reader.readAsDataURL(file);
@@ -102,6 +116,27 @@ async function changeAvatar() {
 
   input.click()
 }
+
+
+function handleCrop(blob: Blob) {
+  if (!user) return;
+
+  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
+
+  const reader = new FileReader();
+  reader.addEventListener("load", () => {
+    if (reader.result && typeof reader.result === 'string') {
+      user.avatar = reader.result;
+    }
+  });
+  reader.readAsDataURL(newPfpFile)
+
+  closeCropPopup()
+}
+
+function closeCropPopup() {
+  isCropPopupVisible.value = false
+}
 </script>
 
 <style scoped>
diff --git a/package.json b/package.json
index b67a598..5d7d19e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
+    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07816d4..6a8cf2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
+      cropperjs:
+        specifier: ^2.0.0
+        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -205,6 +208,39 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
+  '@cropper/element-canvas@2.0.0':
+    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
+
+  '@cropper/element-crosshair@2.0.0':
+    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
+
+  '@cropper/element-grid@2.0.0':
+    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
+
+  '@cropper/element-handle@2.0.0':
+    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
+
+  '@cropper/element-image@2.0.0':
+    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
+
+  '@cropper/element-selection@2.0.0':
+    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
+
+  '@cropper/element-shade@2.0.0':
+    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
+
+  '@cropper/element-viewer@2.0.0':
+    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
+
+  '@cropper/element@2.0.0':
+    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
+
+  '@cropper/elements@2.0.0':
+    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
+
+  '@cropper/utils@2.0.0':
+    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
+
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1900,6 +1936,9 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
+  cropperjs@2.0.0:
+    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -4965,6 +5004,72 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
+  '@cropper/element-canvas@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-crosshair@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-grid@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-handle@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-image@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-selection@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-shade@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-viewer@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element@2.0.0':
+    dependencies:
+      '@cropper/utils': 2.0.0
+
+  '@cropper/elements@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-crosshair': 2.0.0
+      '@cropper/element-grid': 2.0.0
+      '@cropper/element-handle': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/element-shade': 2.0.0
+      '@cropper/element-viewer': 2.0.0
+
+  '@cropper/utils@2.0.0': {}
+
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -6895,6 +7000,11 @@ snapshots:
 
   croner@9.0.0: {}
 
+  cropperjs@2.0.0:
+    dependencies:
+      '@cropper/elements': 2.0.0
+      '@cropper/utils': 2.0.0
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1

From 168f0f7b128f595fd83bb0ab39ea45b432bee978 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:24:28 +0200
Subject: [PATCH 20/40] feat: make pfp cropper into a popup

not sure why i can't resize it though, will probably just "click" later
---
 components/CropPopup.vue                     | 30 +++++++++++------
 components/Settings/UserSettings/Profile.vue | 34 ++++++++++++++------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 2e1a6b1..7671e4d 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="crop-popup">
-    <div class="crop-container">
-      <img ref="image" :src="imageSrc" alt="Picture">
-    </div>
-    <div class="image-preview"></div>
+    <img ref="image" :src="imageSrc" style="min-height: 500px;">
     <Button text="Crop" :callback="cropImage"></Button>
     <Button text="Cancel" :callback="closePopup"></Button>
   </div>
@@ -25,18 +22,23 @@ const cropper = ref<Cropper | null>(null);
 watch(image, (newValue) => {
   if (newValue) {
     cropper.value = new Cropper(newValue)
-    const selection = cropper.value.getCropperSelection()
-    if (selection) {
-      selection.precise = true
-      selection.aspectRatio = 1
-      selection.initialCoverage = 1
+    const cropperCanvas = cropper.value.getCropperCanvas()
+    const cropperSelection = cropper.value.getCropperSelection()
+    
+    if (cropperCanvas) {
+      cropperCanvas.background = false
+    }
+
+    if (cropperSelection) {
+      cropperSelection.precise = true
+      cropperSelection.aspectRatio = 1
+      cropperSelection.initialCoverage = 1
     }
   }
 });
 
 async function cropImage() {
   if (cropper) {
-    cropper.value?.element
     const selection = cropper.value?.getCropperSelection();
     if (selection) {
       const canvas = await selection.$toCanvas({width: 256, height: 256})
@@ -58,4 +60,12 @@ function closePopup() {
 </script>
 
 <style scoped>
+.crop-popup, #image-preview{
+  min-width: 20dvw;
+  min-height: 20dvh;
+}
+
+cropper-canvas {
+  min-height: 500px;
+}
 </style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 1df8c44..e9542c9 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -22,16 +22,15 @@
 
       <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
 
-      <CropPopup 
-        v-if="isCropPopupVisible" 
-        :imageSrc="cropImageSrc" 
-        :onCrop="handleCrop" 
-        :onClose="closeCropPopup" 
-      />
     </div>
   </div>
-
-  <div id="crop-container">
+  <div v-if="isCropPopupVisible" id="crop-popup-container">
+    <CropPopup
+      :imageSrc="cropImageSrc"
+      :onCrop="handleCrop"
+      :onClose="closeCropPopup"
+      id="crop-popup-preview"
+    />
   </div>
 </template>
 
@@ -101,8 +100,6 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
-      newPfpFile = file
-      
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
@@ -171,4 +168,21 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
+
+#crop-popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.5);
+}
+
+#crop-popup-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>
\ No newline at end of file

From 181fcd04dbdc1a3bb66557a88c071a908582404b Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:27:51 +0200
Subject: [PATCH 21/40] feat: ensure there's a background colour for the user
 popup's avatar

---
 components/UserPopup.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 3a65cf0..a3a15cb 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -59,12 +59,14 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
+  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
+
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;

From d9c6faa6ab4a2aad29189a03e855e0461c9eb969 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:43:05 +0200
Subject: [PATCH 22/40] refactor: move stuff from profile to within the crop
 popup itself

---
 components/CropPopup.vue                     | 32 ++++++++++++++------
 components/Settings/UserSettings/Profile.vue | 31 ++++---------------
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 7671e4d..8321cb1 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="crop-popup">
-    <img ref="image" :src="imageSrc" style="min-height: 500px;">
-    <Button text="Crop" :callback="cropImage"></Button>
-    <Button text="Cancel" :callback="closePopup"></Button>
+  <div id="fullscreen-container">
+    <div id="crop-preview">
+      <img ref="image" :src="imageSrc" style="min-height: 500px;">
+      <Button class="button" text="Crop" :callback="cropImage"></Button>
+      <Button class="button" text="Cancel" :callback="closePopup"></Button>
+    </div>
   </div>
 </template>
 
@@ -60,12 +62,24 @@ function closePopup() {
 </script>
 
 <style scoped>
-.crop-popup, #image-preview{
-  min-width: 20dvw;
-  min-height: 20dvh;
+.button {
+  margin: 0.2em
 }
 
-cropper-canvas {
-  min-height: 500px;
+#fullscreen-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.5);
+}
+
+#crop-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 </style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index e9542c9..302c4c0 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -24,14 +24,12 @@
 
     </div>
   </div>
-  <div v-if="isCropPopupVisible" id="crop-popup-container">
-    <CropPopup
-      :imageSrc="cropImageSrc"
-      :onCrop="handleCrop"
-      :onClose="closeCropPopup"
-      id="crop-popup-preview"
-    />
-  </div>
+  <CropPopup
+    v-if="isCropPopupVisible"
+    :imageSrc="cropImageSrc"
+    :onCrop="handleCrop"
+    :onClose="closeCropPopup"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -168,21 +166,4 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
-
-#crop-popup-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0,0,0,0.5);
-}
-
-#crop-popup-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>
\ No newline at end of file

From 33dbcb58617a3424cecd285db5c6fe31f94ecd5e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:00:38 +0200
Subject: [PATCH 23/40] refactor: move yet more stuff into the popup component

---
 components/CropPopup.vue                     | 13 +++++++++++--
 components/Settings/UserSettings/Profile.vue | 12 ++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 8321cb1..69d49ea 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -44,10 +44,19 @@ async function cropImage() {
     const selection = cropper.value?.getCropperSelection();
     if (selection) {
       const canvas = await selection.$toCanvas({width: 256, height: 256})
-      console.log(canvas)
+
       canvas.toBlob((blob) => {
         if (blob && props.onCrop) {
-          props.onCrop(blob);
+          const reader = new FileReader();
+          reader.addEventListener("load", () => {
+            if (reader.result && typeof reader.result === 'string') {
+              if (props.onCrop) {
+                props.onCrop(blob, reader.result)
+              }
+            }
+          });
+          const file = new File([blob], 'image.png', { type: 'image/png' })
+          reader.readAsDataURL(file)
         }
       });
     }
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 302c4c0..cbc6376 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -113,19 +113,11 @@ async function changeAvatar() {
 }
 
 
-function handleCrop(blob: Blob) {
+function handleCrop(blob: Blob, url: string) {
   if (!user) return;
 
+  user.avatar = url;
   newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
-
-  const reader = new FileReader();
-  reader.addEventListener("load", () => {
-    if (reader.result && typeof reader.result === 'string') {
-      user.avatar = reader.result;
-    }
-  });
-  reader.readAsDataURL(newPfpFile)
-
   closeCropPopup()
 }
 

From e9717b137eb92a504da05f70e942f2c9c44aa72e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:17:12 +0200
Subject: [PATCH 24/40] fix: minor polish

---
 components/CropPopup.vue                     | 2 +-
 components/Settings/UserSettings/Profile.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 69d49ea..744b963 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -55,7 +55,7 @@ async function cropImage() {
               }
             }
           });
-          const file = new File([blob], 'image.png', { type: 'image/png' })
+          const file = new File([blob], 'preview.png', { type: 'image/png' })
           reader.readAsDataURL(file)
         }
       });
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index cbc6376..b3d9f20 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -46,8 +46,8 @@ if (!user) {
 }
 
 let newPfpFile: File;
-const isCropPopupVisible = ref(false); // State to manage the visibility of the CropPopup
-const cropImageSrc = ref(''); // State to hold the image source for cropping
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref('');
 
 async function saveChanges() {
   if (!user) return;

From c8b7c1d90972b365e8ce7a0e341c49ea5937724c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 13:05:09 +0200
Subject: [PATCH 25/40] feat: add links, build time, and git hash to settings
 menu

---
 app.config.ts      |  5 +++++
 pages/settings.vue | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 app.config.ts

diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000..b547927
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,5 @@
+export default defineAppConfig({
+	title: "Gorb",
+    buildTimeString: new Date().toISOString(),
+    gitHash: process.env.COMMIT_REF || "N/A"
+})
diff --git a/pages/settings.vue b/pages/settings.vue
index 991d046..b078aa1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -2,8 +2,8 @@
   <div id="settings-page-container">
     <div id="settings-page">
       <div id="sidebar">
-        <h4>(Search bar here)</h4>
         <ul>
+          <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
             <h2>{{ category.displayName }}</h2>
             <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
@@ -12,8 +12,23 @@
             </li>
             <span class="spacer"></span>
           </div>
+          
+          <p>
+            <Button text="Log Out" :callback=logout variant="scary"></Button>
+          </p>
+          <span class="spacer"></span>
+
+          <p id="links-and-socials">
+            <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
+            <NuxtLink href="https://docs.gorb.app" title="Backend Documentation"><Icon name="lucide:book-open-text" /></NuxtLink>
+          </p>
+          
+          <p style="font-size: .8em; color: var(--secondary-text-color)">
+            Version Hash: {{ appConfig.gitHash }}
+            <br>
+            Build Time: {{ appConfig.buildTimeString }}
+          </p>
 
-          <Button text="Log Out" :callback=logout variant="scary"></Button>
         </ul>
       </div>
       <div id="sub-page">
@@ -29,6 +44,8 @@ import Button from '~/components/Button.vue';
 
 const { logout } = useAuth()
 
+const appConfig = useAppConfig()
+
 interface Page {
   displayName: string;
   pageData: any; // is actually Component but TS is yelling at me :(
@@ -49,6 +66,7 @@ import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
 import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
 import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
 import Language from '~/components/Settings/AppSettings/Language.vue';
+import { WINDOW } from 'cropperjs';
 
 const settingsCategories = {
   userSettings: {
@@ -103,7 +121,7 @@ function selectCategory(page: Page) {
   background-color: var(--sidebar-background-color);
   color: var(--text-color);
   padding: 1dvh 1dvw;
-  margin-left: auto;
+  margin-left: 0;
 
   overflow-y: auto;
   height: 100vh;
@@ -128,6 +146,10 @@ function selectCategory(page: Page) {
   transition: background-color 0.3s;
 }
 
+#sidebar p {
+  margin: 2dvh 0.8dvw;
+}
+
 .sidebar-focus {
   background-color: var(--sidebar-highlighted-background-color);
 }
@@ -147,11 +169,15 @@ function selectCategory(page: Page) {
   height: 100vh;
 }
 
+#links-and-socials * {
+  margin-right: 0.2em;
+}
+
 .spacer {
   height: 0.2dvh;
   display: block;
   margin: 0.8dvh 1dvw;
-  background-color: var(--spacing-color);
+  background-color: var(--padding-color);
 }
 
 /* applies to child pages too */

From 0f11e4e54536c9730acb13eba7fbe16c80109d64 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 5 Jul 2025 01:10:36 +0200
Subject: [PATCH 26/40] feat: update message sending to use JSON to match
 backend change

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

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 7612243..18b9ac5 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -158,10 +158,12 @@ if (accessToken && apiBase) {
 
 function sendMessage(e: Event) {
 	e.preventDefault();
-	const text = messageInput.value;
-	console.log("text:", text);
-	if (text) {
-		ws.send(text);
+	const message = {
+		message: messageInput.value
+	}
+	console.log("message:", message);
+	if (message.message) {
+		ws.send(JSON.stringify(message));
 		messageInput.value = "";
 		console.log("MESSAGE SENT!!!");
 	}

From 059282706b6c395339c568fc18d72a4329bf4b0a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 01:27:04 +0200
Subject: [PATCH 27/40] fix: remove random accidental import, fix build system

---
 app.config.ts      | 2 +-
 pages/settings.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app.config.ts b/app.config.ts
index b547927..11f7f7c 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,5 +1,5 @@
 export default defineAppConfig({
 	title: "Gorb",
     buildTimeString: new Date().toISOString(),
-    gitHash: process.env.COMMIT_REF || "N/A"
+    gitHash: process.env.GIT_SHORT_REV || "N/A"
 })
diff --git a/pages/settings.vue b/pages/settings.vue
index b078aa1..cc694a9 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -66,7 +66,6 @@ import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
 import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
 import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
 import Language from '~/components/Settings/AppSettings/Language.vue';
-import { WINDOW } from 'cropperjs';
 
 const settingsCategories = {
   userSettings: {

From aa335b086a74536403642baebce7c060360fe1b0 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 5 Jul 2025 02:38:23 +0200
Subject: [PATCH 28/40] feat: use logout endpoint for logout and move old logic
 to revoke in auth

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

diff --git a/composables/auth.ts b/composables/auth.ts
index 0ac2e8b..b23a67b 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -37,13 +37,19 @@ export const useAuth = () => {
     //await fetchUser();
   }
 
-  async function logout(password: string) {
-    console.log("password:", password);
+  async function logout() {
     console.log("access:", accessToken.value);
-    const hashedPass = await hashPassword(password);
-    console.log("hashed");
 
-    const res = await fetchWithApi("/auth/revoke", {
+    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    clearAuth();
+
+	return await navigateTo("/login");
+  }
+
+  async function revoke(password: string) {
+    const hashedPass = await hashPassword(password);
+
+    await fetchWithApi("/auth/revoke", {
       method: "POST",
       body:
       {
@@ -54,10 +60,6 @@ export const useAuth = () => {
     clearAuth();
   }
 
-  async function revoke() {
-    clearAuth();
-  }
-
   async function refresh() {
     console.log("refreshing");
     const res = await fetchWithApi("/auth/refresh", {

From c1021b11922a423bb233fef5e18ed38a8e5d100f Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 15:24:09 +0200
Subject: [PATCH 29/40] fix: fix build time and version hash being evaluated at
 runtime

---
 app.config.ts      | 5 -----
 nuxt.config.ts     | 4 +++-
 pages/settings.vue | 6 +++---
 3 files changed, 6 insertions(+), 9 deletions(-)
 delete mode 100644 app.config.ts

diff --git a/app.config.ts b/app.config.ts
deleted file mode 100644
index 11f7f7c..0000000
--- a/app.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default defineAppConfig({
-	title: "Gorb",
-    buildTimeString: new Date().toISOString(),
-    gitHash: process.env.GIT_SHORT_REV || "N/A"
-})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 63d9372..05a40fa 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,7 +27,9 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       apiVersion: 1,
-      messageGroupingMaxDifference: 300000
+      messageGroupingMaxDifference: 300000,
+      buildTimeString: new Date().toISOString(),
+      gitHash: process.env.GIT_SHORT_REV || "N/A",
     }
   },
   /* nitro: {
diff --git a/pages/settings.vue b/pages/settings.vue
index cc694a9..bd1a484 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -24,9 +24,9 @@
           </p>
           
           <p style="font-size: .8em; color: var(--secondary-text-color)">
-            Version Hash: {{ appConfig.gitHash }}
+            Version Hash: {{ appConfig.public.gitHash }}
             <br>
-            Build Time: {{ appConfig.buildTimeString }}
+            Build Time: {{ appConfig.public.buildTimeString }}
           </p>
 
         </ul>
@@ -44,7 +44,7 @@ import Button from '~/components/Button.vue';
 
 const { logout } = useAuth()
 
-const appConfig = useAppConfig()
+const appConfig = useRuntimeConfig()
 
 interface Page {
   displayName: string;

From 9f1232a6685f766b799effd45ef272bbe5dda9f2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 15:38:00 +0200
Subject: [PATCH 30/40] fix: ensure memberlist isn't taller than the screen

i'm not sure why you need to set a max height, this isn't really a great soulution to the problem either, but we need *something* right now
---
 pages/servers/[serverId]/channels/[channelId].vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 699b9a3..01e89f0 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -100,6 +100,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	display: flex;
 	flex-direction: column;
 	overflow-y: scroll;
+	max-height: 92dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	margin-top: 1dvh;

From 94fee828936944ff9edd543c965ebf758a723990 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 15:51:09 +0200
Subject: [PATCH 31/40] refactor: minor refactor

---
 components/Settings/AppSettings/Appearance.vue | 2 --
 components/Settings/UserSettings/Account.vue   | 7 -------
 components/Settings/UserSettings/Profile.vue   | 7 -------
 pages/settings.vue                             | 7 +++++--
 4 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 135c0a1..51b06ee 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
     <h1>hi</h1>
-    <h5>TEST</h5>
-    <h5>TEST</h5>
   </div>
 </template>
 
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 85589e7..866471e 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -70,13 +70,6 @@ async function deleteAccount() {
 </script>
 
 <style scoped>
-.subtitle {
-  display: block;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 4dvh 0 0.5dvh 0.25dvw;
-}
-
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index ed7da0a..db6188e 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -108,13 +108,6 @@ async function changeAvatar() {
   display: flex;
 }
 
-.subtitle {
-  display: block;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 1.5dvh 0 0.5dvh 0.25dvw;
-}
-
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
diff --git a/pages/settings.vue b/pages/settings.vue
index bd1a484..0f297e3 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -180,7 +180,10 @@ function selectCategory(page: Page) {
 }
 
 /* applies to child pages too */
-:deep(h5) {
-  color: red;
+:deep(.subtitle) {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 </style>
\ No newline at end of file

From 768b011961d52159500be5c7b2f7328d9a2d11ef Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:02:22 +0200
Subject: [PATCH 32/40] feat: add theme previews

---
 .../Settings/AppSettings/Appearance.vue       | 58 ++++++++++++++++++-
 nuxt.config.ts                                |  3 +
 public/themes/ash.css                         | 19 ++++++
 public/themes/ash.json                        |  6 ++
 public/themes/dark.json                       |  6 ++
 public/themes/default-themes.json             |  4 --
 public/themes/light.json                      |  6 ++
 7 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 public/themes/ash.css
 create mode 100644 public/themes/ash.json
 create mode 100644 public/themes/dark.json
 delete mode 100644 public/themes/default-themes.json
 create mode 100644 public/themes/light.json

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 51b06ee..59e417c 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -1,12 +1,66 @@
 <template>
   <div>
-    <h1>hi</h1>
+    <h1>Appearance</h1>
+    
+    <p class="subtitle">THEMES</p>
+    <div class="themes">
+      <p v-for="theme of themes">
+        <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
+          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
+            {{ theme.displayName }}
+          </span>
+        </span>
+      </p>
+    </div>
+
+    <p class="subtitle">ICONS</p>
+    <div class="themes">
+    </div>
+
+
   </div>
 </template>
 
 <script lang="ts" setup>
+const runtimeConfig = useRuntimeConfig()
+const defaultThemes = runtimeConfig.public.defaultThemes
+const baseURL = runtimeConfig.app.baseURL;
+
+const themes: Array<Theme> = []
+
+interface Theme {
+  displayName: string
+  previewGradient: string
+  complementaryColor: string
+  themeURL: string
+}
+
+
+const fetchThemes = async () => {
+  for (const theme of defaultThemes) {
+    const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
+    const themeConfigJson = await themeConfig.json() as Theme
+    themes.push(themeConfigJson)
+  }
+}
+
+await fetchThemes()
 </script>
 
 <style scoped>
+.theme-preview {
+  min-width: 6em;
+  min-height: 6em;
+  border-radius: 100%;
+  border: .1em solid var(--primary-color);
 
-</style>
\ No newline at end of file
+  display: inline-block;
+  text-align: center;
+  align-content: center;
+}
+
+.theme-title {
+  font-size: .8em;
+  line-height: 6em; /* same height as the parent to centre it vertically */
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 05a40fa..489e1b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,6 +30,9 @@ export default defineNuxtConfig({
       messageGroupingMaxDifference: 300000,
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
+      defaultThemes: [
+        "light", "ash", "dark"
+      ]
     }
   },
   /* nitro: {
diff --git a/public/themes/ash.css b/public/themes/ash.css
new file mode 100644
index 0000000..b685551
--- /dev/null
+++ b/public/themes/ash.css
@@ -0,0 +1,19 @@
+:root {
+	--text-color: #f0e5e0;
+	--secondary-text-color: #e8e0db;
+
+	--chat-background-color: #2f2e2d;
+    --chat-highlighted-background-color: #3f3b38;
+	--sidebar-background-color: #3e3a37;
+	--sidebar-highlighted-background-color: #46423b;
+	--topbar-background-color: #3a3733;
+
+    --padding-color: #e0e0e0;
+    
+	--primary-color: #f07028;
+	--primary-highlighted-color: #f28f4b;
+	--secondary-color: #683820;
+	--secondary-highlighted-color: #885830;
+	--accent-color: #a04b24;
+	--accent-highlighted-color: #b86038;
+}
\ No newline at end of file
diff --git a/public/themes/ash.json b/public/themes/ash.json
new file mode 100644
index 0000000..fb9cc93
--- /dev/null
+++ b/public/themes/ash.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Ash",
+	"previewGradient": "45deg, #2f2e2d, #46423b",
+	"complementaryColor": "white",
+	"themeData": "ash.css"
+}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
new file mode 100644
index 0000000..3cecba6
--- /dev/null
+++ b/public/themes/dark.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Dark",
+	"previewGradient": "45deg, #1f1e1d, #36322b",
+	"complementaryColor": "white",
+	"themeData": "dark.css"
+}
\ No newline at end of file
diff --git a/public/themes/default-themes.json b/public/themes/default-themes.json
deleted file mode 100644
index fb9478d..0000000
--- a/public/themes/default-themes.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
-	"dark.css",
-	"light.css"
-]
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
new file mode 100644
index 0000000..fe0b678
--- /dev/null
+++ b/public/themes/light.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Light",
+	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
+	"complementaryColor": "black",
+	"themeData": "light.css"
+}
\ No newline at end of file

From c03f72ceccf81f7501b4ae71d711959bdf66465d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:05:40 +0200
Subject: [PATCH 33/40] feat: implement "hash navigation" for settings

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

diff --git a/pages/settings.vue b/pages/settings.vue
index 0f297e3..01b78d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,10 +40,10 @@
 
 
 <script lang="ts" setup>
+import { onMounted } from 'vue';
 import Button from '~/components/Button.vue';
 
 const { logout } = useAuth()
-
 const appConfig = useRuntimeConfig()
 
 interface Page {
@@ -99,6 +99,16 @@ function selectCategory(page: Page) {
   selectedPage.value = page.displayName;
 };
 
+// redirects to you privacy if you go to settings#privacy
+onMounted(() => {
+  const hash = window.location.hash.substring(1).toLowerCase();
+  const foundPage = categories.flatMap(category => category.pages).find(page => page.displayName.toLowerCase() === hash);
+
+  if (foundPage) {
+    currentPage.value = foundPage;
+    selectedPage.value = foundPage.displayName;
+  }
+});
 </script>
 
 <style scoped>

From 1066822dd5f4c38c1bcf4e9290e0ac80f3204df3 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:13:17 +0200
Subject: [PATCH 34/40] feat: use flexboxes instead!

---
 .../Settings/AppSettings/Appearance.vue       | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 59e417c..68759d9 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -4,13 +4,13 @@
     
     <p class="subtitle">THEMES</p>
     <div class="themes">
-      <p v-for="theme of themes">
+      <div v-for="theme of themes" class="theme-preview-container">
         <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
           <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
           </span>
         </span>
-      </p>
+      </div>
     </div>
 
     <p class="subtitle">ICONS</p>
@@ -48,9 +48,19 @@ await fetchThemes()
 </script>
 
 <style scoped>
+.themes {
+  display: flex;
+}
+
+.theme-preview-container {
+  margin: .5em;
+  width: 5em;
+  height: 5em;
+}
+
 .theme-preview {
-  min-width: 6em;
-  min-height: 6em;
+  width: 5em;
+  height: 5em;
   border-radius: 100%;
   border: .1em solid var(--primary-color);
 
@@ -61,6 +71,6 @@ await fetchThemes()
 
 .theme-title {
   font-size: .8em;
-  line-height: 6em; /* same height as the parent to centre it vertically */
+  line-height: 5em; /* same height as the parent to centre it vertically */
 }
 </style>

From 441dc0c15cdb3391db283e89ec678970ca9e6b1c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:36:08 +0200
Subject: [PATCH 35/40] feat: actually add theme switching :mind_blown:

---
 .../Settings/AppSettings/Appearance.vue       | 29 ++++++++++++++++++-
 public/themes/ash.json                        |  2 +-
 public/themes/dark.json                       |  2 +-
 public/themes/light.json                      |  2 +-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 68759d9..0f7b504 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -5,7 +5,11 @@
     <p class="subtitle">THEMES</p>
     <div class="themes">
       <div v-for="theme of themes" class="theme-preview-container">
-        <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
+        <span class="theme-preview"
+          :title="theme.displayName"
+          :style="{background:`linear-gradient(${theme.previewGradient})`}"
+          @click="changeTheme(theme.ID, theme.themeURL)"
+        >
           <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
           </span>
@@ -25,23 +29,45 @@
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
+let themeLinkElement: HTMLLinkElement | null = null;
 
 const themes: Array<Theme> = []
 
 interface Theme {
+  ID: string
   displayName: string
   previewGradient: string
   complementaryColor: string
   themeURL: string
 }
 
+function changeTheme(ID: string, URL: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
+    return;
+  }
+
+  localStorage.setItem("selectedTheme", ID);
+
+  // if the theme didn't originally load for some reason, create it
+  if (!themeLinkElement) {
+    themeLinkElement = document.createElement('link');
+    themeLinkElement.rel = 'stylesheet';
+    document.head.appendChild(themeLinkElement);
+  }
+
+  themeLinkElement.href = `${baseURL}themes/${URL}`;
+}
 
 const fetchThemes = async () => {
   for (const theme of defaultThemes) {
     const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
     const themeConfigJson = await themeConfig.json() as Theme
+    themeConfigJson.ID = theme
+
     themes.push(themeConfigJson)
   }
+
+  console.log(themes)
 }
 
 await fetchThemes()
@@ -67,6 +93,7 @@ await fetchThemes()
   display: inline-block;
   text-align: center;
   align-content: center;
+  cursor: pointer;
 }
 
 .theme-title {
diff --git a/public/themes/ash.json b/public/themes/ash.json
index fb9cc93..1bd7670 100644
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@@ -2,5 +2,5 @@
 	"displayName": "Ash",
 	"previewGradient": "45deg, #2f2e2d, #46423b",
 	"complementaryColor": "white",
-	"themeData": "ash.css"
+	"themeURL": "ash.css"
 }
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
index 3cecba6..0ff69be 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -2,5 +2,5 @@
 	"displayName": "Dark",
 	"previewGradient": "45deg, #1f1e1d, #36322b",
 	"complementaryColor": "white",
-	"themeData": "dark.css"
+	"themeURL": "dark.css"
 }
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
index fe0b678..3745abb 100644
--- a/public/themes/light.json
+++ b/public/themes/light.json
@@ -2,5 +2,5 @@
 	"displayName": "Light",
 	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
 	"complementaryColor": "black",
-	"themeData": "light.css"
+	"themeURL": "light.css"
 }
\ No newline at end of file

From 6abfd8e44bcf8f232e251e64269e7532612ec42f Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:02:57 +0200
Subject: [PATCH 36/40] chore: pascalCase

---
 components/Settings/AppSettings/Appearance.vue | 16 ++++++++--------
 public/themes/ash.json                         |  2 +-
 public/themes/dark.json                        |  2 +-
 public/themes/light.json                       |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 0f7b504..82e3845 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -8,7 +8,7 @@
         <span class="theme-preview"
           :title="theme.displayName"
           :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.ID, theme.themeURL)"
+          @click="changeTheme(theme.id, theme.themeUrl)"
         >
           <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
@@ -34,19 +34,19 @@ let themeLinkElement: HTMLLinkElement | null = null;
 const themes: Array<Theme> = []
 
 interface Theme {
-  ID: string
+  id: string
   displayName: string
   previewGradient: string
   complementaryColor: string
-  themeURL: string
+  themeUrl: string
 }
 
-function changeTheme(ID: string, URL: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
+function changeTheme(id: string, url: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
     return;
   }
 
-  localStorage.setItem("selectedTheme", ID);
+  localStorage.setItem("selectedTheme", id);
 
   // if the theme didn't originally load for some reason, create it
   if (!themeLinkElement) {
@@ -55,14 +55,14 @@ function changeTheme(ID: string, URL: string) {
     document.head.appendChild(themeLinkElement);
   }
 
-  themeLinkElement.href = `${baseURL}themes/${URL}`;
+  themeLinkElement.href = `${baseURL}themes/${url}`;
 }
 
 const fetchThemes = async () => {
   for (const theme of defaultThemes) {
     const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
     const themeConfigJson = await themeConfig.json() as Theme
-    themeConfigJson.ID = theme
+    themeConfigJson.id = theme
 
     themes.push(themeConfigJson)
   }
diff --git a/public/themes/ash.json b/public/themes/ash.json
index 1bd7670..d5d2a59 100644
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@@ -2,5 +2,5 @@
 	"displayName": "Ash",
 	"previewGradient": "45deg, #2f2e2d, #46423b",
 	"complementaryColor": "white",
-	"themeURL": "ash.css"
+	"themeUrl": "ash.css"
 }
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
index 0ff69be..4731d43 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -2,5 +2,5 @@
 	"displayName": "Dark",
 	"previewGradient": "45deg, #1f1e1d, #36322b",
 	"complementaryColor": "white",
-	"themeURL": "dark.css"
+	"themeUrl": "dark.css"
 }
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
index 3745abb..b95c78b 100644
--- a/public/themes/light.json
+++ b/public/themes/light.json
@@ -2,5 +2,5 @@
 	"displayName": "Light",
 	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
 	"complementaryColor": "black",
-	"themeURL": "light.css"
+	"themeUrl": "light.css"
 }
\ No newline at end of file

From 7098dda6b4f1a6d530978caa8120d2552ac303be Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:03:24 +0200
Subject: [PATCH 37/40] fix: remove un-necessary imports

---
 pages/settings.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 01b78d7..17558b1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,9 +40,6 @@
 
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import Button from '~/components/Button.vue';
-
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 

From 2c4489917a0b86b832b2bd85c68c9c851ab119b4 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:05:35 +0200
Subject: [PATCH 38/40] fix: use $fetch over fetch

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

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 82e3845..696d8b9 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -60,14 +60,11 @@ function changeTheme(id: string, url: string) {
 
 const fetchThemes = async () => {
   for (const theme of defaultThemes) {
-    const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
-    const themeConfigJson = await themeConfig.json() as Theme
-    themeConfigJson.id = theme
+    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
+    themeConfig.id = theme
 
-    themes.push(themeConfigJson)
+    themes.push(themeConfig)
   }
-
-  console.log(themes)
 }
 
 await fetchThemes()

From 2d8475b20a434d5b0859f0338b0a02c9ab54c7b8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:22:06 +0200
Subject: [PATCH 39/40] fix: convert arrow function for consistency

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

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 696d8b9..3adfda6 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -58,7 +58,7 @@ function changeTheme(id: string, url: string) {
   themeLinkElement.href = `${baseURL}themes/${url}`;
 }
 
-const fetchThemes = async () => {
+async function fetchThemes() {
   for (const theme of defaultThemes) {
     const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
     themeConfig.id = theme

From 825cf2ba52dbe8c30d5337bf95314e5838497fed Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:32:14 +0200
Subject: [PATCH 40/40] fix: minor changes to fix review

---
 components/CropPopup.vue                     |  9 ++++-----
 components/Settings/UserSettings/Profile.vue | 11 ++++-------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 744b963..12c3a0b 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,15 +1,14 @@
 <template>
   <div id="fullscreen-container">
     <div id="crop-preview">
-      <img ref="image" :src="imageSrc" style="min-height: 500px;">
-      <Button class="button" text="Crop" :callback="cropImage"></Button>
-      <Button class="button" text="Cancel" :callback="closePopup"></Button>
+      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
+      <Button text="Crop" :callback="cropImage"></Button>
+      <Button text="Cancel" :callback="closePopup"></Button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
 import Cropper from 'cropperjs';
 
 const props = defineProps({
@@ -82,7 +81,7 @@ function closePopup() {
   width: 100%;
   height: 100%;
   z-index: 10;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 #crop-preview {
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index b3d9f20..8d79a9a 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,22 +33,19 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
-import CropPopup from '~/components/CropPopup.vue';
 import type { UserResponse } from '~/types/interfaces';
 
+let newPfpFile: File;
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref("")
+;
 const { fetchUser } = useAuth();
 
-
 const user: UserResponse | undefined = await fetchUser()
 if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
-const isCropPopupVisible = ref(false);
-const cropImageSrc = ref('');
-
 async function saveChanges() {
   if (!user) return;