update to svelte 5

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

@@ -3,31 +3,36 @@
 	import Input from '$lib/components/Input/Input.svelte';
 	import { env } from '$env/dynamic/public';
 	import { page } from '$app/stores';
-	import { createEventDispatcher } from 'svelte';
 	import Search from '$lib/components/Input/Search.svelte';
 	import Select from '$lib/components/Input/Select.svelte';
 
-	export let reporterName: string;
-	export let reportedName: string | null;
-	export let reason: string;
-	export let users: string[];
+	let {
+		reporterName,
+		reportedName = null,
+		reason,
+		users,
+		onsubmit
+	}: {
+		reporterName: string;
+		reportedName: string | null;
+		reason: string;
+		users: string[];
+		onsubmit: () => void;
+	} = $props();
 
-	let oldReported = reportedName;
-	$: reportedName = oldReported;
+	let reported = $state(reportedName);
+	let content = $state('');
 
-	let body: string;
 	let userErrorModal: HTMLDialogElement;
 	let submitModal: HTMLDialogElement;
 
-	let dispatch = createEventDispatcher();
-
 	async function submitReport() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
 			method: 'POST',
 			body: JSON.stringify({
-				reported: reportedName || null,
+				reported: reported || null,
 				subject: reason,
-				body: body
+				body: content
 			})
 		});
 	}
@@ -45,11 +50,12 @@
 <div>
 	<h2 class="text-3xl text-center">
 		Report von <span class="underline">{reporterName}</span> gegen
-		<span class="underline">{(reportedName ?? 'unbekannt') || oldReported}</span>
+		<span class="underline">{reported !== null ? reported : 'unbekannt'}</span>
 	</h2>
 	<form
-		on:submit|preventDefault={() => {
-			if (reportedName != null && users.findIndex((u) => u === reportedName) === -1) {
+		onsubmit={(e) => {
+			e.preventDefault();
+			if (reported != null && users.findIndex((u) => u === reported) === -1) {
 				userErrorModal.show();
 			} else {
 				submitModal.show();
@@ -59,21 +65,25 @@
 		<div class="space-y-4 my-4">
 			<div class="flex justify-center gap-4">
 				<Select
-					value={+(reportedName === null)}
+					value={+(reported === null)}
 					size="sm"
 					pickyWidth={false}
-					on:change={(e) => (reportedName = e.detail.value === 0 ? '' : null)}
+					onChange={(e) => {
+						reported = e.value === 0 ? reportedName || '' : null;
+					}}
 				>
 					<option value={0}>Ich möchte einen bestimmten Spieler reporten</option>
 					<option value={1}>Ich möchte einen unbekannten Spieler reporten</option>
 				</Select>
-				{#if reportedName !== null}
-					<Search size="sm" bind:value={oldReported} searchSuggestionFunc={suggestNames} />
+				{#if reported !== null}
+					<Search size="sm" bind:value={reported} searchSuggestionFunc={suggestNames} />
 				{/if}
 			</div>
 			<div>
 				<Input type="text" bind:value={reason} required={true} pickyWidth={false}>
-					<span slot="label">Report Grund</span>
+					{#snippet label()}
+						<span>Report Grund</span>
+					{/snippet}
 				</Input>
 			</div>
 			<div>
@@ -81,7 +91,7 @@
 					required={true}
 					rows={4}
 					label="Details über den Report Grund"
-					bind:value={body}
+					bind:value={content}
 				/>
 			</div>
 		</div>
@@ -121,9 +131,9 @@
 				<Input
 					type="submit"
 					value="Abschicken"
-					on:click={async () => {
+					onclick={async () => {
 						await submitReport();
-						dispatch('submit');
+						onsubmit();
 					}}
 				/>
 				<Input type="submit" value="Abbrechen" />