feat(frontend): show audit log entry for closed reports

Foxnouns.Frontend/src/lib/api/models/moderation.ts

@@ -75,6 +75,7 @@ export type ReportDetails = {
 	report: Report;
 	user: User;
 	member?: Member;
+	audit_log_entry?: AuditLogEntry;
 };
 
 export type QueriedUser = {

Foxnouns.Frontend/src/lib/components/admin/ClosedReportAuditLog.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { AuditLogEntryType, type AuditLogEntry } from "$api/models/moderation";
+	import { idTimestamp } from "$lib";
+	import { renderMarkdown } from "$lib/markdown";
+	import { DateTime } from "luxon";
+	import AuditLogEntity from "./AuditLogEntity.svelte";
+
+	type Props = { entry: AuditLogEntry };
+	let { entry }: Props = $props();
+</script>
+
+<div class="row">
+	<h3 id="report-status">
+		Closed by <AuditLogEntity entity={entry.moderator} /> at
+		{idTimestamp(entry.id).toLocaleString(DateTime.DATETIME_MED)}
+	</h3>
+	<p>
+		{#if entry.type === AuditLogEntryType.IgnoreReport}
+			Report was ignored
+		{:else if entry.type === AuditLogEntryType.WarnUser || entry.type === AuditLogEntryType.WarnUserAndClearProfile}
+			User was warned
+			{#if entry.cleared_fields && entry.cleared_fields.length > 0}
+				<br />Cleared fields: {entry.cleared_fields.join(", ")}
+			{/if}
+		{:else if entry.type === AuditLogEntryType.SuspendUser}
+			User was suspended
+		{/if}
+	</p>
+	<h4>Reason</h4>
+	<p>
+		{#if entry.reason}
+			{@html renderMarkdown(entry.reason)}
+		{:else}
+			<em class="text-secondary">(no reason given)</em>
+		{/if}
+	</p>
+</div>

Foxnouns.Frontend/src/routes/admin/reports/[id]/+page.server.ts

@@ -7,7 +7,12 @@ export const load = async ({ params, fetch, cookies }) => {
 		fetch,
 		cookies,
 	});
-	return { report: resp.report, user: resp.user, member: resp.member };
+	return {
+		report: resp.report,
+		user: resp.user,
+		member: resp.member,
+		auditLogEntry: resp.audit_log_entry,
+	};
 };
 
 export const actions = createModactions();

Foxnouns.Frontend/src/routes/admin/reports/[id]/+page.svelte

@@ -2,6 +2,7 @@
 	import type { Member } from "$api/models/member";
 	import type { User } from "$api/models/user";
 	import ActionForm from "$components/admin/ActionForm.svelte";
+	import ClosedReportAuditLog from "$components/admin/ClosedReportAuditLog.svelte";
 	import PartialProfileCard from "$components/admin/PartialProfileCard.svelte";
 	import ProfileHeader from "$components/profile/ProfileHeader.svelte";
 	import MemberCard from "$components/profile/user/MemberCard.svelte";
@@ -10,13 +11,21 @@
 
 	type Props = { data: PageData; form: ActionData };
 	let { data, form }: Props = $props();
-	let { report, user, member } = $derived(data);
+	let { report, user, auditLogEntry } = $derived(data);
 </script>
 
 <svelte:head>
 	<title>Report on @{user.username} • pronouns.cc</title>
 </svelte:head>
 
+{#if report.status === "CLOSED"}
+	<div class="alert alert-secondary">
+		This report has already been handled. <a href="#report-status" class="alert-link"
+			>See audit log entry</a
+		>
+	</div>
+{/if}
+
 <div class="row">
 	<div class="col-md">
 		<h3>Target user</h3>
@@ -55,15 +64,26 @@
 	</div>
 </div>
 
-<div class="row">
-	<h3>Take action</h3>
-	<ActionForm
-		userId={report.target_user.id}
-		reportId={report.id}
-		memberId={report.target_member?.id}
-		{form}
-	/>
-</div>
+{#if report.status === "OPEN"}
+	<div class="row">
+		<h3>Take action</h3>
+		<ActionForm
+			userId={report.target_user.id}
+			reportId={report.id}
+			memberId={report.target_member?.id}
+			{form}
+		/>
+	</div>
+{:else if report.status === "CLOSED" && auditLogEntry}
+	<ClosedReportAuditLog entry={auditLogEntry} />
+{:else}
+	<div class="row">
+		<h3>Closed by an unknown moderator</h3>
+		<p>
+			<em>This should not happen!</em>
+		</p>
+	</div>
+{/if}
 
 {#if report.snapshot}
 	<h3>Profile at time of report</h3>