feat: impl threads

Author: IMB11

apps/frontend/src/components/ui/moderation/ModerationReportCard.vue

@@ -117,11 +117,10 @@
 				</div>
 			</div>
 		</div>
-		<div class="border-1 bg-surface-l2 rounded-b-3xl border-solid border-bg-raised p-4">
-			<ReportThread
+		<div class="border-1 bg-surface-2 rounded-b-3xl border-solid border-bg-raised p-4 pt-2">
+			<ThreadView
 				v-if="report.thread"
 				ref="reportThread"
-				class="mb-16 sm:mb-0"
 				:thread="report.thread"
 				:report="report"
 				:reporter="report.reporter_user"
@@ -149,15 +148,15 @@ import {
 } from '@modrinth/ui'
 import { computed } from 'vue'
 
-import ReportThread from '../thread/ReportThread.vue'
+import ThreadView from '../thread/ThreadView.vue'
 
 const { addNotification } = injectNotificationManager()
 
 const props = defineProps<{
 	report: ExtendedReport
 }>()
 
-const reportThread = ref<InstanceType<typeof ReportThread> | null>(null)
+const reportThread = ref<InstanceType<typeof ThreadView> | null>(null)
 // const collapsibleRegion = ref<InstanceType<typeof CollapsibleRegion> | null>(null)
 
 const formatRelativeTime = useRelativeTime()

apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue

@@ -21,14 +21,16 @@ import {
 	OverflowMenu,
 	type OverflowMenuOption,
 } from '@modrinth/ui'
-import { capitalizeString, formatProjectType, highlightCodeLines } from '@modrinth/utils'
+import { capitalizeString, formatProjectType, highlightCodeLines, type Thread } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
+import ThreadView from '~/components/ui/thread/ThreadView.vue'
+
 const props = defineProps<{
 	item: {
 		project: Labrinth.Projects.v3.Project
 		project_owner: Labrinth.TechReview.Internal.Ownership
-		thread: Labrinth.TechReview.Internal.DBThread
+		thread: Labrinth.TechReview.Internal.Thread
 		reports: Labrinth.TechReview.Internal.FileReport[]
 	}
 	loadingIssues: Set<string>
@@ -171,6 +173,10 @@ function toggleIssue(issueId: string) {
 	}
 }
 
+function handleThreadUpdate() {
+	emit('refetch')
+}
+
 // function getSeverityBreakdown(file: Labrinth.TechReview.Internal.FileReport) {
 // 	const counts = {
 // 		SEVERE: 0,
@@ -204,7 +210,7 @@ function toggleIssue(issueId: string) {
 				<div class="flex items-center gap-4">
 					<Avatar
 						:src="item.project.icon_url"
-						class="rounded-2xl border border-surface-5 bg-surface-4"
+						class="rounded-2xl border border-surface-5 bg-surface-4 !shadow-none"
 						size="4rem"
 					/>
 
@@ -244,7 +250,7 @@ function toggleIssue(issueId: string) {
 						<div class="flex items-center gap-1">
 							<Avatar
 								:src="item.project_owner.icon_url"
-								class="rounded-full border border-surface-5 bg-surface-4"
+								class="rounded-full border border-surface-5 bg-surface-4 !shadow-none"
 								size="1.5rem"
 								circle
 							/>
@@ -316,17 +322,10 @@ function toggleIssue(issueId: string) {
 
 		<div class="border-t border-surface-3 bg-surface-2">
 			<div v-if="currentTab === 'Thread'" class="p-4">
-				<div v-if="true" class="flex min-h-[75px] items-center justify-center">
-					<div class="text-center text-secondary">
-						<p class="text-sm">
-							Not yet implemented. See reports in prod for how thread will look (its the same)
-						</p>
-					</div>
-				</div>
-
-				<div v-else class="flex flex-col gap-6">
-					<!-- TODO: Report thread stuff -->
-				</div>
+				<ThreadView
+					:thread="item.thread as Thread"
+					@update-thread="handleThreadUpdate"
+				/>
 			</div>
 
 			<div v-else-if="currentTab === 'Files' && !selectedFile" class="flex flex-col">
@@ -383,11 +382,11 @@ function toggleIssue(issueId: string) {
 				<div
 					v-for="(issue, idx) in selectedFile.issues"
 					:key="issue.id"
-					class="border-x border-b border-t-0 border-solid border-surface-3 bg-surface-2"
+					class="border-x border-b border-t-0 border-solid border-surface-3 bg-surface-2 transition-colors duration-200 hover:bg-surface-4"
 					:class="{ 'rounded-bl-2xl rounded-br-2xl': idx === selectedFile.issues.length - 1 }"
 				>
 					<div
-						class="flex cursor-pointer items-center justify-between p-4 transition-colors hover:bg-surface-3"
+						class="flex cursor-pointer items-center justify-between p-4"
 						@click="toggleIssue(issue.id)"
 					>
 						<div class="my-auto flex items-center gap-2">

apps/frontend/src/components/ui/thread/ReportThread.vue renamed to apps/frontend/src/components/ui/thread/ThreadView.vue

@@ -18,12 +18,16 @@
 				@update-thread="() => updateThreadLocal()"
 			/>
 		</div>
+		<div v-else class="flex flex-col items-center justify-center space-y-3 py-12">
+			<MessageIcon class="size-12 text-secondary" />
+			<p class="text-lg text-secondary">No messages yet</p>
+		</div>
 
 		<template v-if="reportClosed">
 			<p class="text-secondary">This thread is closed and new messages cannot be sent to it.</p>
-			<ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2 w-full sm:w-auto">
+			<ButtonStyled v-if="isStaff(auth.user)" color="green" class="mt-2">
 				<button
-					class="flex w-full items-center justify-center gap-2 sm:w-auto"
+					class="w-full gap-2 sm:w-auto"
 					@click="reopenReport()"
 				>
 					<CheckCircleIcon class="size-4" />
@@ -33,7 +37,7 @@
 		</template>
 
 		<template v-else>
-			<div class="mt-4">
+			<div>
 				<MarkdownEditor
 					v-model="replyBody"
 					:placeholder="sortedMessages.length > 0 ? 'Reply to thread...' : 'Send a message...'"
@@ -45,30 +49,30 @@
 				class="mt-4 flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center sm:gap-2"
 			>
 				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
-					<ButtonStyled v-if="sortedMessages.length > 0" color="brand" class="w-full sm:w-auto">
+					<ButtonStyled v-if="sortedMessages.length > 0" color="brand">
 						<button
 							:disabled="!replyBody"
-							class="flex w-full items-center justify-center gap-2 sm:w-auto"
+							class="w-full gap-2 sm:w-auto"
 							@click="sendReply()"
 						>
 							<ReplyIcon class="size-4" />
 							Reply
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-else color="brand" class="w-full sm:w-auto">
+					<ButtonStyled v-else color="brand">
 						<button
 							:disabled="!replyBody"
-							class="flex w-full items-center justify-center gap-2 sm:w-auto"
+							class="w-full gap-2 sm:w-auto"
 							@click="sendReply()"
 						>
 							<SendIcon class="size-4" />
 							Send
 						</button>
 					</ButtonStyled>
-					<ButtonStyled v-if="isStaff(auth.user)" class="w-full sm:w-auto">
+					<ButtonStyled v-if="isStaff(auth.user)">
 						<button
 							:disabled="!replyBody"
-							class="flex w-full items-center justify-center gap-2 sm:w-auto"
+							class="w-full sm:w-auto"
 							@click="sendReply(true)"
 						>
 							Add note
@@ -84,18 +88,18 @@
 
 				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
 					<template v-if="isStaff(auth.user)">
-						<ButtonStyled v-if="replyBody" color="red" class="w-full sm:w-auto">
+						<ButtonStyled v-if="replyBody" color="red">
 							<button
-								class="flex w-full items-center justify-center gap-2 sm:w-auto"
+								class="w-full gap-2 sm:w-auto"
 								@click="closeReport(true)"
 							>
 								<CheckCircleIcon class="size-4" />
 								Reply and close
 							</button>
 						</ButtonStyled>
-						<ButtonStyled v-else color="red" class="w-full sm:w-auto">
+						<ButtonStyled v-else color="red">
 							<button
-								class="flex w-full items-center justify-center gap-2 sm:w-auto"
+								class="w-full gap-2 sm:w-auto"
 								@click="closeReport()"
 							>
 								<CheckCircleIcon class="size-4" />
@@ -110,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { CheckCircleIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
+import { CheckCircleIcon, MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
 import {
 	type ExtendedReport,
 	reportQuickReplies,
@@ -136,11 +140,13 @@ import ThreadMessage from './ThreadMessage.vue'
 const { addNotification } = injectNotificationManager()
 
 const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
+	if (!props.report) return []
+
 	return reportQuickReplies
 		.filter((reply) => {
 			if (reply.shouldShow === undefined) return true
 			if (typeof reply.shouldShow === 'function') {
-				return reply.shouldShow(props.report)
+				return reply.shouldShow(props.report! as ExtendedReport)
 			}
 
 			return reply.shouldShow
@@ -156,13 +162,20 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 
 const props = defineProps<{
 	thread: Thread
-	reporter: User
-	report: ExtendedReport
+	reporter?: User
+	report?: Partial<ExtendedReport> & {
+		id?: string
+		thread_id?: string
+		closed?: boolean
+		created?: string
+	}
 }>()
 
 async function handleQuickReply(reply: ReportQuickReply) {
+	if (!props.report) return
+
 	const message =
-		typeof reply.message === 'function' ? await reply.message(props.report) : reply.message
+		typeof reply.message === 'function' ? await reply.message(props.report as ExtendedReport) : reply.message
 
 	await nextTick()
 	setReplyContent(message)
@@ -181,8 +194,9 @@ const emit = defineEmits<{
 const flags = useFeatureFlags()
 
 const members = computed(() => {
-	const membersMap: Record<string, User> = {
-		[props.reporter.id]: props.reporter,
+	const membersMap: Record<string, User> = {}
+	if (props.reporter) {
+		membersMap[props.reporter.id] = props.reporter
 	}
 	for (const member of props.thread.members) {
 		membersMap[member.id] = member
@@ -196,21 +210,25 @@ function setReplyContent(content: string) {
 }
 
 const sortedMessages = computed(() => {
-	const messages: TypeThreadMessage[] = [
-		{
+	const messages: TypeThreadMessage[] = []
+
+	// Add synthetic first message for reports
+	if (props.report?.created && props.reporter) {
+		messages.push({
 			id: null,
 			author_id: props.reporter.id,
 			body: {
 				type: 'text',
-				body: props.report.body || 'Report opened.',
+				body: props.report.body || 'Thread opened.',
 				private: false,
 				replying_to: null,
 				associated_images: [],
 			},
 			created: props.report.created,
 			hide_identity: false,
-		},
-	]
+		})
+	}
+
 	if (props.thread) {
 		messages.push(
 			...[...props.thread.messages].sort(
@@ -223,7 +241,7 @@ const sortedMessages = computed(() => {
 })
 
 async function updateThreadLocal() {
-	const threadId = props.report.thread_id
+	const threadId = props.report?.thread_id || props.thread.id
 	if (threadId) {
 		try {
 			const thread = (await useBaseFetch(`thread/${threadId}`)) as Thread
@@ -284,6 +302,8 @@ const reportClosed = computed(() => {
 })
 
 async function closeReport(reply = false) {
+	if (!props.report?.id) return
+
 	if (reply) {
 		await sendReply()
 	}
@@ -307,6 +327,8 @@ async function closeReport(reply = false) {
 }
 
 async function reopenReport() {
+	if (!props.report?.id) return
+
 	try {
 		await useBaseFetch(`report/${props.report.id}`, {
 			method: 'PATCH',