From 9b7de48c0276f860892da58d7087be16af3f6b2d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 13 Jul 2025 18:16:02 +0200
Subject: [PATCH] feat: add IRC colours, without a toggle for now

---
 components/Message.vue     |  5 ++++-
 components/MessageArea.vue |  1 +
 types/props.ts             |  1 +
 utils/generateIrcColor.ts  | 12 ++++++++++++
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 utils/generateIrcColor.ts

diff --git a/components/Message.vue b/components/Message.vue
index 2bcdcfc..e1d3c6c 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -40,7 +40,7 @@
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0">
+				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
 					{{ author?.display_name || author?.username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
@@ -71,6 +71,7 @@
 import DOMPurify from 'dompurify';
 import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
+import generateIrcColor from '~/utils/generateIrcColor';
 
 const props = defineProps<MessageProps>();
 
@@ -117,6 +118,8 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
+console.log(props.authorColor)
+
 const menuItems = [
 	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index d59b862..cae68f1 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -7,6 +7,7 @@
 				: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">
diff --git a/types/props.ts b/types/props.ts
index aa6ff0c..fe2b049 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -9,6 +9,7 @@ export interface MessageProps {
 	format: "12" | "24",
 	type: "normal" | "grouped",
 	marginBottom: boolean,
+	authorColor: string,
 	last: boolean,
 	messageId: string,
 	replyingTo?: boolean,
diff --git a/utils/generateIrcColor.ts b/utils/generateIrcColor.ts
new file mode 100644
index 0000000..d2ed643
--- /dev/null
+++ b/utils/generateIrcColor.ts
@@ -0,0 +1,12 @@
+import xxhash from "xxhash-wasm"
+
+const { h64 } = await xxhash()
+
+export default (seed: string): string => {
+	const lightness = 50
+	
+	// this should probably be cached eventually
+	const idHash = h64(seed)
+
+	return `hsl(${idHash % 360n}, 100%, ${lightness}%)`
+}
\ No newline at end of file