fix moderation messages + add legacy message (#6914)

apps/frontend/src/components/ui/thread/ThreadMessage.vue

@@ -6,6 +6,7 @@
 			'no-actions': noLinks,
 			private: isPrivateMessage,
 			'show-private-bg': settings.get(moderationSettings.General.PrivateMessageHighlight),
+			'show-info-bg mb-2 !flex-nowrap py-6': message.body.type === 'legacy_project_message',
 		}"
 	>
 		<template v-if="members[message.author_id]">
@@ -51,23 +52,28 @@
 		</template>
 		<template v-else>
 			<div
-				class="message__icon backed-svg circle moderation-color"
+				class="message__icon backed-svg circle moderation-color shrink-0"
 				:class="{
 					raised: raised,
 					'system-message-icon': [
+						'legacy_project_message',
 						'tech_review_entered',
 						'tech_review_exited',
 						'tech_review_exit_file_deleted',
 					].includes(message.body.type),
 				}"
 			>
-				<ScaleIcon />
+				<InfoIcon v-if="message.body.type === 'legacy_project_message'" class="text-blue" />
+				<ScaleIcon v-else />
 			</div>
 			<span
 				v-if="
-					!['tech_review_entered', 'tech_review_exited', 'tech_review_exit_file_deleted'].includes(
-						message.body.type,
-					)
+					![
+						'legacy_project_message',
+						'tech_review_entered',
+						'tech_review_exited',
+						'tech_review_exit_file_deleted',
+					].includes(message.body.type)
 				"
 				class="message__author moderation-color"
 			>
@@ -81,6 +87,10 @@
 			v-html="formattedMessage"
 		/>
 		<div v-else class="message__body status-message">
+			<span v-if="message.body.type === 'legacy_project_message'">
+				This project was published on Modrinth before moderation threads existed and may be missing
+				moderation history.
+			</span>
 			<span v-if="message.body.type === 'deleted'"> posted a message that has been deleted. </span>
 			<template v-else-if="message.body.type === 'status_change'">
 				<span v-if="message.body.new_status === 'processing'">
@@ -114,7 +124,7 @@
 				the user.
 			</span>
 		</div>
-		<span class="message__date">
+		<span class="message__date shrink-0">
 			<span v-tooltip="formatDateTime(message.created)">
 				{{ timeSincePosted }}
 			</span>
@@ -143,6 +153,7 @@
 <script setup>
 import {
 	EyeOffIcon,
+	InfoIcon,
 	MicrophoneIcon,
 	ModrinthIcon,
 	MoreHorizontalIcon,
@@ -293,6 +304,15 @@ async function deleteMessage() {
 		pointer-events: none;
 	}
 
+	&.show-info-bg::before {
+		content: '';
+		inset: 0;
+		position: absolute;
+		background-color: var(--color-blue);
+		opacity: 0.05;
+		pointer-events: none;
+	}
+
 	&.no-actions {
 		padding: 0;