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;
 

apps/frontend/src/composables/moderation.ts

@@ -27,7 +27,10 @@ const useModerationCookies = () => {
 		moderationKeybindsId,
 		getCookieOptions(),
 	)
-	const optionsCookie = useCookie<Partial<StoredOptions>>(moderationSettingsId, getCookieOptions())
+	const optionsCookie = useCookie<Partial<StoredOptions> | null>(
+		moderationSettingsId,
+		getCookieOptions(),
+	)
 
 	if (keybindCookie.value && !optionsCookie.value) {
 		optionsCookie.value = {
@@ -45,16 +48,17 @@ const useModerationCookies = () => {
 const useModerationOptions = () =>
 	useState<{ keybinds: StoredKeybinds; settings: StoredSettings }>(moderationKeybindsId, () => {
 		const cookie = useModerationCookies()
+		const stored = cookie.value ?? {}
 
 		const keybindOutput: StoredKeybinds = {}
 
-		for (const [id, definition] of Object.entries(cookie.value.keybinds || {})) {
+		for (const [id, definition] of Object.entries(stored.keybinds || {})) {
 			if (!definition) continue
 			keybindOutput[id] = definition
 		}
 
 		const settingsOutput: StoredSettings = {}
-		for (const [id, setting] of Object.entries(cookie.value.settings || {})) {
+		for (const [id, setting] of Object.entries(stored.settings || {})) {
 			settingsOutput[id] = setting
 		}
 

apps/frontend/src/pages/[type]/[project]/moderation.vue

@@ -109,8 +109,8 @@
 				</template>
 			</div>
 			<ConversationThread
-				v-if="thread"
+				v-if="prefixedThread"
-				:thread="thread"
+				:thread="prefixedThread"
 				:project="project"
 				:set-status="setStatus"
 				:current-member="currentMember ?? undefined"
@@ -151,6 +151,7 @@ import {
 } from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'
 import { useQueryClient } from '@tanstack/vue-query'
+import dayjs from 'dayjs'
 import { computed, watch } from 'vue'
 
 import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
@@ -217,6 +218,26 @@ const {
 	thread,
 } = injectProjectPageContext()
 
+const THREADS_RELEASE_DATE = '2023-08-05T12:00:00-07:00'
+
+const prefixedThread = computed(() => {
+	const projectDate = project.value?.queued ?? project.value?.approved ?? project.value?.published
+	if (thread.value && projectDate && dayjs(projectDate).isBefore(dayjs(THREADS_RELEASE_DATE))) {
+		const newThread = JSON.parse(JSON.stringify(thread.value))
+		newThread.messages.unshift({
+			id: '69',
+			author_id: null,
+			body: {
+				type: 'legacy_project_message',
+			},
+			created: THREADS_RELEASE_DATE,
+			hide_identity: false,
+		})
+		return newThread
+	}
+	return thread.value
+})
+
 const canAccess = computed(() => !!currentMember.value)
 const staff = computed(() => isStaff(currentMember.value?.user))
 const userFacingUiVisible = computed(