feat: implement message grouping, improve styling

components/Message.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="message">
-		<div>
+	<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
@@ -11,10 +11,6 @@
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ messageDate }}
-					<!--
-					<div class="message-date-hover" v-if="showHover">
-					</div>
-					-->
 				</span>
 			</div>
 			<div class="message-text">
@@ -22,17 +18,45 @@
 			</div>
 		</div>
 	</div>
+	<div v-else ref="messageElement" class="message compact-message">
+		<div class="left-column">
+			<div>
+				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
+					{{ messageDate }}
+				</span>
+			</div>
+		</div>
+		<div class="message-data">
+			<div class="message-text">
+				{{ text }}
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{ class?: string, img?: string | null, username: string, text: string, timestamp: number, format: "12" | "24" }>();
+const props = defineProps<{
+	class?: string,
+	img?: string | null,
+	username: string,
+	text: string,
+	timestamp: number,
+	format: "12" | "24",
+	type: "normal" | "compact",
+	marginBottom: boolean
+}>();
 
 const messageDate = ref<string>();
-const showHover = ref(false);
+
+const messageElement = ref<HTMLDivElement>();
+
+const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 
-console.log("message:", props.text);
+console.log("Message.vue: message:", props.text);
+console.log("Message.vue: message type:", props.type);
+
 let dateHour = date.getHours();
 let dateMinute = date.getMinutes();
 if (props.format == "12") {
@@ -47,7 +71,19 @@ if (props.format == "12") {
 	}
 } else {
 	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
-	}
+}
+
+onMounted(() => {
+	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
+		console.log("mouse enter");
+		dateHidden.value = false;
+	});
+
+	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
+		console.log("mouse leave");
+		dateHidden.value = true;
+	});
+});
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
@@ -59,12 +95,15 @@ if (props.format == "12") {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	margin-bottom: 1dvh;
 	display: grid;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: 1fr 19fr;
 	align-items: center;
 }
 
+.message-margin-bottom {
+	margin-bottom: 1dvh;
+}
+
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -86,22 +125,25 @@ if (props.format == "12") {
 }
 
 .message-author-avatar {
-	margin-right: 1dvw;
-	width: 3em;
+	height: 2.3em;
+	width: 2.3em;
 	border-radius: 50%;
 }
 
+.left-column {
+	margin-right: .5dvw;
+	text-align: center;
+	align-content: center;
+}
+
 .author-username {
 	margin-right: .5dvw;
 	color: white;
 }
 
 .message-date {
-	font-size: small;
+	font-size: .7em;
 	color: rgb(150, 150, 150);
-}
-
-.message-date:hover {
 	cursor: default;
 }