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 01/32] 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 02/32] 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 03/32] 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 04/32] 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 05/32] 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 06/32] 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 07/32] 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 08/32] 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 09/32] 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 10/32] 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 11/32] 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 12/32] 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 13/32] 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 14/32] 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 15/32] 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 16/32] 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 17/32] 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 18/32] 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 19/32] 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 20/32] 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 21/32] 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 22/32] 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 23/32] 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 24/32] 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 25/32] 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;
   

From 24d8905ef2f6ea406f5e7a8732f59add8c012ce2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 6 Jul 2025 02:20:11 +0200
Subject: [PATCH 26/32] feat: woke theme

---
 app.vue                                       |  1 +
 layouts/client.vue                            |  3 ++-
 nuxt.config.ts                                |  2 +-
 .../[serverId]/channels/[channelId].vue       |  1 +
 pages/settings.vue                            |  2 ++
 public/themes/woke.css                        | 24 +++++++++++++++++++
 public/themes/woke.json                       |  6 +++++
 7 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 public/themes/woke.css
 create mode 100644 public/themes/woke.json

diff --git a/app.vue b/app.vue
index a0a0ed6..7af306b 100644
--- a/app.vue
+++ b/app.vue
@@ -33,6 +33,7 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
+	background: var(--optional-chat-background);
   background-color: var(--chat-background-color);
   margin: 0;
 }
diff --git a/layouts/client.vue b/layouts/client.vue
index 4a6ac73..a1ee86d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -40,7 +40,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
 	text-align: center;
-	
 }
 
 .hidden {
@@ -58,6 +57,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
@@ -98,6 +98,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-left: .5dvw;
 	padding-right: .5dvw;
 	border-right: 1px solid var(--padding-color);
+	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
 	padding-top: 1.5dvh;
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 489e1b8..380fcae 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,7 +31,7 @@ export default defineNuxtConfig({
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
       defaultThemes: [
-        "light", "ash", "dark"
+        "light", "ash", "dark", "woke"
       ]
     }
   },
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 01e89f0..6bdcc7c 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -86,6 +86,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
+	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
diff --git a/pages/settings.vue b/pages/settings.vue
index 17558b1..c3db3d1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -124,6 +124,7 @@ onMounted(() => {
 #sidebar {
   min-width: 25dvw;
   max-width: 25dvw;
+  background: var(--optional-channel-list-background);
   background-color: var(--sidebar-background-color);
   color: var(--text-color);
   padding: 1dvh 1dvw;
@@ -157,6 +158,7 @@ onMounted(() => {
 }
 
 .sidebar-focus {
+  background: var(--optional-topbar-background);
   background-color: var(--sidebar-highlighted-background-color);
 }
 
diff --git a/public/themes/woke.css b/public/themes/woke.css
new file mode 100644
index 0000000..9f6eb98
--- /dev/null
+++ b/public/themes/woke.css
@@ -0,0 +1,24 @@
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+
+    --chat-background-color: #808080;
+    --chat-highlighted-background-color: #808080;
+	--sidebar-background-color: #808080;
+	--sidebar-highlighted-background-color: #808080;
+	--topbar-background-color: #808080;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
+	--optional-sidebar-background: linear-gradient(90deg, #55cdfc, #f7a8b8, #ffffff, #f7a8b8, #55cdfc);
+	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
+}
\ No newline at end of file
diff --git a/public/themes/woke.json b/public/themes/woke.json
new file mode 100644
index 0000000..0fe2071
--- /dev/null
+++ b/public/themes/woke.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Woke",
+	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
+	"complementaryColor": "white",
+	"themeUrl": "woke.css"
+}
\ No newline at end of file

From 11209e0618fc1ef53e7637a69a1e6b41913c7fdb Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 6 Jul 2025 02:21:23 +0200
Subject: [PATCH 27/32] fix: highlight colours

---
 public/themes/woke.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/themes/woke.css b/public/themes/woke.css
index 9f6eb98..e777114 100644
--- a/public/themes/woke.css
+++ b/public/themes/woke.css
@@ -2,11 +2,11 @@
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
 
-    --chat-background-color: #808080;
-    --chat-highlighted-background-color: #808080;
-	--sidebar-background-color: #808080;
-	--sidebar-highlighted-background-color: #808080;
-	--topbar-background-color: #808080;
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
 
     --padding-color: #80808000;
     

From 936d036253289e5fe4d38577b4705cf497d4705a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 6 Jul 2025 02:22:24 +0200
Subject: [PATCH 28/32] fix: remove weird gradient

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

diff --git a/pages/settings.vue b/pages/settings.vue
index c3db3d1..1380283 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -158,7 +158,6 @@ onMounted(() => {
 }
 
 .sidebar-focus {
-  background: var(--optional-topbar-background);
   background-color: var(--sidebar-highlighted-background-color);
 }
 

From b1ae35c43bc21c544de315680c2bce5b623aa202 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 6 Jul 2025 02:27:47 +0200
Subject: [PATCH 29/32] fix: make woke theme server list less jaring

---
 public/themes/woke.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/themes/woke.css b/public/themes/woke.css
index e777114..8aeffc8 100644
--- a/public/themes/woke.css
+++ b/public/themes/woke.css
@@ -19,6 +19,6 @@
 
     --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
-	--optional-sidebar-background: linear-gradient(90deg, #55cdfc, #f7a8b8, #ffffff, #f7a8b8, #55cdfc);
+	--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
 	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
 }
\ No newline at end of file

From 5c852a2df7d9e971be0b29baecaf24fb33bec795 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 6 Jul 2025 02:35:21 +0200
Subject: [PATCH 30/32] refactor: change internal woke ID to rainbow-capitalism

---
 nuxt.config.ts                                       | 2 +-
 public/themes/{woke.css => rainbow-capitalism.css}   | 0
 public/themes/{woke.json => rainbow-capitalism.json} | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename public/themes/{woke.css => rainbow-capitalism.css} (100%)
 rename public/themes/{woke.json => rainbow-capitalism.json} (85%)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 380fcae..46890d1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,7 +31,7 @@ export default defineNuxtConfig({
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
       defaultThemes: [
-        "light", "ash", "dark", "woke"
+        "light", "ash", "dark", "rainbow-capitalism"
       ]
     }
   },
diff --git a/public/themes/woke.css b/public/themes/rainbow-capitalism.css
similarity index 100%
rename from public/themes/woke.css
rename to public/themes/rainbow-capitalism.css
diff --git a/public/themes/woke.json b/public/themes/rainbow-capitalism.json
similarity index 85%
rename from public/themes/woke.json
rename to public/themes/rainbow-capitalism.json
index 0fe2071..e110ea2 100644
--- a/public/themes/woke.json
+++ b/public/themes/rainbow-capitalism.json
@@ -2,5 +2,5 @@
 	"displayName": "Woke",
 	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
 	"complementaryColor": "white",
-	"themeUrl": "woke.css"
+	"themeUrl": "rainbow-capitalism.css"
 }
\ No newline at end of file

From 0c6cae110fb7e9b5a26621b4b16147cb1953e24b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 7 Jul 2025 19:53:50 +0200
Subject: [PATCH 31/32] feat: add more restrictions to markdown sanitization

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

diff --git a/components/Message.vue b/components/Message.vue
index e8a91b5..c903012 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -60,7 +60,16 @@ const sanitized = ref<string>();
 
 onMounted(async () => {
 	const parsed = await parse(props.text, { gfm: true });
-	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
+	sanitized.value = DOMPurify.sanitize(parsed, {
+		ALLOWED_TAGS: [
+			"strong", "em", "br", "blockquote",
+			"code", "ul", "ol", "li", "a", "h1",
+			"h2", "h3", "h4", "h5", "h6"
+		],
+		ALLOW_DATA_ATTR: false,
+		ALLOW_SELF_CLOSE_IN_ATTR: false,
+		ALLOWED_ATTR: []
+	});
 	console.log("adding listeners")
 	await nextTick();
 	messageElement.value?.addEventListener("mouseenter", (e: Event) => {

From a111180b521fbc6a4e7b6a2beb7abd11a1c31c06 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 7 Jul 2025 20:23:47 +0200
Subject: [PATCH 32/32] feat: add word wrapping in messages

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

diff --git a/components/Message.vue b/components/Message.vue
index c903012..dce8ed4 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -108,6 +108,7 @@ function getDayDifference(date1: Date, date2: Date) {
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
+	overflow-wrap: anywhere;
 }
 
 .message:hover {