update report submitted window (#42)

src/lib/components/Input/Textarea.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let value: string | null = null;
-	export let label: string | null = null;
-	export let notice: string | null = null;
-	export let required = false;
-	export let disabled = false;
-	export let readonly = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let rows = 2;
-
-	const dispatch = createEventDispatcher();
+	let {
+		id,
+		name,
+		value = $bindable(),
+		label,
+		notice,
+		required,
+		disabled,
+		readonly,
+		size = 'md',
+		rows = 2
+	}: {
+		id?: string;
+		name?: string;
+		value?: string;
+		label?: string;
+		notice?: string;
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		rows?: number;
+	} = $props();
 </script>
 
 <div>
@@ -27,12 +36,11 @@
 		</label>
 	{/if}
 	<textarea
-		class="textarea w-full"
+		class="textarea textarea-bordered w-full"
 		class:textarea-xs={size === 'xs'}
 		class:textarea-sm={size === 'sm'}
 		class:textarea-md={size === 'md'}
 		class:textarea-lg={size === 'lg'}
-		class:textarea-bordered={!readonly}
 		{id}
 		{name}
 		{required}
@@ -40,7 +48,6 @@
 		{readonly}
 		{rows}
 		bind:value
-		on:click={(e) => dispatch('click', e)}
 	></textarea>
 	{#if notice}
 		<label class="label" for={id}>

src/routes/admin/reports/+page.svelte

@@ -146,7 +146,7 @@
 							goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
 								replaceState: true
 							});
-							activeReport = report;
+							activeReport = $state.snapshot(report);
 							activeReport.originalStatus = report.status;
 						}}
 					>
@@ -344,7 +344,13 @@
 										} else {
 											activeReport.reported = undefined;
 										}
-										reports = [...reports];
+										const activeReportIndex = reports.findIndex((r) => r.id === activeReport.id);
+										if (activeReportIndex === -1) {
+											return;
+										}
+
+										reports[activeReportIndex] = activeReport;
+
 										if (
 											activeReport.originalStatus !== 'reviewed' &&
 											activeReport.status === 'reviewed'
@@ -373,7 +379,7 @@
 		onSubmit={(e) => {
 			if (!e.draft) $reportCount += 1;
 			reports = [e, ...reports];
-			activeReport = reports[0];
+			activeReport = $state.snapshot(reports[0]);
 			newReportModal.close();
 		}}
 	/>

src/routes/report/[...url_hash]/+page.server.ts

@@ -18,6 +18,8 @@ export const load: PageServerLoad = async ({ params }) => {
 		draft: report.draft,
 		status: report.status,
 		reason: report.subject,
+		body: report.body,
+		statement: report.statement,
 		reporter: {
 			name: report.reporter.username
 		},

src/routes/report/[...url_hash]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
 	import ReportDraft from './ReportDraft.svelte';
-	import ReportCompleted from './ReportCompleted.svelte';
 	import ReportSubmitted from './ReportSubmitted.svelte';
 
 	let { data } = $props();
@@ -26,11 +25,16 @@
 				onsubmit={() => (completed = true)}
 			/>
 		</div>
-	{:else if data.status === 'reviewed'}
-		<ReportCompleted />
 	{:else}
 		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
-			<ReportSubmitted />
+			<ReportSubmitted
+				reporterName={data.reporter.name}
+				reportedName={data.reported.name ?? undefined}
+				status={data.status}
+				reason={data.reason}
+				body={data.body}
+				statement={data.statement}
+			/>
 		</div>
 	{/if}
 </div>

src/routes/report/[...url_hash]/ReportCompleted.svelte

@@ -1,3 +0,0 @@
-<div>
-	<h2 class="text-xl text-center">Dieser Report wurde von einem Admin bearbeitet</h2>
-</div>

src/routes/report/[...url_hash]/ReportSubmitted.svelte

@@ -1,6 +1,58 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import Textarea from '$lib/components/Input/Textarea.svelte';
+
+	let {
+		reporterName,
+		reportedName,
+		status,
+		reason,
+		body,
+		statement
+	}: {
+		reporterName: string;
+		reportedName?: string;
+		status: 'none' | 'review' | 'reviewed';
+		reason: string;
+		body: string;
+		statement?: string;
+	} = $props();
+</script>
+
 <div>
-	<h2 class="text-2xl text-center">Report abgeschickt</h2>
-	<p class="mt-4">
-		Dein Report wurde abgeschickt und wird so schnell wie möglich von einem Admin bearbeitet.
-	</p>
+	<h2 class="text-3xl text-center">
+		Report von <span class="underline">{reporterName}</span> gegen
+		<span class="underline">{reportedName ?? 'unbekannt'}</span>
+	</h2>
+	<h4 class="text-xl text-center mt-1 mb-0">
+		{#if status === 'none'}
+			<span>Unbearbeitet</span>
+		{:else if status === 'review'}
+			<span>In Bearbeitung</span>
+		{:else if status === 'reviewed'}
+			<span>Bearbeitet</span>
+		{/if}
+		<span class="relative inline-flex h-3 w-3 ml-[1px]">
+			{#if status === 'review'}
+				<span
+					class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-500 opacity-75"
+				></span>
+			{/if}
+			<span
+				class="relative inline-flex rounded-full h-3 w-3"
+				class:bg-yellow-500={status === 'none' || status === 'review'}
+				class:bg-green-500={status === 'reviewed'}
+			></span>
+		</span>
+	</h4>
+	<div class="my-4">
+		<Input type="text" size="sm" value={reason} readonly={true} pickyWidth={false}>
+			{#snippet label()}
+				<span>Report Grund</span>
+			{/snippet}
+		</Input>
+		<Textarea readonly={true} rows={4} value={body} label="Report Details" />
+	</div>
+	<div class="divider divider-vertical mb-1"></div>
+	<Textarea readonly={true} rows={4} label="Admin Kommentar" value={statement} />
 </div>