refactor: message component

components/Message.vue

@@ -1,24 +1,22 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
+			class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
-			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<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"
+				<g id="layer1" transform="translate(40,-35)">
-					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"
+						d="m 120,87.5 100,2.5e-5"
 						id="path3-5" />
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="M 69.899501,174.963 120.2803,87.700931"
+						d="M 70,150 120,87.5"
 						id="path3-5-2" />
 					</g>
 				</g>
@@ -29,30 +27,30 @@
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :profile="props.author" class="message-author-avatar"/>
+			<Avatar :profile="props.message.member" 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" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
-					{{ getDisplayName(props.author) }}
+					{{ getDisplayName(props.message.member) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 
-					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
 			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
-			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
+			class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
-			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+				{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 			</span>
 		</div>
 		<div class="message-data">
@@ -71,20 +69,24 @@ import MessageReply from './UserInterface/MessageReply.vue';
 import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
+const { getUser } = useAuth()
 
 const props = defineProps<MessageProps>();
 
+const me = await getUser()
+
 const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
 
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
-const date = new Date(props.timestamp);
+const date = uuidToDate(props.message.uuid);
+
 const currentDate: Date = new Date()
 
 console.log("[MSG] message to render:", props.message);
-console.log("author:", props.author);
+console.log("author:", props.message.member);
 console.log("[MSG] reply message:", props.replyMessage);
 
 const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
@@ -97,7 +99,7 @@ const hideText = ref(false);
 const sanitized = ref<string>();
 
 onMounted(async () => {
-	const parsed = await parse(props.text, { gfm: true });
+	const parsed = await parse(props.message.message, { gfm: true });
 	sanitized.value = DOMPurify.sanitize(parsed, {
 		ALLOWED_TAGS: [
 			"strong", "em", "br", "blockquote",
@@ -160,13 +162,13 @@ const menuItems: ContextMenuItem[] = [
 	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
-console.log("me:", props.me);
+console.log("me:", me);
-if (props.author?.user.uuid == props.me.uuid) {
+if (props.message.member.user.uuid == me!.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
 	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
-if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) {
+if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
 	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
@@ -212,10 +214,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	margin-top: .3em;
 }
 
-#last-message {
-	margin-bottom: 2dvh;
-}
-
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -282,11 +280,11 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 */
 
-.mentioned {
+.highlighted {
 	background-color: var(--chat-important-background-color);
 }
 
-.mentioned:hover {
+.highlighted:hover {
 	background-color: var(--chat-important-highlighted-background-color);
 }
 
@@ -311,6 +309,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style>
 
+/* class used in utils/replyToMessage.ts */
 .replying-to {
 	background-color: var(--chat-featured-message-color);
 }

components/MessageArea.vue

@@ -384,6 +384,7 @@ router.beforeEach((to, from, next) => {
 	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
+	padding-bottom: 2em;
 }
 
 .message-box-button {

types/props.ts

@@ -1,21 +1,9 @@
-import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
+import type { MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
-	class?: string,
-	img?: string | null,
-	author: GuildMemberResponse
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	authorColor: string,
-	last: boolean,
-	messageId: string,
-	replyingTo?: boolean,
-	editing?: boolean,
-	me: UserResponse
 	message: MessageResponse,
-	replyMessage?: MessageResponse
+	replyMessage?: MessageResponse,
+	type: "normal" | "grouped",
+	editing?: boolean,
 	isMentioned?: boolean,
 }

utils/replyToMessage.ts

@@ -9,7 +9,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: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);