From 82796377ee7d68524e7f3f661f0bc18750b135db Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 16:57:56 +0200
Subject: [PATCH 01/14] feat: change non-grouped messages to have margin-top
 instead of margin-bottom

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

diff --git a/components/Message.vue b/components/Message.vue
index 592a995..baf954a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -102,8 +102,8 @@ onMounted(async () => {
 	align-items: center;
 }
 
-.message-margin-bottom {
-	margin-bottom: 1dvh;
+.normal-message {
+	margin-top: 1dvh;
 }
 
 #last-message {

From 626c1c8453703d06647783dd2658067359b98934 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 16:58:53 +0200
Subject: [PATCH 02/14] fix: older messages loading in reverse order

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

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 5ad027c..e3dcdbf 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -185,6 +185,7 @@ onMounted(async () => {
 						olderMessages.reverse();
 						console.log("older messages:", olderMessages);
 						if (olderMessages.length == 0) return;
+						olderMessages.reverse();
 						for (const [i, oldMessage] of olderMessages.entries()) {
 							console.log("old message:", oldMessage);
 							messages.value.unshift(oldMessage);

From f6523ae97f92a75efeb6ede3947c0eaf99f41c04 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:02:58 +0200
Subject: [PATCH 03/14] feat: remove unnecessary styles from client layout

---
 layouts/client.vue | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 6c629da..73a40d6 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -123,30 +123,6 @@ const members = [
 	grid-row: 1;
 }
 
-#test {
-	grid-column: 3;
-	grid-row: 1;
-}
-
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-#message-history,
-#members-list {
-	padding-top: 3dvh;
-}
-
-#message-history {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding-left: 3dvw;
-	padding-right: 3dvw;
-}
-
 #left-column {
 	display: flex;
 	flex-direction: column;

From 532aba5c21a75607075f969b0c4316a3bfb0a732 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:03:19 +0200
Subject: [PATCH 04/14] feat: merge two #member-list blocks

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

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 4f3e4ec..debe6a5 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -88,10 +88,6 @@ function toggleInvitePopup(e: Event) {
 	gap: .5em;
 }
 
-#members-list {
-	padding-top: 3dvh;
-}
-
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
@@ -99,6 +95,7 @@ function toggleInvitePopup(e: Event) {
 }
 
 #members-list {
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);

From e8d37af75e25cefeec153b946014125e07ce649e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:35:36 +0200
Subject: [PATCH 05/14] feat: update appearance of members list

---
 .../[serverId]/channels/[channelId].vue       | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index debe6a5..3975e5b 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -24,11 +24,13 @@
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-list">
-			<div class="member-item" v-for="member of members">
-				<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 id="members-container">
+			<div id="members-list">
+				<div class="member-item" v-for="member of members">
+					<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>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -79,14 +81,6 @@ function toggleInvitePopup(e: Event) {
 </script>
 
 <style>
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-}
 
 #middle-left-column {
 	padding-left: 1dvw;
@@ -94,13 +88,29 @@ function toggleInvitePopup(e: Event) {
 	border-right: 1px solid rgb(70, 70, 70);
 }
 
-#members-list {
+#members-container {
 	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
+#members-list {
+	display: grid;
+	grid-template-columns: auto;
+}
+
+.member-item {
+	display: grid;
+	grid-template-columns: 2dvw auto;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: 1em;
+	align-items: center;
+	text-align: left;
+	
+}
+
 #channels-list {
 	display: flex;
 	flex-direction: column;
@@ -113,4 +123,9 @@ function toggleInvitePopup(e: Event) {
 	border-radius: 50%;
 }
 
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 </style>
\ No newline at end of file

From 6182e00dd94f6447728c8ad42727ca4833f0f6b9 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 17:38:03 +0200
Subject: [PATCH 06/14] feat: decrease top padding of members container

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

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 3975e5b..f931863 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -89,7 +89,7 @@ function toggleInvitePopup(e: Event) {
 }
 
 #members-container {
-	padding-top: 3dvh;
+	padding-top: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);

From 35852d8cad1cb2c882e84dca9d6528fcd42b353f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 1 Jun 2025 23:09:37 +0200
Subject: [PATCH 07/14] feat: make URLs in messages become links

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

diff --git a/components/Message.vue b/components/Message.vue
index baf954a..474b089 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -14,7 +14,10 @@
 				</span>
 			</div>
 			<div class="message-text">
-				{{ text }}
+				<template v-for="word of text.split(' ')">
+					<NuxtLink v-if="/^http(s|):\/\/(?:www\.)?[\w-]{1,}\.[A-Za-z]{2,}[\/?]{0,1}[\w-=&\/#.]*$/.test(word)" :href="word" :external="true" target="_blank">{{ word }}</NuxtLInk>
+					<template v-else>{{ ' ' + word + ' ' }}</template>
+				</template>
 			</div>
 		</div>
 	</div>
@@ -28,7 +31,10 @@
 		</div>
 		<div class="message-data">
 			<div class="message-text">
-				{{ text }}
+				<template v-for="word of text.split(' ')">
+					<NuxtLink v-if="/^http(s|):\/\/(?:www\.)?[\w-]{1,}\.[A-Za-z]{2,}[\/?]{0,1}[\w-=&\/#.]*$/.test(word)" :href="word" :external="true" target="_blank">{{ word }}</NuxtLInk>
+					<template v-else>{{ word + ' ' }}</template>
+				</template>
 			</div>
 		</div>
 	</div>

From 63b780e5ab3e9a76ca4b620889ac02c15af66f2f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 2 Jun 2025 00:57:13 +0200
Subject: [PATCH 08/14] feat: implement basic markdown for messages

---
 components/Message.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 474b089..e7d9449 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -13,12 +13,7 @@
 					{{ messageDate }}
 				</span>
 			</div>
-			<div class="message-text">
-				<template v-for="word of text.split(' ')">
-					<NuxtLink v-if="/^http(s|):\/\/(?:www\.)?[\w-]{1,}\.[A-Za-z]{2,}[\/?]{0,1}[\w-=&\/#.]*$/.test(word)" :href="word" :external="true" target="_blank">{{ word }}</NuxtLInk>
-					<template v-else>{{ ' ' + word + ' ' }}</template>
-				</template>
-			</div>
+			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
 	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message">
@@ -30,17 +25,15 @@
 			</div>
 		</div>
 		<div class="message-data">
-			<div class="message-text">
-				<template v-for="word of text.split(' ')">
-					<NuxtLink v-if="/^http(s|):\/\/(?:www\.)?[\w-]{1,}\.[A-Za-z]{2,}[\/?]{0,1}[\w-=&\/#.]*$/.test(word)" :href="word" :external="true" target="_blank">{{ word }}</NuxtLInk>
-					<template v-else>{{ word + ' ' }}</template>
-				</template>
-			</div>
+			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import DOMPurify from 'dompurify';
+import { parseInline } from 'marked';
+
 const props = defineProps<{
 	class?: string,
 	img?: string | null,
@@ -81,6 +74,8 @@ console.log("message:", props.text);
 console.log("author:", props.username);
 
 onMounted(async () => {
+	const parsed = await parseInline(props.text, {gfm: true });
+	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] });
 	console.log("adding listeners")
 	await nextTick();
 	messageElement.value?.addEventListener("mouseenter", (e: Event) => {

From 200803321637a03475ead12355ba5dc01fa8aa58 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 2 Jun 2025 11:03:54 +0200
Subject: [PATCH 09/14] feat: add DOMPurify and marked packages

---
 package.json   |  2 ++
 pnpm-lock.yaml | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/package.json b/package.json
index 80a9ab4..b67a598 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
+    "dompurify": "^3.2.6",
+    "marked": "^15.0.12",
     "nuxt": "^3.17.0",
     "pinia": "^3.0.2",
     "pinia-plugin-persistedstate": "^4.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d4de9d..07816d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,12 @@ 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)))
+      dompurify:
+        specifier: ^3.2.6
+        version: 3.2.6
+      marked:
+        specifier: ^15.0.12
+        version: 15.0.12
       nuxt:
         specifier: ^3.17.0
         version: 3.17.0(@netlify/blobs@8.2.0)(@parcel/watcher@2.5.1)(@types/node@22.15.3)(db0@0.3.2)(eslint@9.25.1(jiti@2.4.2))(ioredis@5.6.1)(lightningcss@1.29.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.1)(terser@5.39.0)(typescript@5.8.3)(vite@6.3.3(@types/node@22.15.3)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1))(yaml@2.7.1)
@@ -1199,6 +1205,9 @@ packages:
   '@types/triple-beam@1.3.5':
     resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
@@ -2113,6 +2122,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -3092,6 +3104,11 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -6094,6 +6111,9 @@ snapshots:
 
   '@types/triple-beam@1.3.5': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/yauzl@2.10.3':
     dependencies:
       '@types/node': 22.15.3
@@ -7082,6 +7102,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -8170,6 +8194,8 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  marked@15.0.12: {}
+
   math-intrinsics@1.1.0: {}
 
   mdn-data@2.0.28: {}

From c7e7f33240d8e5661c77ad3417363bb4d44b6c9f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 2 Jun 2025 11:06:08 +0200
Subject: [PATCH 10/14] feat: add sanitized ref variable

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

diff --git a/components/Message.vue b/components/Message.vue
index e7d9449..3979a88 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -73,6 +73,8 @@ if (props.format == "12") {
 console.log("message:", props.text);
 console.log("author:", props.username);
 
+const sanitized = ref<string>();
+
 onMounted(async () => {
 	const parsed = await parseInline(props.text, {gfm: true });
 	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a"] });

From 76952922bfcb54ae687afd4909c50132b00f077e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 2 Jun 2025 11:40:57 +0200
Subject: [PATCH 11/14] feat: add tabbing for channels list, members list, and
 messages

---
 components/Channel.vue                            | 8 ++++----
 components/Message.vue                            | 4 ++--
 pages/servers/[serverId]/channels/[channelId].vue | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Channel.vue b/components/Channel.vue
index a41974a..1828641 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
-	<NuxtLink class="channel-list-link" :href="props.href">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
+	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners">
-	<NuxtLink class="channel-list-link" :href="props.href">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
+	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
diff --git a/components/Message.vue b/components/Message.vue
index 3979a88..64af1d9 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message">
+	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index f931863..31efe9b 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -26,7 +26,7 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<div id="members-container">
 			<div id="members-list">
-				<div class="member-item" v-for="member of members">
+				<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>

From 4b1f1266b053d33dabf7cee7df14a49aad4e4d0c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 2 Jun 2025 12:36:04 +0200
Subject: [PATCH 12/14] fix: type hinting

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

diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index c1fdc77..bb50f07 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/settings/user_settings/Account.vue
@@ -53,7 +53,7 @@ const saveChanges = async () => {
   try {
     const formData = new FormData()
 
-    const upload_field = document.getElementById("hidden-pfp-uploader")
+    const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader")
     if (upload_field.files?.length && upload_field.files.length > 0) {
       console.log(upload_field.files[0])
       formData.append("avatar", upload_field.files[0])

From acc4fa14b7846629165f1b360e22b2a0f171f0ff Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:10:42 +0200
Subject: [PATCH 13/14] feat: finish up the my account section for now

---
 components/Userpopup.vue                      |   9 +-
 components/settings/user_settings/Account.vue | 112 ++++++++++--------
 pages/settings.vue                            |  18 ---
 types/interfaces.ts                           |   2 +-
 4 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/components/Userpopup.vue b/components/Userpopup.vue
index 7381637..eaf7626 100644
--- a/components/Userpopup.vue
+++ b/components/Userpopup.vue
@@ -10,7 +10,7 @@
         {{ props.user.username || "username" }} - {{ props.user.pronouns || "un/defined" }} 
       </p>
       <div id="about-me">
-        <span>About me</span>
+        {{ props.user.about || "about me" }}
       </div>
     </div>
   </div>
@@ -74,8 +74,11 @@ const props = defineProps<{
 }
 
 #about-me {
-  margin-top: 4px;
-  padding: 4px;
+  background-color: #34200f;
+  border-radius: 12px;
+
+  margin-top: 32px;
+  padding: 16px;
   font-size: 16px;
 }
 </style>
\ No newline at end of file
diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index bb50f07..6438946 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/settings/user_settings/Account.vue
@@ -2,21 +2,24 @@
   <div>
     <input id="hidden-pfp-uploader" type="file" accept="image/*" style="display: none;">
     <h1>My Account</h1>
-    
+
     <div class="profile-and-user-data-fields">
       <div class="user-data-fields">
         <h3 class="subtitle">AVATAR</h3>
         <Button text="Change Avatar" :callback="changeAvatar"></Button>
-        <Button text="Remove Avatar" :callback="removeAvatar" style="margin-left: 10px; background-color: grey;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar"
+          style="margin-left: 10px; background-color: grey;"></Button>
         <h3 class="subtitle">DISPLAY NAME</h3>
-        <input type="text" v-model="user.display_name" placeholder="Enter display name" />
+        <input class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
         <h3 class="subtitle">USERNAME</h3>
-        <input type="text" v-model="user.username" placeholder="Enter username" />
+        <input class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
         <h3 class="subtitle">PRONOUNS</h3>
-        <input type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
+        <input class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
         <h3 class="subtitle">ABOUT ME</h3>
-        <p>{{ user?.about_me || "TBD" }}</p>
+        <input class="profile-data-input" type="text" v-model="user.about" placeholder="About You" />
 
+        <br>
+        <br>
         <Button text="Save Changes" :callback="saveChanges"></Button>
       </div>
       <Userpopup :user=user_me class="profile"></Userpopup>
@@ -29,10 +32,10 @@
     <br>
 
     <h2>Password (and eventually authenticator)</h2>
-    <Button text="Reset Password (tbd)" :callback=resetPassword></Button> 
+    <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
 
     <h2>Account Deletion</h2>
-    <ButtonScary text="Delete Account (tbd)" :callback=deleteAccount></ButtonScary> 
+    <ButtonScary text="Delete Account (tbd)" :callback=deleteAccount></ButtonScary>
 
   </div>
 </template>
@@ -50,36 +53,33 @@ const user = user_me!
 let new_pfp_file: any = null
 
 const saveChanges = async () => {
+  const formData = new FormData()
+  
+  if (new_pfp_file !== null) {
+    formData.append("avatar", new_pfp_file)
+  }
+  
+  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 {
-    const formData = new FormData()
-
-    const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader")
-    if (upload_field.files?.length && upload_field.files.length > 0) {
-      console.log(upload_field.files[0])
-      formData.append("avatar", upload_field.files[0])
-    }
-    
-    const bytes = new TextEncoder().encode(JSON.stringify({
-        display_name: user.display_name,
-        username: user.username,
-        pronouns: user.pronouns,
-    }));
-    formData.append("json", new Blob([bytes], { type: "application/json" }));
-    
-    await fetchWithApi("/me", {
-      method: "PATCH",
+    await fetchWithApi('/me', {
+      method: 'PATCH',
       body: formData
     })
 
-    user_reference = Object.assign({}, user_me)
-    alert("success!!")
+    user_reference = Object.assign({}, await fetchUser())
+    alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
-      const errorData = await error?.response?.json()
-
-      alert(`error ${error?.response?.status} met whilst trying to update profile info\n${errorData}`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
     }
-  }  
+  }
 };
 
 
@@ -89,23 +89,28 @@ const removeAvatar = async () => {
 }
 
 const changeAvatar = async () => {
-  const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader")
-  
-  // upload_field.onchange = async(e) => {
-  //   console.log(upload_field.files)
-  //   if (upload_field.files?.length && upload_field.files.length > 0) {
-  //     const file = upload_field.files[0];
-  //     if (!file) return;
+  let input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
 
-  //     const reader = new FileReader();
-  //     reader.onload = (e) => {
-  //       user.avatar = e?.target?.result;
-  //     };
-  //     reader.readAsDataURL(file);
-  //   }
-  // }
+  input.onchange = async (e) => {
+    if (input.files?.length && input.files.length > 0) {
+      const file = input.files[0];
+      if (!file) return;
 
-  upload_field?.click()
+      new_pfp_file = file
+      
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result && typeof e.target.result === 'string') {
+          user.avatar = e.target.result;
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  input.click()
 }
 
 const resetPassword = async () => {
@@ -130,7 +135,8 @@ const deleteAccount = async () => {
   display: flex;
 }
 
-.profile-container, .user-data-fields {
+.profile-container,
+.user-data-fields {
   min-width: 350px;
 }
 
@@ -139,4 +145,16 @@ const deleteAccount = async () => {
   font-weight: 800;
   margin: 12px 0;
 }
+
+.profile-data-input {
+  min-width: 300px;
+  margin: 2px;
+  padding: 2px 10px;
+  height: 40px;
+  font-size: 16px;
+  border-radius: 8px;
+  border: none;
+  color: white;
+  background-color: #54361b;
+}
 </style>
\ No newline at end of file
diff --git a/pages/settings.vue b/pages/settings.vue
index 60c4265..0c2fefe 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -69,24 +69,6 @@ const settingsCategories = {
       { display_name: "Language", page_data: Language },
     ]
   },
-  app_settings2: {
-    display_name: "App Settings",
-    pages: [
-      { display_name: "Appearance", page_data: Appearance },
-      { display_name: "Notifications", page_data: Notifications },
-      { display_name: "Keybinds", page_data: Keybinds },
-      { display_name: "Language", page_data: Language },
-    ]
-  },
-  app_settings3: {
-    display_name: "App Settings",
-    pages: [
-      { display_name: "Appearance", page_data: Appearance },
-      { display_name: "Notifications", page_data: Notifications },
-      { display_name: "Keybinds", page_data: Keybinds },
-      { display_name: "Language", page_data: Language },
-    ]
-  },
 };
 
 const categories = Object.values(settingsCategories);
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 04da39a..b5b1995 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -59,7 +59,7 @@ export interface UserResponse {
 	display_name: string | null,
 	avatar: string | null,
 	pronouns: string | null,
-	about_me: string | null,
+	about: string | null,
 	email?: string,
 	email_verified?: boolean
   }

From a38589615b7fe13efd36ca302a1410c05bc32718 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:14:08 +0200
Subject: [PATCH 14/14] chore: finnish merge

---
 components/settings/user_settings/Account.vue | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index f8e15bc..6438946 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/settings/user_settings/Account.vue
@@ -53,24 +53,23 @@ const user = user_me!
 let new_pfp_file: any = null
 
 const saveChanges = async () => {
+  const formData = new FormData()
+  
+  if (new_pfp_file !== null) {
+    formData.append("avatar", new_pfp_file)
+  }
+  
+  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 {
-    const formData = new FormData()
-
-    const upload_field = document.getElementById("hidden-pfp-uploader")
-    if (upload_field.files?.length && upload_field.files.length > 0) {
-      console.log(upload_field.files[0])
-      formData.append("avatar", upload_field.files[0])
-    }
-    
-    const bytes = new TextEncoder().encode(JSON.stringify({
-        display_name: user.display_name,
-        username: user.username,
-        pronouns: user.pronouns,
-    }));
-    formData.append("json", new Blob([bytes], { type: "application/json" }));
-    
-    await fetchWithApi("/me", {
-      method: "PATCH",
+    await fetchWithApi('/me', {
+      method: 'PATCH',
       body: formData
     })