From 25cd9a397e5ef5a7cb9396fe5e0ad1d7ec9e3fd7 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 20:05:31 +0200
Subject: [PATCH 01/16] feat: implement caching for hash function

---
 utils/generateIrcColor.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/utils/generateIrcColor.ts b/utils/generateIrcColor.ts
index 24d4946..03a30e7 100644
--- a/utils/generateIrcColor.ts
+++ b/utils/generateIrcColor.ts
@@ -5,11 +5,9 @@ let h64: CallableFunction;
 	h64 = (await xxhash()).h64;
 })();
 
-export default (seed: string): string => {
-	const lightness = 50
-	
-	// this should probably be cached eventually
-	const idHash = h64(seed)
+export default (seed: string, saturation: number = 100, lightness: number = 50): string => {
+	const idHash = useState(`h64Hash-${seed}`, () => h64(seed))
+	const hashValue: bigint = idHash.value
 
-	return `hsl(${idHash % 360n}, 100%, ${lightness}%)`
+	return `hsl(${hashValue % 360n}, ${saturation}%, ${lightness}%)`
 }
\ No newline at end of file

From b319a06749199d4baab0e9c085592b33ba0b6bec Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:36:41 +0200
Subject: [PATCH 02/16] feat: import function from JOHN OZBAY

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

diff --git a/utils/isCanvasBlocked.ts b/utils/isCanvasBlocked.ts
new file mode 100644
index 0000000..3bd191e
--- /dev/null
+++ b/utils/isCanvasBlocked.ts
@@ -0,0 +1,50 @@
+//
+// Canvas Blocker &								  
+// Firefox privacy.resistFingerprinting Detector. 
+// (c) 2018 // JOHN OZBAY // CRYPT.EE 			  
+// MIT License
+//
+export default () => {
+	// create a 1px image data
+	var blocked = false;
+	var canvas = document.createElement("canvas");
+	var ctx = canvas.getContext("2d");
+	
+	// some blockers just return an undefined ctx. So let's check that first. 
+	if (ctx) {
+		var imageData = ctx.createImageData(1,1);
+		var originalImageData  = imageData.data;
+
+		// set pixels to RGB 128
+		originalImageData[0]=128; 
+		originalImageData[1]=128; 
+		originalImageData[2]=128; 
+		originalImageData[3]=255;
+		
+		// set this to canvas
+		ctx.putImageData(imageData,1,1); 
+		
+		try {
+			// now get the data back from canvas.
+			var checkData = ctx.getImageData(1, 1, 1, 1).data;
+
+			// If this is firefox, and privacy.resistFingerprinting is enabled,
+			// OR a browser extension blocking the canvas, 
+			// This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
+
+			// so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
+			if (originalImageData[0] !== checkData[0] && originalImageData[1] !== checkData[1]) {
+				blocked = true;
+				console.log("Canvas is blocked. Will display warning.");
+			}
+		} catch (error) {
+			// some extensions will return getImageData null. this is to account for that.
+			blocked = true;
+			console.log("Canvas is blocked. Will display warning.");
+		}
+	} else {
+		blocked = true;
+		console.log("Canvas is blocked. Will display warning.");
+	}
+	return blocked;
+}
\ No newline at end of file

From f4ddcf9d8db61d4c4704514de43cbe186fde9ac8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:37:45 +0200
Subject: [PATCH 03/16] fix: prop

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

diff --git a/types/props.ts b/types/props.ts
index fe2b049..9a8e642 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -3,7 +3,7 @@ import type { MessageResponse, UserResponse } from "./interfaces";
 export interface MessageProps {
 	class?: string,
 	img?: string | null,
-	author?: UserResponse
+	author: UserResponse
 	text: string,
 	timestamp: number,
 	format: "12" | "24",

From f98e8c611092e747e267afd029cf87eeebf21cca Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:39:00 +0200
Subject: [PATCH 04/16] feat: implement generic <Avatar> component

---
 components/Avatar.vue         | 37 ++++++++++++++++++++++++++++++++++
 components/User/UserEntry.vue |  8 +++++---
 components/User/UserPopup.vue |  3 +--
 layouts/client.vue            |  2 +-
 utils/generateDefaultIcon.ts  | 38 +++++++++++++++++++++++++++++++++++
 5 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 components/Avatar.vue
 create mode 100644 utils/generateDefaultIcon.ts

diff --git a/components/Avatar.vue b/components/Avatar.vue
new file mode 100644
index 0000000..368316c
--- /dev/null
+++ b/components/Avatar.vue
@@ -0,0 +1,37 @@
+<template>
+	<Icon v-if="canvasBlocked"
+		name="lucide:user" />
+	<NuxtImg v-else 
+		:src="displayAvatar"
+		:alt="displayName" />
+</template>
+
+<script lang="ts" setup>
+import { NuxtImg } from '#components';
+import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+	user?: UserResponse,
+	member?: GuildMemberResponse,
+}>();
+
+
+let displayName: string
+let displayAvatar: string
+let canvasBlocked = false
+
+const user = props.user || props.member?.user
+
+if (user) {
+	displayName = props.member?.nickname
+						|| user.display_name
+						|| user.username
+	
+	if (user.avatar) {
+		displayAvatar = user.avatar
+	} else {
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	}
+}
+
+</script>
\ No newline at end of file
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index b463759..b539f2c 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -1,8 +1,8 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
-        <Icon v-else class="user-avatar" name="lucide:user" />
-        <span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
+        <Avatar :user="props.user" class="user-avatar"/>
+
+        <span class="user-display-name">{{ displayName }}</span>
 	</NuxtLink>
 </template>
 
@@ -12,6 +12,8 @@ import type { UserResponse } from '~/types/interfaces';
 const props = defineProps<{
     user: UserResponse
 }>();
+
+const displayName = props.user.display_name || props.user.username
 </script>
 
 <style>
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index a3a15cb..f43d6d1 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="profile-popup">
-    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
-    <Icon v-else id="avatar" name="lucide:user" />
+    <Avatar :user="props.user" id="avatar"/>
 
     <div id="cover-color"></div>
     <div id="main-body">
diff --git a/layouts/client.vue b/layouts/client.vue
index f76b285..43c769d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -19,7 +19,7 @@
 				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 						<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-						<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+						<NuxtImg v-else class="sidebar-icon" :src="generateDefaultIcon(guild.name, guild.uuid)" :alt="guild.name"/>
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
new file mode 100644
index 0000000..0b05913
--- /dev/null
+++ b/utils/generateDefaultIcon.ts
@@ -0,0 +1,38 @@
+export default (name: string, seed: string): string => {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (canvas && ctx) {
+		canvas.width = 256;
+		canvas.height = 256;
+
+		// get the first char from every word in the guild name
+		let previewName = "";
+		if (name.length > 3) {
+			let guildName: string[] = name.split(' ')
+			for (let i = 0; i < 3; i ++) {
+				if (guildName.length > i) {
+					previewName += guildName[i].charAt(0)
+				} else {
+					break
+				}
+			}
+		} else {
+			previewName = name
+		}
+
+		// fill background using seeded colour
+		ctx.fillStyle = generateIrcColor(seed, 50)
+		ctx.fillRect(0, 0, 256, 256)
+
+		ctx.fillStyle = 'white'
+		ctx.textAlign = 'center'
+		ctx.textBaseline = 'middle'
+		ctx.font = 'bold 96px Arial, Helvetica, sans-serif'
+		// 136 isn't actually centered, but it *looks* centered
+		ctx.fillText(previewName, 128, 136)
+
+		return canvas.toDataURL("image/png");
+	}
+
+	return "https://tenor.com/view/dame-da-ne-guy-kiryukazuma-kiryu-yakuza-yakuza-0-gif-14355451116903905918"
+}
\ No newline at end of file

From e7558d9a95983db95183df961420c6631915908d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:39:18 +0200
Subject: [PATCH 05/16] refactor: move MemberEntry

---
 components/{Member => Guild}/MemberEntry.vue      | 3 +--
 pages/servers/[serverId]/channels/[channelId].vue | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)
 rename components/{Member => Guild}/MemberEntry.vue (78%)

diff --git a/components/Member/MemberEntry.vue b/components/Guild/MemberEntry.vue
similarity index 78%
rename from components/Member/MemberEntry.vue
rename to components/Guild/MemberEntry.vue
index 1ea4170..bd4302a 100644
--- a/components/Member/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
-        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
-        <Icon v-else class="member-avatar" name="lucide:user" />
+        <Avatar :member="props.member" class="member-avatar"/>
         <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index d9f6d97..8915c72 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
-import MemberEntry from "~/components/Member/MemberEntry.vue";
+import MemberEntry from "~/components/Guild/MemberEntry.vue";
 import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 const route = useRoute();

From cbc010943c788c6836577568a4ff6981dc7b1c69 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:39:42 +0200
Subject: [PATCH 06/16] chore: minor code cleanup

---
 components/Me/DirectMessagesSidebar.vue |  2 +-
 components/Message.vue                  | 30 +++++++++++--------------
 components/MessageArea.vue              |  1 +
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index cfe07fd..7a92d39 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -13,7 +13,7 @@
 			<VerticalSpacer />
 			
 			<div id="direct-message-list">
-				<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+				<UserEntry v-for="user of friends" :user="user"
 						:href="`/me/${user.uuid}`"/> 
 			</div>
 		</div>
diff --git a/components/Message.vue b/components/Message.vue
index 71f0e9c..166f99d 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -4,22 +4,16 @@
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
-				width="1.5em"
-				height="1.5em"
-				viewBox="0 0 151.14355 87.562065"
-				version="1.1"
-				id="svg1"
+				width="1.5em" height="1.5em"
+				viewBox="0 0 151.14355 87.562065" version="1.1" id="svg1"
 				xmlns="http://www.w3.org/2000/svg"
 				xmlns:svg="http://www.w3.org/2000/svg"
 				style="overflow: visible;">
-				<defs
-					id="defs1" />
-				<g
-					id="layer1"
+				<defs id="defs1" />
+				<g id="layer1"
 					transform="translate(40,-35)">
-					<g
-					id="g3"
-					transform="translate(-35,-20)">
+					<g id="g3"
+						transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
 						d="m 120.02168,87.850978 100.76157,2.4e-5"
@@ -32,16 +26,17 @@
 				</g>
 			</svg>
 		</div>
-		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
-			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
+		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
+			:author="props.replyMessage.user.display_name || props.replyMessage.user.username"
+			:text="props.replyMessage?.message"
+			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
-			<Icon v-else name="lucide:user" class="message-author-avatar" />
+			<Avatar :user="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
 				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
-					{{ author?.display_name || author?.username }}
+					{{ displayName }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@@ -85,6 +80,7 @@ const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 const currentDate: Date = new Date()
+const displayName = props.author?.display_name || props.author?.username
 
 console.log("[MSG] message to render:", props.message);
 console.log("author:", props.author);
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 9a8f17f..aadc07c 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -42,6 +42,7 @@
 <script lang="ts" setup>
 import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
+import { generateIrcColor } from '#imports';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 

From dfec4c9200dc0d1522b50074c44a026a073de791 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:46:18 +0200
Subject: [PATCH 07/16] fix: properly support blocked canvases for avatars

---
 components/Avatar.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/Avatar.vue b/components/Avatar.vue
index 368316c..b7c4f63 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -1,9 +1,10 @@
 <template>
-	<Icon v-if="canvasBlocked"
-		name="lucide:user" />
-	<NuxtImg v-else 
+	<NuxtImg v-if="displayAvatar" 
 		:src="displayAvatar"
 		:alt="displayName" />
+	<Icon v-else
+		name="lucide:user"
+		:alt="displayName" />
 </template>
 
 <script lang="ts" setup>
@@ -17,8 +18,7 @@ const props = defineProps<{
 
 
 let displayName: string
-let displayAvatar: string
-let canvasBlocked = false
+let displayAvatar: string | null
 
 const user = props.user || props.member?.user
 
@@ -29,8 +29,10 @@ if (user) {
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
-	} else {
+	} else if (!isCanvasBlocked()){
 		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
 	}
 }
 

From b81cd2b73a9a487bd8047229a4bcd225666b991b Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:55:10 +0200
Subject: [PATCH 08/16] feat: improve guild icon fallbacks for blocked canvases

---
 layouts/client.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 43c769d..4ede7ab 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -19,7 +19,10 @@
 				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 						<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-						<NuxtImg v-else class="sidebar-icon" :src="generateDefaultIcon(guild.name, guild.uuid)" :alt="guild.name"/>
+						<NuxtImg v-else-if="!blockedCanvas" class="sidebar-icon" :src="generateDefaultIcon(guild.name, guild.uuid)" :alt="guild.name"/>
+						<Icon v-else name="lucide:server"
+							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
+							class="sidebar-icon white" :alt="guild.name" />
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
@@ -53,6 +56,8 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
+const blockedCanvas = isCanvasBlocked()
+
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");

From 890c479f2c9b8e86f1ec62698845cfa85449c5d8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 21:56:57 +0200
Subject: [PATCH 09/16] style: minor style changes

---
 layouts/client.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 4ede7ab..d2ca6ce 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -18,11 +18,17 @@
 				<VerticalSpacer />
 				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-						<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-						<NuxtImg v-else-if="!blockedCanvas" class="sidebar-icon" :src="generateDefaultIcon(guild.name, guild.uuid)" :alt="guild.name"/>
+						<NuxtImg v-if="guild.icon"
+							class="sidebar-icon"
+							:alt="guild.name"
+							:src="guild.icon" />
+						<NuxtImg v-else-if="!blockedCanvas"
+							class="sidebar-icon"
+							:alt="guild.name"
+							:src="generateDefaultIcon(guild.name, guild.uuid)" />
 						<Icon v-else name="lucide:server"
-							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
-							class="sidebar-icon white" :alt="guild.name" />
+							class="`sidebar-icon ${generateIrcColor(guild.uuid, 50)}``"
+							:alt="guild.name" />
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />

From 26243a8cd69b140fbd2d2910828081fd659b7ee0 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 14 Jul 2025 22:27:29 +0200
Subject: [PATCH 10/16] fix: colours not working for guild canvas-less fallback

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

diff --git a/layouts/client.vue b/layouts/client.vue
index d2ca6ce..112440d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -27,7 +27,8 @@
 							:alt="guild.name"
 							:src="generateDefaultIcon(guild.name, guild.uuid)" />
 						<Icon v-else name="lucide:server"
-							class="`sidebar-icon ${generateIrcColor(guild.uuid, 50)}``"
+							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
+							class="sidebar-icon"
 							:alt="guild.name" />
 					</NuxtLink>
 				</div>

From 186d3c7a0a6b4479d936151c38e839c8ead3796a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:25:52 +0200
Subject: [PATCH 11/16] feat: add preferred font field to themes

---
 app.vue                              |  2 +-
 public/themes/ash.css                | 11 ++++++-----
 public/themes/dark.css               |  1 +
 public/themes/description.css        |  1 +
 public/themes/light.css              | 11 ++++++-----
 public/themes/rainbow-capitalism.css |  3 ++-
 utils/generateDefaultIcon.ts         |  3 ++-
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app.vue b/app.vue
index 9c8fb1c..59d006d 100644
--- a/app.vue
+++ b/app.vue
@@ -65,7 +65,7 @@ useHead({
 <style>
 html,
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--preferred-font);
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);
diff --git a/public/themes/ash.css b/public/themes/ash.css
index d1f09c8..b9c349d 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -12,15 +12,16 @@
 
     --padding-color: #e0e0e0;
 
-	--sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 100%;
-    
 	--primary-color: #f07028;
 	--primary-highlighted-color: #f28f4b;
 	--secondary-color: #683820;
 	--secondary-highlighted-color: #885830;
 	--accent-color: #a04b24;
 	--accent-highlighted-color: #b86038;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 6160194..3927da7 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,4 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index f3738a5..11d5665 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -24,6 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
diff --git a/public/themes/light.css b/public/themes/light.css
index d11f5f5..6afe702 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -11,11 +11,6 @@
 	--chatbox-background-color: #dfdbd6;
 
     --padding-color: #484848;
-
-    --sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 100%;
     
     --primary-color: #df5f0b;
     --primary-highlighted-color: #ef6812;
@@ -23,4 +18,10 @@
     --secondary-highlighted-color: #f8b68a;
     --accent-color: #e68b4e;
     --accent-highlighted-color: #f69254;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 1a5197b..d2a835b 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -19,10 +19,11 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-    --sidebar-width: 2.5em;
+	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
index 0b05913..6313b75 100644
--- a/utils/generateDefaultIcon.ts
+++ b/utils/generateDefaultIcon.ts
@@ -27,7 +27,8 @@ export default (name: string, seed: string): string => {
 		ctx.fillStyle = 'white'
 		ctx.textAlign = 'center'
 		ctx.textBaseline = 'middle'
-		ctx.font = 'bold 96px Arial, Helvetica, sans-serif'
+		const preferredFont = document.documentElement.style.getPropertyValue("--preferred-font")
+		ctx.font = `bold 96px ${preferredFont}, Arial, Helvetica, sans-serif`
 		// 136 isn't actually centered, but it *looks* centered
 		ctx.fillText(previewName, 128, 136)
 

From 64131e6f9ca601260528309f34aa18a15129cf83 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:36:54 +0200
Subject: [PATCH 12/16] fix: set back font defaults

---
 app.vue                              | 2 +-
 public/themes/ash.css                | 2 +-
 public/themes/dark.css               | 2 +-
 public/themes/description.css        | 2 +-
 public/themes/light.css              | 2 +-
 public/themes/rainbow-capitalism.css | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app.vue b/app.vue
index 59d006d..94244e0 100644
--- a/app.vue
+++ b/app.vue
@@ -65,7 +65,7 @@ useHead({
 <style>
 html,
 body {
-  font-family: var(--preferred-font);
+  font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);
diff --git a/public/themes/ash.css b/public/themes/ash.css
index b9c349d..0d0491a 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 3927da7..b026d21 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index 11d5665..b33fe32 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -24,7 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
diff --git a/public/themes/light.css b/public/themes/light.css
index 6afe702..71c7055 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index d2a835b..0b4db7b 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -23,7 +23,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);

From 63dbfa2a0d2ef9ccfe239b2cc263eac4ce25af97 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:44:41 +0200
Subject: [PATCH 13/16] fix: ACTUALLY fix font theming

---
 public/themes/ash.css                | 2 +-
 public/themes/dark.css               | 2 +-
 public/themes/description.css        | 2 +-
 public/themes/light.css              | 2 +-
 public/themes/rainbow-capitalism.css | 2 +-
 utils/generateDefaultIcon.ts         | 3 ++-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/themes/ash.css b/public/themes/ash.css
index 0d0491a..7a6b7a4 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index b026d21..59099c7 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index b33fe32..57ade55 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -24,7 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
diff --git a/public/themes/light.css b/public/themes/light.css
index 71c7055..0b24214 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 0b4db7b..c1c8246 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -23,7 +23,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
index 6313b75..0260830 100644
--- a/utils/generateDefaultIcon.ts
+++ b/utils/generateDefaultIcon.ts
@@ -27,7 +27,8 @@ export default (name: string, seed: string): string => {
 		ctx.fillStyle = 'white'
 		ctx.textAlign = 'center'
 		ctx.textBaseline = 'middle'
-		const preferredFont = document.documentElement.style.getPropertyValue("--preferred-font")
+		const root = document.documentElement;
+		const preferredFont = getComputedStyle(root).getPropertyValue("--preferred-font");
 		ctx.font = `bold 96px ${preferredFont}, Arial, Helvetica, sans-serif`
 		// 136 isn't actually centered, but it *looks* centered
 		ctx.fillText(previewName, 128, 136)

From 32910d2077f8a993448294d056c9ffd9dbbc91c8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 01:13:10 +0200
Subject: [PATCH 14/16] feat: improve theming

---
 components/Avatar.vue                |  9 ++++++++-
 components/Message.vue               |  1 -
 components/User/UserEntry.vue        |  1 -
 layouts/client.vue                   | 21 +++++++++++++--------
 public/themes/ash.css                |  3 ++-
 public/themes/dark.css               |  8 ++++++--
 public/themes/description.css        |  2 +-
 public/themes/light.css              |  2 +-
 public/themes/rainbow-capitalism.css |  2 +-
 9 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/components/Avatar.vue b/components/Avatar.vue
index b7c4f63..20f91c3 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -1,5 +1,6 @@
 <template>
 	<NuxtImg v-if="displayAvatar" 
+		id="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
 	<Icon v-else
@@ -36,4 +37,10 @@ if (user) {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+#display-avatar {
+	border-radius: var(--pfp-radius);
+}
+</style>
\ No newline at end of file
diff --git a/components/Message.vue b/components/Message.vue
index 166f99d..ce726fb 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -225,7 +225,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
-	border-radius: 50%;
 }
 
 .left-column {
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index b539f2c..1817816 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -37,6 +37,5 @@ const displayName = props.user.display_name || props.user.username
 .user-avatar {
     width: 2.3em;
     height: 2.3em;
-    border-radius: 50%;
 }
 </style>
diff --git a/layouts/client.vue b/layouts/client.vue
index 112440d..2ed9e8c 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -19,16 +19,16 @@
 				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 						<NuxtImg v-if="guild.icon"
-							class="sidebar-icon"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="guild.icon" />
 						<NuxtImg v-else-if="!blockedCanvas"
-							class="sidebar-icon"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="generateDefaultIcon(guild.name, guild.uuid)" />
 						<Icon v-else name="lucide:server"
 							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
-							class="sidebar-icon"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name" />
 					</NuxtLink>
 				</div>
@@ -259,8 +259,8 @@ function createDropdown() {
 	display: flex;
 	flex-direction: column;
 
-	padding-left: .25em;
-	padding-right: .25em;
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
 	padding-top: .5em;
 	
 	background: var(--optional-sidebar-background);
@@ -281,6 +281,7 @@ function createDropdown() {
 #left-column-middle {
 	overflow-y: scroll;
 	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
 }
 
 #middle-left-column {
@@ -294,12 +295,16 @@ function createDropdown() {
 }
 
 #home-button {
-	height: var(--sidebar-width);
+	height: var(--sidebar-icon-width);
+}
+
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
 }
 
 .sidebar-icon {
-	width: var(--sidebar-width);
-	height: var(--sidebar-width);
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
 }
 
 .sidebar-bottom-buttons {
diff --git a/public/themes/ash.css b/public/themes/ash.css
index 7a6b7a4..94f5e85 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -22,6 +22,7 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--guild-icon-radius: 20%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 59099c7..a228889 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -19,9 +19,13 @@
 	--accent-color: #b35719;
 	--accent-highlighted-color: #c76a2e;
 
-	--sidebar-width: 2.5em;
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--guild-icon-radius: 15%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index 57ade55..e30025f 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -23,7 +23,7 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 
     --optional-body-background: ; /* background element for the body */
diff --git a/public/themes/light.css b/public/themes/light.css
index 0b24214..556b64d 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -22,6 +22,6 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index c1c8246..ca73e1f 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -22,7 +22,7 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 
     /* --optional-body-background: background */

From 07fa883a14285cac89a38b6ce8e8a60d7eadd50c Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 15 Jul 2025 11:31:11 +0200
Subject: [PATCH 15/16] feat: change Avatar id to class

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

diff --git a/components/Avatar.vue b/components/Avatar.vue
index 20f91c3..b2da51b 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
 	<NuxtImg v-if="displayAvatar" 
-		id="display-avatar"
+		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
 	<Icon v-else
@@ -40,7 +40,7 @@ if (user) {
 </script>
 
 <style scoped>
-#display-avatar {
+.display-avatar {
 	border-radius: var(--pfp-radius);
 }
-</style>
\ No newline at end of file
+</style>

From 23819602779db640cc9855e487905086a4df0375 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 04:51:18 +0200
Subject: [PATCH 16/16] fix: incorrect merge

---
 components/Message.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/Message.vue b/components/Message.vue
index 536487c..919120d 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -69,9 +69,6 @@ import type { MessageProps } from '~/types/props';
 import generateIrcColor from '~/utils/generateIrcColor';
 import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
-=========
-import generateIrcColor from '~/utils/generateIrcColor';
->>>>>>>>> Temporary merge branch 2
 
 const props = defineProps<MessageProps>();