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>

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

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