update to svelte 5

src/routes/feedback/+page.svelte

@@ -4,11 +4,11 @@
 	import { env } from '$env/dynamic/public';
 	import Select from '$lib/components/Input/Select.svelte';
 
-	let content = '';
-	let type = 'feedback';
+	let content = $state('');
+	let type = $state('feedback');
 
 	let submitModal: HTMLDialogElement;
-	let sentModal: HTMLDialogElement & { type?: string } = {};
+	let sentModal: HTMLDialogElement;
 
 	async function submitFeedback() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/feedback`, {
@@ -27,7 +27,12 @@
 
 <div>
 	<h2 class="text-3xl text-center">Feedback & Kontakt</h2>
-	<form on:submit|preventDefault={() => submitModal.show()}>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			submitModal.show();
+		}}
+	>
 		<div class="space-y-4 mt-6 mb-4">
 			<Select size="sm" bind:value={type}>
 				<option value="feedback">Feedback</option>
@@ -67,9 +72,8 @@
 				<Input
 					type="submit"
 					value="Abschicken"
-					on:click={async () => {
+					onclick={async () => {
 						await submitFeedback();
-						sentModal.type = type;
 						sentModal.show();
 					}}
 				/>
@@ -86,7 +90,7 @@
 	<form
 		method="dialog"
 		class="modal-box"
-		on:submit={() => {
+		onsubmit={() => {
 			content = '';
 			type = 'feedback';
 		}}
@@ -94,7 +98,7 @@
 		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		<div>
 			<h3 class="font-roboto font-medium text-xl">
-				{sentModal.type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt
+				{type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt
 			</h3>
 			<div class="my-4">
 				{#if type === 'feedback'}
@@ -112,7 +116,7 @@
 	<form
 		method="dialog"
 		class="modal-backdrop bg-[rgba(0,0,0,.3)]"
-		on:submit={() => {
+		onsubmit={() => {
 			content = '';
 			type = 'feedback';
 		}}

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
-	import type { PageData } from './$types';
 	import FeedbackDraft from './FeedbackDraft.svelte';
 	import FeedbackSent from './FeedbackSent.svelte';
 
-	export let data: PageData;
+	let { data } = $props();
 </script>
 
 <svelte:head>

src/routes/feedback/[...url_hash]/FeedbackDraft.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
 	import Input from '$lib/components/Input/Input.svelte';
 	import Textarea from '$lib/components/Input/Textarea.svelte';
-	import { createEventDispatcher } from 'svelte';
 	import { env } from '$env/dynamic/public';
 	import { page } from '$app/stores';
 
-	export let event: string;
-	export let anonymous: boolean;
+	let { event, anonymous, onSubmit }: { event: string; anonymous: false; onSubmit?: () => void } =
+		$props();
 
-	const dispatch = createEventDispatcher();
-
-	let content = '';
-	let sendAnonymous = true;
+	let content = $state('');
+	let sendAnonymous = $state(true);
 
 	let submitModal: HTMLDialogElement;
 
@@ -28,10 +25,17 @@
 
 <div>
 	<h2 class="text-3xl text-center">Feedback</h2>
-	<form on:submit|preventDefault={() => submitModal.show()}>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			submitModal.show();
+		}}
+	>
 		<div class="space-y-4 my-4">
 			<Input size="sm" pickyWidth={false} disabled value={event}>
-				<span slot="label">Event</span>
+				{#snippet label()}
+					<span>Event</span>
+				{/snippet}
 			</Input>
 			<Textarea required={true} rows={4} label="Feedback" bind:value={content} />
 			<div>
@@ -63,9 +67,9 @@
 				<Input
 					type="submit"
 					value="Abschicken"
-					on:click={async () => {
+					onclick={async () => {
 						await submitFeedback();
-						dispatch('submit');
+						onSubmit && onSubmit();
 					}}
 				/>
 				<Input type="submit" value="Abbrechen" />