Merge branch 'main' into password-reset

app.vue

@@ -6,9 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
-import { render } from 'vue';
-
 const banner = useState("banner", () => false);
 
 onMounted(() => {
@@ -65,7 +62,7 @@ useHead({
 <style>
 html,
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);

components/Avatar.vue

@@ -0,0 +1,44 @@
+<template>
+	<NuxtImg v-if="displayAvatar" 
+		class="display-avatar"
+		:src="displayAvatar"
+		:alt="displayName" />
+	<Icon v-else
+		name="lucide:user"
+		: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 | null
+
+const user = props.user || props.member?.user
+
+if (user) {
+	displayName = getDisplayName(user, props.member)
+	
+	if (user.avatar) {
+		displayAvatar = user.avatar
+	} else if (!isCanvasBlocked()){
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
+	}
+}
+
+</script>
+
+<style scoped>
+.display-avatar {
+	border-radius: var(--pfp-radius);
+}
+</style>

components/Guild/MemberEntry.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
-        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
-        <Icon v-else class="member-avatar" name="lucide:user" />
-        <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
+        <Avatar :member="props.member" class="member-avatar"/>
+        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>

components/Me/DirectMessagesSidebar.vue

@@ -6,14 +6,14 @@
 			</div>
 			<VerticalSpacer />
 
-			<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
+			<NuxtLink class="user-item" :href="`/me`" tabindex="0">
 				<Icon class="user-avatar" name="lucide:user" />
 				<span class="user-display-name">Friends</span>
 			</NuxtLink>
 			<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>

components/Me/FriendsList.vue

@@ -17,7 +17,7 @@
 		</div>
 
 		<div v-else>
-			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+			<UserEntry v-for="user of friends" :user="user" :name="getDisplayName(user)"
 			:href="`/me/${user.uuid}`"/> 
 		</div>
 	</div>
@@ -26,7 +26,9 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = await fetchFriends()
+const friends = await fetchFriends().then((response) => {
+	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
+})
 
 const props = defineProps<{
     variant: string

components/Message.vue

@@ -4,21 +4,13 @@
 			: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"
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:svg="http://www.w3.org/2000/svg"
+				width="1.5em" height="1.5em"
+				viewBox="0 0 150 87.5" version="1.1" id="svg1"
 				style="overflow: visible;">
-				<defs
-					id="defs1" />
-				<g
-					id="layer1"
+				<defs id="defs1" />
+				<g id="layer1"
 					transform="translate(40,-35)">
-					<g
-					id="g3"
+					<g id="g3"
 						transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
@@ -32,16 +24,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="getDisplayName(props.replyMessage.user)"
+			: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">
-					{{ author?.display_name || author?.username }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
+					{{ getDisplayName(props.author) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@@ -228,7 +221,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
-	border-radius: 50%;
 }
 
 .left-column {

components/MessageArea.vue

@@ -1,12 +1,13 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
 				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
 				:message="message" :is-reply="message.reply_to"
+				:author-color="`${generateIrcColor(message.user.uuid)}`"
 				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
@@ -41,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 }>();
 

components/Settings/AppSettings/index.ts

@@ -0,0 +1,11 @@
+import Appearance from './Appearance.vue';
+import Notifications from './Notifications.vue';
+import Keybinds from './Keybinds.vue';
+import Language from './Language.vue';
+
+export {
+	Appearance,
+	Notifications,
+	Keybinds,
+	Language,
+}

components/Settings/UserSettings/index.ts

@@ -0,0 +1,13 @@
+import Profile from './Profile.vue';
+import Account from './Account.vue';
+import Privacy from './Privacy.vue';
+import Devices from './Devices.vue';
+import Connections from './Connections.vue';
+
+export {
+	Profile,
+	Account,
+	Privacy,
+	Devices,
+	Connections,
+}

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">{{ getDisplayName(props.user) }}</span>
 	</NuxtLink>
 </template>
 
@@ -12,6 +12,7 @@ import type { UserResponse } from '~/types/interfaces';
 const props = defineProps<{
     user: UserResponse
 }>();
+
 </script>
 
 <style>
@@ -35,6 +36,5 @@ const props = defineProps<{
 .user-avatar {
     width: 2.3em;
     height: 2.3em;
-    border-radius: 50%;
 }
 </style>

components/User/UserPopup.vue

@@ -1,12 +1,11 @@
 <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">
       <p id="display-name">
-        <strong>{{ props.user.display_name }}</strong>
+        <strong>{{ getDisplayName(props.user) }}</strong>
       </p>
       <p id="username-and-pronouns">
         {{ props.user.username }}

composables/api.ts

@@ -33,8 +33,13 @@ export const useApi = () => {
 		return await fetchWithApi(`/users/${userId}`);
 	}
 	
-	async function fetchFriends(): Promise<UserResponse[] | undefined> {
-		return await fetchWithApi('/me/friends')
+	async function fetchFriends(): Promise<UserResponse[]> {
+		const response = await fetchWithApi('/me/friends')
+		if (Array.isArray(response)) {
+			return response
+		} else {
+			return []
+		}
 	}
 
 	async function addFriend(username: string): Promise<void> {

layouts/client.vue

@@ -10,25 +10,37 @@
 		</div>
 		<div id="page-content">
 			<div id="left-column">
-				<div id="left-column-top">
+				<div class="left-column-segment">
 					<NuxtLink id="home-button" href="/me">
 						<img class="sidebar-icon" src="/public/icon.svg"/>
 					</NuxtLink>
-					<div id="servers-list">
+				</div>
+				<VerticalSpacer />
+				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-							<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-							<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+						<NuxtImg v-if="guild.icon"
+							class="sidebar-icon guild-icon"
+							:alt="guild.name"
+							:src="guild.icon" />
+						<NuxtImg v-else-if="!blockedCanvas"
+							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 guild-icon"
+							:alt="guild.name" />
 					</NuxtLink>
 				</div>
-				</div>
-				<div id="left-column-bottom">
+				<VerticalSpacer />
+				<div class="left-column-segment">
 					<div ref="createButtonContainer">
-						<button id="create-button" @click.prevent="createDropdown">
-							<Icon id="create-icon" name="lucide:square-plus" />
+						<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
+							<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
 						</button>
 					</div>
-					<NuxtLink id="settings-menu" href="/settings">
-						<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
+					<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
+						<Icon name="lucide:settings" alt="Settings menu" />
 					</NuxtLink>
 				</div>
 			</div>
@@ -42,6 +54,7 @@ import { ModalBase } from '#components';
 import { render } from 'vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
 const loading = useState("loading", () => false);
@@ -50,6 +63,8 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
+const blockedCanvas = isCanvasBlocked()
+
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
@@ -112,7 +127,7 @@ const options = [
 				h("input", {
 					id: "guild-name-input",
 					type: "text",
-					placeholder: `${user?.display_name || user?.username}'s Awesome Bouncy Castle'`,
+					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
 					style: "width: 100%"
 				}),
 				h(Button, {
@@ -202,67 +217,30 @@ function createDropdown() {
 #left-column {
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
-	align-items: center;
-	gap: .75em;
-	padding-left: .25em;
-	padding-right: .25em;
+
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
 	padding-top: .5em;
-	border-right: 1px solid var(--padding-color);
+	
 	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
 }
 
-#left-column-top, #left-column-bottom {
+.left-column-segment {
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	gap: 1.5dvh;
-	overflow-y: scroll;
+
 	scrollbar-width: none;
 }
 
-#left-column-top::-webkit-scrollbar, #left-column-bottom::-webkit-scrollbar {
+.left-column-segment::-webkit-scrollbar {
 	display: none;
 }
 
-#left-column-bottom {
-	padding-top: 1dvh;
-	border-top: 1px solid var(--padding-color);
-}
-
-#middle-left-column {
-	padding-left: 1dvw;
-	padding-right: 1dvw;
-	border-right: 1px solid var(--padding-color);
-}
-
-#home-button {
-	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: 1dvh;
-}
-
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1em;
-	width: 3.2rem;	
-	padding-top: .5em;
-}
-
-#create-button {
-	color: var(--primary-color);
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: 2rem;
-	padding: 0;
-	display: inline-block;
-}
-
-#create-icon {
-	float: left;
+#left-column-middle {
+	overflow-y: scroll;
+	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
 }
 
 #middle-left-column {
@@ -275,24 +253,31 @@ function createDropdown() {
 	overflow-x: hidden;
 }
 
-.sidebar-icon {
-	width: 3rem;
-	height: 3rem;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-
 #home-button {
-	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: .375em;
+	height: var(--sidebar-icon-width);
 }
 
-#settings-menu {
-	color: var(--primary-color)
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
 }
 
-#settings-menu:hover {
-	color: var(--primary-highlighted-color)
+.sidebar-icon {
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
+}
+
+.sidebar-bottom-buttons {
+	color: var(--primary-color);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 2.4rem;
+	padding: 0;
+	display: inline-block;
+}
+
+.sidebar-bottom-buttons:hover {
+	color: var(--primary-highlighted-color);
 }
 
 </style>

package.json

@@ -22,7 +22,8 @@
     "pinia-plugin-persistedstate": "^4.2.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "xxhash-wasm": "^1.1.0"
   },
   "packageManager": "pnpm@10.11.0",
   "license": "MIT",

pages/login.vue

@@ -22,8 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { StatsResponse } from '~/types/interfaces';
-
 
 definePageMeta({
 	layout: "auth"

pages/me/friends.vue

@@ -1,56 +0,0 @@
-<template>
-  <NuxtLayout name="client">
-	<DirectMessagesSidebar />
-	<div :id="$style['page-content']">
-		<div :id="$style['navigation-bar']">
-			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
-			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
-			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
-			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
-		</div>
-		
-		<div>
-			<AddFriend v-if="filter == 'add'"></AddFriend>
-			<FriendsList v-else :variant="filter"></FriendsList>
-		</div>
-
-	</div>
-  </NuxtLayout>
-</template>
-
-<script lang="ts" setup>
-import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
-import Button from '~/components/UserInterface/Button.vue';
-import AddFriend from '~/components/Me/AddFriend.vue';
-import FriendsList from '~/components/Me/FriendsList.vue';
-
-const { fetchFriends } = useApi();
-
-let filter = ref("all");
-
-const friends = await fetchFriends()
-
-function updateFilter(newFilter: string) {
-	filter.value = newFilter;
-}
-</script>
-
-<style module>
-#page-content {
-	display: flex;
-	flex-direction: column;
-	
-	flex-grow: 1;
-
-	margin: .75em;
-}
-
-#navigation-bar {
-	display: flex;
-	align-items: left;
-	text-align: left;
-	flex-direction: row;
-
-	gap: .5em;
-}
-</style>

pages/me/index.vue

@@ -1,13 +1,56 @@
 <template>
   <NuxtLayout name="client">
 	<DirectMessagesSidebar />
+	<div :id="$style['page-content']">
+		<div :id="$style['navigation-bar']">
+			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
+			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
+			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
+			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
+		</div>
+		
+		<div>
+			<AddFriend v-if="filter == 'add'"></AddFriend>
+			<FriendsList v-else :variant="filter"></FriendsList>
+		</div>
+
+	</div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import AddFriend from '~/components/Me/AddFriend.vue';
+import FriendsList from '~/components/Me/FriendsList.vue';
+
+const { fetchFriends } = useApi();
+
+let filter = ref("all");
+
+const friends = await fetchFriends()
+
+function updateFilter(newFilter: string) {
+	filter.value = newFilter;
+}
 </script>
 
-<style>
+<style module>
+#page-content {
+	display: flex;
+	flex-direction: column;
 	
+	flex-grow: 1;
+
+	margin: .75em;
+}
+
+#navigation-bar {
+	display: flex;
+	align-items: left;
+	text-align: left;
+	flex-direction: row;
+
+	gap: .5em;
+}
 </style>

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();

pages/settings.vue

@@ -46,9 +46,13 @@
 
 
 <script lang="ts" setup>
+import { Profile, Account, Privacy, Devices, Connections } from '~/components/Settings/UserSettings';
+import { Appearance, Notifications, Keybinds, Language } from '~/components/Settings/AppSettings';
+
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import Button from '~/components/UserInterface/Button.vue';
 
+
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 
@@ -62,17 +66,6 @@ interface Category {
   pages: Page[];
 }
 
-import Profile from '~/components/Settings/UserSettings/Profile.vue';
-import Account from '~/components/Settings/UserSettings/Account.vue';
-import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
-import Devices from '~/components/Settings/UserSettings/Devices.vue';
-import Connections from '~/components/Settings/UserSettings/Connections.vue';
-
-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';
-
 const settingsCategories = {
   userSettings: {
     displayName: "User Settings",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+      xxhash-wasm:
+        specifier: ^1.1.0
+        version: 1.1.0
     devDependencies:
       '@iconify-json/lucide':
         specifier: ^1.2.44
@@ -4744,6 +4747,9 @@ packages:
     engines: {node: '>= 0.10.0'}
     hasBin: true
 
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -10146,6 +10152,8 @@ snapshots:
       cssfilter: 0.0.10
     optional: true
 
+  xxhash-wasm@1.1.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}

public/themes/ash.css

@@ -18,4 +18,11 @@
 	--secondary-highlighted-color: #885830;
 	--accent-color: #a04b24;
 	--accent-highlighted-color: #b86038;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 20%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }

public/themes/dark.css

@@ -18,4 +18,14 @@
 	--secondary-highlighted-color: #8f5b2c;
 	--accent-color: #b35719;
 	--accent-highlighted-color: #c76a2e;
+
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 15%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }

public/themes/description.css

@@ -20,6 +20,12 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
+
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
 	--optional-topbar-background: ; /* background element for the topbar */

public/themes/light.css

@@ -18,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: 50%;
+	--preferred-font: Arial;
 }

public/themes/rainbow-capitalism.css

@@ -19,6 +19,12 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--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);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);

types/hooks.ts

@@ -1,5 +1,3 @@
-import type { RuntimeNuxtHooks } from 'nuxt/schema';
-
 declare module "nuxt/schema" {
 	interface RuntimeNuxtHooks {
 		"app:message:right-clicked": (payload: { messageId: string }) => void

types/props.ts

@@ -3,12 +3,13 @@ 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",
 	type: "normal" | "grouped",
 	marginBottom: boolean,
+	authorColor: string,
 	last: boolean,
 	messageId: string,
 	replyingTo?: boolean,

utils/fetchWithApi.ts

@@ -1,4 +1,4 @@
-import type { NitroFetchRequest, NitroFetchOptions } from "nitropack";
+import type { NitroFetchOptions } from "nitropack";
 
 export default async <T>(path: string, options: NitroFetchOptions<string> = {}) => {
   console.log("path received:", path);

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"
+}

utils/generateIrcColor.ts

@@ -0,0 +1,13 @@
+import xxhash from "xxhash-wasm"
+
+let h64: CallableFunction;
+(async () => {
+	h64 = (await xxhash()).h64;
+})();
+
+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(${hashValue % 360n}, ${saturation}%, ${lightness}%)`
+}

utils/getDisplayName.ts

@@ -0,0 +1,7 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
+	if (member?.nickname) return member.nickname
+	if (user.display_name) return user.display_name
+	return user.username
+}

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;
+}

utils/replyToMessage.ts

@@ -7,7 +7,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 	}