components/Avatar.vue

@@ -1,37 +0,0 @@
-<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>

components/Me/DirectMessagesSidebar.vue

@@ -13,7 +13,7 @@
 			<VerticalSpacer />
 			
 			<div id="direct-message-list">
-				<UserEntry v-for="user of friends" :user="user"
+				<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
 						:href="`/me/${user.uuid}`"/> 
 			</div>
 		</div>

components/Member/MemberEntry.vue

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

components/Message.vue

@@ -4,16 +4,22 @@
 			: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"
+				width="1.5em"
-				viewBox="0 0 151.14355 87.562065" version="1.1" id="svg1"
+				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" />
+				<defs
-				<g id="layer1"
+					id="defs1" />
+				<g
+					id="layer1"
 					transform="translate(40,-35)">
-					<g id="g3"
+					<g
-						transform="translate(-35,-20)">
+					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"
@@ -26,17 +32,16 @@
 				</g>
 			</svg>
 		</div>
-		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
+		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
-			:author="props.replyMessage.user.display_name || props.replyMessage.user.username"
+			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
-			:text="props.replyMessage?.message"
-			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :user="props.author" class="message-author-avatar"/>
+			<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" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
+				<span class="message-author-username" tabindex="0">
-					{{ displayName }}
+					{{ author?.display_name || author?.username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@@ -70,7 +75,6 @@ import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
 import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
-import generateIrcColor from '~/utils/generateIrcColor';
 
 const props = defineProps<MessageProps>();
 
@@ -80,7 +84,6 @@ 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);

components/MessageArea.vue

@@ -7,7 +7,6 @@
 				: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">
@@ -42,7 +41,6 @@
 <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/User/UserEntry.vue

@@ -1,8 +1,8 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <Avatar :user="props.user" class="user-avatar"/>
+        <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">{{ displayName }}</span>
+        <span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
 	</NuxtLink>
 </template>
 
@@ -12,8 +12,6 @@ import type { UserResponse } from '~/types/interfaces';
 const props = defineProps<{
     user: UserResponse
 }>();
-
-const displayName = props.user.display_name || props.user.username
 </script>
 
 <style>

components/User/UserPopup.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="profile-popup">
-    <Avatar :user="props.user" id="avatar"/>
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <Icon v-else id="avatar" name="lucide:user" />
 
     <div id="cover-color"></div>
     <div id="main-body">

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"/>
-						<NuxtImg v-else class="sidebar-icon" :src="generateDefaultIcon(guild.name, guild.uuid)" :alt="guild.name"/>
+						<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />

package.json

@@ -22,8 +22,7 @@
     "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/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/Guild/MemberEntry.vue";
+import MemberEntry from "~/components/Member/MemberEntry.vue";
 import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 const route = useRoute();

pnpm-lock.yaml

@@ -47,9 +47,6 @@ 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
@@ -4747,9 +4744,6 @@ 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'}
@@ -10152,8 +10146,6 @@ snapshots:
       cssfilter: 0.0.10
     optional: true
 
-  xxhash-wasm@1.1.0: {}
-
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}

types/props.ts

@@ -3,13 +3,12 @@ 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/generateDefaultIcon.ts

@@ -1,38 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/isCanvasBlocked.ts

@@ -1,50 +0,0 @@
-//
-// 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;
-}