update to svelte 5

2024-12-02 00:28:43 +01:00 · 2024-12-02 00:28:43 +01:00 · 95968148a6
commit 95968148a6
parent abffa440a1
53 changed files with 2199 additions and 2002 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -1,30 +0,0 @@
-module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
-};
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,40 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	},
+	{
+		rules: {
+			// expressions are often used to check if a props function is defined before calling it
+			'@typescript-eslint/no-unused-expressions': 'off',
+			'@typescript-eslint/no-explicit-any': 'off'
+		}
+	}
+);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -15,33 +15,36 @@
 	"devDependencies": {
 		"@fontsource/nunito": "^5.1.0",
 		"@fontsource/roboto": "^5.1.0",
-		"@sveltejs/adapter-node": "^5.2.8",
-		"@sveltejs/kit": "^2.7.1",
+		"@sveltejs/adapter-node": "^5.2.9",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
 		"@types/bcrypt": "^5.0.2",
-		"@types/node": "^22.7.7",
+		"@types/node": "^22.10.1",
 		"@types/validator": "^13.12.2",
-		"@typescript-eslint/eslint-plugin": "^8.10.0",
-		"@typescript-eslint/parser": "^8.10.0",
 		"autoprefixer": "^10.4.20",
-		"daisyui": "^4.12.13",
-		"eslint": "^9.13.0",
+		"daisyui": "^4.12.14",
+		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.45.1",
-		"postcss": "^8.4.47",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
-		"sass": "^1.80.3",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.13.0",
+		"postcss": "^8.4.49",
+		"prettier": "^3.4.1",
+		"prettier-plugin-svelte": "^3.3.2",
+		"prettier-plugin-tailwindcss": "^0.6.9",
+		"publint": "^0.2.12",
+		"sass": "^1.81.0",
 		"skinview3d": "^3.1.0",
-		"svelte": "^4.2.19",
-		"svelte-check": "^4.0.5",
-		"svelte-heros-v2": "^1.3.0",
+		"svelte": "^5.3.0",
+		"svelte-check": "^4.1.0",
+		"svelte-heros-v2": "^2.0.1",
 		"svelte-multicssclass": "^2.1.1",
 		"svelte-preprocess": "^6.0.3",
-		"tailwindcss": "^3.4.14",
-		"tslib": "^2.8.0",
-		"typescript": "^5.6.3",
-		"vite": "^5.4.9",
-		"vitest": "^2.1.3",
+		"tailwindcss": "^3.4.15",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.16.0",
+		"vite": "^6.0.1",
+		"vitest": "^2.1.6",
 		"zod": "^3.23.8"
 	},
 	"type": "module",
--- a/src/lib/components/Countdown/Countdown.svelte
+++ b/src/lib/components/Countdown/Countdown.svelte
@ -2,10 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import { env } from '$env/dynamic/public';

-	// start date in milliseconds. if undefined, start will be Date.now
-	export let start: number | undefined = undefined;
-	// end date in milliseconds
-	export let end: number;
+	let { start, end }: { start?: number; end: number } = $props();

 	let title = `Spielstart ist am ${new Date(env.PUBLIC_START_DATE).toLocaleString('de-DE', {
 		day: '2-digit',
@ -26,7 +23,7 @@
 		];
 	}

-	let [days, hours, minutes, seconds] = getUntil();
+	let [days, hours, minutes, seconds] = $state(getUntil());
 	let intervalId = setInterval(() => {
 		[days, hours, minutes, seconds] = getUntil();
 		if (start) start += 1000;
@ -41,25 +38,25 @@
 >
 	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
 		<span class="countdown font-mono text-3xl sm:text-6xl">
-			<span class="m-auto" style="--value:{days};" />
+			<span class="m-auto" style="--value:{days};"></span>
 		</span>
 		Tage
 	</div>
 	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
 		<span class="countdown font-mono text-3xl sm:text-6xl">
-			<span class="m-auto" style="--value:{hours};" />
+			<span class="m-auto" style="--value:{hours};"></span>
 		</span>
 		Stunden
 	</div>
 	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
 		<span class="countdown font-mono text-3xl sm:text-6xl">
-			<span class="m-auto" style="--value:{minutes};" />
+			<span class="m-auto" style="--value:{minutes};"></span>
 		</span>
 		Minuten
 	</div>
 	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm" {title}>
 		<span class="countdown font-mono text-3xl sm:text-6xl">
-			<span class="m-auto" style="--value:{seconds};" />
+			<span class="m-auto" style="--value:{seconds};"></span>
 		</span>
 		Sekunden
 	</div>
--- a/src/lib/components/CustomIcons/Crosshairs.svelte
+++ b/src/lib/components/CustomIcons/Crosshairs.svelte
@ -1,6 +1,5 @@
 <script lang="ts">
-	export let size = '24';
-	export let fill = 'currentColor';
+	let { size = '24', fill = 'currentColor' } = $props();
 </script>

 <svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} {fill} viewBox="0 0 512 512"
--- a/src/lib/components/CustomIcons/Skull.svelte
+++ b/src/lib/components/CustomIcons/Skull.svelte
@ -1,6 +1,5 @@
 <script lang="ts">
-	export let size = '24';
-	export let fill = 'currentColor';
+	let { size = '24', fill = 'currentColor' } = $props();
 </script>

 <svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} {fill} viewBox="0 0 512 512"
--- a/src/lib/components/Input/Badges.svelte
+++ b/src/lib/components/Input/Badges.svelte
@ -1,12 +1,17 @@
 <script lang="ts">
-	// eslint-disable-next-line no-undef
-	type T = $$Generic;
-
-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let disabled = false;
-	export let available: string[] | { [key: string]: T } = {};
-	export let value: T[] = [];
+	let {
+		id,
+		name,
+		disabled = false,
+		available = {},
+		value = $bindable([])
+	}: {
+		id?: string;
+		name?: string;
+		disabled?: boolean;
+		available?: string[] | { [key: string]: any };
+		value: any[];
+	} = $props();
 </script>

 <div class="flex items-center gap-4">
@ -15,7 +20,7 @@
 		{name}
 		class="select select-bordered select-xs"
 		disabled={disabled || available.length === 0}
-		on:change={(e) => {
+		onchange={(e) => {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			value.push(Object.values(available)[Object.keys(available).indexOf(e.target.value)]);
@ -42,7 +47,7 @@
 						<button
 							{disabled}
 							class:pointer-events-none={disabled}
-							on:click={() => {
+							onclick={() => {
 								value.splice(i, 1);
 								value = value;
 							}}>✕</button
--- a/src/lib/components/Input/Input.svelte
+++ b/src/lib/components/Input/Input.svelte
@ -1,30 +1,46 @@
 <script lang="ts">
 	import { Eye, EyeSlash } from 'svelte-heros-v2';
-	import { createEventDispatcher } from 'svelte';
+	import type { Snippet } from 'svelte';

-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let type = 'text';
-	export let value: string | null = null;
-	export let placeholder: string | null = null;
-	export let pattern: RegExp | null = null;
-	export let required = false;
-	export let disabled = false;
-	export let readonly = false;
-	export let checked = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let pickyWidth = true;
-	export let containerClass = '';
-
-	export let inputElement: HTMLInputElement | undefined = undefined;
-
-	const dispatch = createEventDispatcher();
-	function input(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		dispatch('input', e);
-	}
-	function click(e: Event) {
-		dispatch('click', e);
-	}
+	let {
+		label,
+		notice,
+		id,
+		name,
+		type = 'text',
+		value = $bindable(),
+		placeholder,
+		pattern,
+		required = false,
+		disabled = false,
+		readonly = false,
+		checked = false,
+		size = 'md',
+		pickyWidth = true,
+		containerClass = '',
+		inputElement = $bindable(),
+		oninput,
+		onclick
+	}: {
+		label?: Snippet;
+		notice?: Snippet;
+		id?: string;
+		name?: string;
+		type?: string;
+		value?: string;
+		placeholder?: string;
+		pattern?: RegExp;
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		checked?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		pickyWidth?: boolean;
+		containerClass?: string;
+		inputElement?: HTMLInputElement;
+		oninput?: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
+		onclick?: (e: Event) => void;
+	} = $props();

 	let initialType = type;

@ -50,15 +66,15 @@
 			{disabled}
 			bind:value
 			bind:this={inputElement}
-			on:input={input}
-			on:click={click}
+			{oninput}
+			{onclick}
 		/>
 	{:else}
 		<div>
-			{#if $$slots.label}
+			{#if label}
 				<label class="label" for={id}>
 					<span class="label-text">
-						<slot name="label" />
+						{@render label()}
 						{#if required}
 							<span class="text-red-700">*</span>
 						{/if}
@ -93,31 +109,23 @@
 					{readonly}
 					bind:this={inputElement}
 					autocomplete="off"
-					on:input={(e) => {
-						value = e.target?.value;
-						if (pattern && !pattern.test(e.target?.value)) {
-							if (inputElement?.value.endsWith(e.data)) {
-								value = e.target?.value.substring(0, e.target?.value.length - e.data.length);
-							}
-							return;
-						}
-						return input(e);
+					oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+						value = e.currentTarget.value;
+						if (pattern && !pattern.test(value)) return;
+						oninput && oninput(e);
 					}}
-					on:paste={(e) => {
-						if (
-							pattern &&
-							!pattern.test((e.clipboardData || window.clipboardData).getData('text'))
-						) {
+					onpaste={(e) => {
+						if (pattern && e.clipboardData && !pattern.test(e.clipboardData.getData('text'))) {
 							e.preventDefault();
 						}
 					}}
-					on:click={click}
+					{onclick}
 				/>
 				{#if initialType === 'password'}
 					<button
 						class="absolute right-3"
 						type="button"
-						on:click={() => {
+						onclick={() => {
 							type = type === 'password' ? 'text' : 'password';
 						}}
 					>
@ -129,9 +137,11 @@
 					</button>
 				{/if}
 			</div>
-			{#if $$slots.notice}
+			{#if notice}
 				<label class="label" for={id}>
-					<span class="label-text-alt"><slot name="notice" /></span>
+					<span class="label-text-alt">
+						{@render notice()}
+					</span>
 				</label>
 			{/if}
 		</div>
--- a/src/lib/components/Input/Search.svelte
+++ b/src/lib/components/Input/Search.svelte
@ -1,23 +1,34 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	let {
+		id,
+		value = $bindable(),
+		inputValue = $bindable(),
+		suggestionRequired = false,
+		emptyAllowed = false,
+		searchSuggestionFunc = () => Promise.resolve([]),
+		invalidMessage,
+		size = 'md',
+		label,
+		required = false,
+		onsubmit
+	}: {
+		id?: string;
+		value?: string;
+		inputValue?: string;
+		suggestionRequired?: boolean;
+		emptyAllowed?: boolean;
+		searchSuggestionFunc?: (input: string) => Promise<{ name: string; value: string }[]>;
+		invalidMessage?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		label?: string;
+		required?: boolean;
+		onsubmit?: (event: Event & { input: string; value: string }) => void;
+	} = $props();

-	export let id: string | null = null;
-	export let value = '';
-	export let inputValue = '';
-	export let suggestionRequired = false;
-	export let emptyAllowed = false;
-	export let searchSuggestionFunc: (
-		input: string
-	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
-	export let invalidMessage: string | null = null;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let label: string | null = null;
-	export let required = false;
-
-	const dispatch = createEventDispatcher();
-
-	let searchSuggestions: { name: string; value: string }[] = [];
-	$: if (!suggestionRequired) value = inputValue;
+	let searchSuggestions: { name: string; value: string }[] = $state([]);
+	$effect(() => {
+		if (!suggestionRequired) value = inputValue;
+	});
 </script>

 <div class="relative">
@ -42,7 +53,7 @@
 			{id}
 			{required}
 			bind:value={inputValue}
-			on:input={(e) => {
+			oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
 				value = '';
 				searchSuggestionFunc(inputValue).then((v) => {
 					searchSuggestions = v;
@ -51,15 +62,15 @@
 						inputValue = searchSuggestion.name;
 						value = searchSuggestion.value;
 						searchSuggestions = [];
-						e.target?.setCustomValidity('');
-						dispatch('submit', { input: inputValue, value: value });
+						e.currentTarget.setCustomValidity('');
+						onsubmit && onsubmit(Object.assign(e, { input: inputValue, value: value }));
 					} else if (inputValue === '' && emptyAllowed) {
-						dispatch('submit', { input: '', value: '' });
+						onsubmit && onsubmit(Object.assign(e, { input: '', value: '' }));
 					}
 				});
 			}}
-			on:invalid={(e) => {
-				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
+			oninvalid={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+				invalidMessage && e.currentTarget.setCustomValidity(invalidMessage);
 			}}
 			pattern={suggestionRequired
 				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
@ -74,11 +85,11 @@
 					<button
 						class="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
 						title="{searchSuggestion.name} ({searchSuggestion.value})"
-						on:click|preventDefault={() => {
+						onclick={(e) => {
 							inputValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
-							dispatch('submit', { input: inputValue, value: value });
+							onsubmit && onsubmit(Object.assign(e, { input: inputValue, value: value }));
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@ -90,7 +101,8 @@
 <!-- close the search suggestions box when clicking outside -->
 {#if inputValue && searchSuggestions.length !== 0}
 	<button
+		aria-label=" "
 		class="absolute top-0 left-0 z-10 w-full h-full cursor-default"
-		on:click={() => (searchSuggestions = [])}
-	/>
+		onclick={() => (searchSuggestions = [])}
+	></button>
 {/if}
--- a/src/lib/components/Input/Select.svelte
+++ b/src/lib/components/Input/Select.svelte
@ -1,20 +1,31 @@
 <script lang="ts">
-	// eslint-disable-next-line no-undef
-	import { createEventDispatcher } from 'svelte';
+	import type { Snippet } from 'svelte';

-	type T = $$Generic;
-
-	export let id: string | null = null;
-	export let name: string | null = null;
-	export let value: T | null = null;
-	export let label: string | null = null;
-	export let notice: string | null = null;
-	export let required = false;
-	export let disabled = false;
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-	export let pickyWidth = true;
-
-	let dispatch = createEventDispatcher();
+	let {
+		children,
+		id,
+		name,
+		value = $bindable(),
+		label,
+		notice,
+		required = false,
+		disabled = false,
+		size = 'md',
+		pickyWidth = true,
+		onChange
+	}: {
+		children: Snippet;
+		id?: string;
+		name?: string;
+		value?: any;
+		label?: string;
+		notice?: string;
+		required?: boolean;
+		disabled?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		pickyWidth?: boolean;
+		onChange?: ({ value }: { value: any }) => void;
+	} = $props();
 </script>

 <div>
@ -40,9 +51,9 @@
 		{required}
 		{disabled}
 		bind:value
-		on:change={(e) => dispatch('change', { value: value })}
+		onchange={() => onChange && onChange({ value: value })}
 	>
-		<slot />
+		{@render children()}
 	</select>
 	{#if notice}
 		<label class="label" for={id}>
--- a/src/lib/components/Input/Textarea.svelte
+++ b/src/lib/components/Input/Textarea.svelte
@ -41,7 +41,7 @@
 		{rows}
 		bind:value
 		on:click={(e) => dispatch('click', e)}
-	/>
+	></textarea>
 	{#if notice}
 		<label class="label" for={id}>
 			<span class="label-text-alt">{notice}</span>
--- a/src/lib/components/PaginationTable/PaginationTableBody.svelte
+++ b/src/lib/components/PaginationTable/PaginationTableBody.svelte
@ -1,13 +1,11 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
+	import { onMount, type Snippet, tick } from 'svelte';

-	export let onUpdate: () => Promise<any> = Promise.resolve;
+	let { children, onUpdate }: { children: Snippet; onUpdate: () => Promise<any> } = $props();

 	let bodyElem: HTMLTableSectionElement;
+	let intersectionElem: HTMLElement;

-	let intersectionObserver: IntersectionObserver;
-
-	let intersectionElement: HTMLElement;
 	async function getIntersectionElement(): Promise<HTMLElement> {
 		if (!bodyElem.lastElementChild) {
 			await new Promise<void>((resolve) => {
@ -26,10 +24,10 @@
 		await onUpdate();
 		await tick();

-		intersectionObserver = new IntersectionObserver(
+		const intersectionObserver = new IntersectionObserver(
 			async (entries, observer) => {
 				if (entries.filter((e) => e.isIntersecting).length === 0 || !entries) return;
-				observer.unobserve(intersectionElement);
+				observer.unobserve(intersectionElem);

 				const rows = bodyElem.rows.length;

@ -37,7 +35,7 @@
 				await tick();

 				if (rows === bodyElem.rows.length) return;
-				observer.observe((intersectionElement = await getIntersectionElement()));
+				observer.observe((intersectionElem = await getIntersectionElement()));
 			},
 			{ threshold: 0.25 }
 		);
@ -51,14 +49,14 @@
 				return;
 			}

-			if (intersectionElement) intersectionObserver.unobserve(intersectionElement);
-			intersectionObserver.observe((intersectionElement = await getIntersectionElement()));
+			if (intersectionElem) intersectionObserver.unobserve(intersectionElem);
+			intersectionObserver.observe((intersectionElem = await getIntersectionElement()));
 		}).observe(bodyElem, { childList: true });

-		intersectionObserver.observe((intersectionElement = await getIntersectionElement()));
+		intersectionObserver.observe((intersectionElem = await getIntersectionElement()));
 	});
 </script>

 <tbody bind:this={bodyElem}>
-	<slot />
+	{@render children()}
 </tbody>
--- a/src/lib/components/Table/SortableTh.svelte
+++ b/src/lib/components/Table/SortableTh.svelte
@ -1,17 +1,20 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+	import { getContext, onDestroy, type Snippet } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { ChevronDown, ChevronUp } from 'svelte-heros-v2';

+	let { children, onSort }: { children: Snippet; onSort: ({ asc }: { asc: boolean }) => void } =
+		$props();
+
 	let id = crypto.randomUUID();
-	let asc = false;
+
+	let asc = $state(false);
+
 	let { ascHeader } = getContext('sortableTr') as { ascHeader: Writable<null | string> };
 	ascHeader.subscribe((v) => {
 		if (v !== id) asc = false;
 	});

-	let dispatch = createEventDispatcher();
-
 	onDestroy(() => {
 		if ($ascHeader === id) $ascHeader = null;
 	});
@ -20,12 +23,14 @@
 <th>
 	<button
 		class="flex flex-center"
-		on:click={() => {
-			dispatch('sort', { asc: (asc = !asc) });
+		onclick={() => {
+			onSort({ asc: (asc = !asc) });
 			$ascHeader = id;
 		}}
 	>
-		<span class="mr-1"><slot /></span>
+		<span class="mr-1">
+			{@render children()}
+		</span>
 		{#if $ascHeader === id && asc}
 			<ChevronUp variation="solid" />
 		{:else}
--- a/src/lib/components/Table/SortableTr.svelte
+++ b/src/lib/components/Table/SortableTr.svelte
@ -1,12 +1,14 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
+	import { setContext, type Snippet } from 'svelte';
 	import { writable } from 'svelte/store';

+	let { children, ...restProps }: { children: Snippet; [x: string]: unknown } = $props();
+
 	setContext('sortableTr', {
 		ascHeader: writable(null)
 	});
 </script>

-<tr {...$$restProps}>
-	<slot />
+<tr {...restProps}>
+	{@render children()}
 </tr>
--- a/src/lib/components/Toast/ErrorToast.svelte
+++ b/src/lib/components/Toast/ErrorToast.svelte
@ -3,15 +3,10 @@
 	import { fly } from 'svelte/transition';
 	import { onDestroy } from 'svelte';

-	export let timeout = 2000;
-	export let show = false;
+	let { children, timeout = 2000, show = false } = $props();

-	export function reset() {
-		progressValue = 1;
-	}
-
-	let progressValue = 100;
-	let intervalClear: ReturnType<typeof setInterval> | undefined;
+	let progressValue = $state(100);
+	let intervalClear: ReturnType<typeof setInterval> | undefined = $state();

 	function startTimout() {
 		intervalClear = setInterval(() => {
@ -23,10 +18,11 @@
 		}, timeout / 100);
 	}

-	$: if (show) {
+	$effect(() => {
+		if (!show) return;
 		progressValue = 0;
 		startTimout();
-	}
+	});

 	onDestroy(() => clearInterval(intervalClear));
 </script>
@ -36,23 +32,23 @@
 		in:fly={{ x: 0, duration: 200 }}
 		out:fly={{ x: 400, duration: 400 }}
 		class="toast"
-		on:mouseenter={() => {
+		onmouseenter={() => {
 			clearInterval(intervalClear);
 			progressValue = 1;
 		}}
-		on:mouseleave={startTimout}
+		onmouseleave={startTimout}
 		role="alert"
 	>
 		<div class="alert alert-error border-none relative text-gray-900 overflow-hidden">
 			<div class="flex gap-2 z-10">
 				<ExclamationCircle />
-				<slot />
+				{@render children()}
 			</div>
 			<progress
 				class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"
 				value={progressValue}
 				max="100"
-			/>
+			></progress>
 		</div>
 	</div>
 {/if}
--- a/src/lib/server/database.ts
+++ b/src/lib/server/database.ts
@ -1,4 +1,4 @@
-import { DataTypes, Op } from 'sequelize';
+import { DataTypes } from 'sequelize';
 import { env } from '$env/dynamic/private';
 import { building, dev } from '$app/environment';
 import * as bcrypt from 'bcrypt';
@ -53,6 +53,8 @@ export class Report extends Model {
 	declare notice: string;
 	@Column({ type: DataTypes.STRING })
 	declare statement: string;
+	@Column({ type: DataTypes.DATE })
+	declare striked_at: Date | null;
 	@Column({ type: DataTypes.INTEGER, allowNull: false })
 	@ForeignKey(() => User)
 	declare reporter_id: number;
@ -66,17 +68,26 @@ export class Report extends Model {
 	@ForeignKey(() => StrikeReason)
 	declare strike_reason_id: number | null;

-	@BelongsTo(() => User, 'reporter_id')
+	@BelongsTo(() => User, {
+		onDelete: 'CASCADE',
+		foreignKey: 'reporter_id'
+	})
 	declare reporter: User;
-	@BelongsTo(() => User, 'reported_id')
+	@BelongsTo(() => User, {
+		onDelete: 'CASCADE',
+		foreignKey: 'reported_id'
+	})
 	declare reported: User;
-	@BelongsTo(() => Admin, 'auditor_id')
+	@BelongsTo(() => Admin, {
+		onDelete: 'CASCADE',
+		foreignKey: 'auditor_id'
+	})
 	declare auditor: Admin;
-	@BelongsTo(() => StrikeReason, 'strike_reason_id')
+	@BelongsTo(() => StrikeReason, {
+		onDelete: 'CASCADE',
+		foreignKey: 'strike_reason_id'
+	})
 	declare strike_reason: StrikeReason;
-
-	@Column({ type: DataTypes.DATE })
-	declare striked_at: Date | null;
 }

@Table({ modelName: 'strike_reason', underscored: true, createdAt: false, updatedAt: false })
@ -110,7 +121,10 @@ export class Feedback extends Model {
 	@ForeignKey(() => User)
 	declare user_id: number;

-	@BelongsTo(() => User, 'user_id')
+	@BelongsTo(() => User, {
+		onDelete: 'CASCADE',
+		foreignKey: 'user_id'
+	})
 	declare user: User;
 }

@ -153,7 +167,6 @@ export class Settings extends Model {
 	@Column({
 		type: DataTypes.STRING,
 		allowNull: false,
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		get(this: Settings): any {
 			const value = this.getDataValue('value');
 			return value != null ? JSON.parse(value) : null;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -4,7 +4,9 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';

-	let navPaths = [
+	let { children } = $props();
+
+	let navPaths = $state([
 		{
 			name: 'Startseite',
 			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.png`,
@ -41,24 +43,24 @@
 			href: `${env.PUBLIC_BASE_PATH}/team`,
 			active: false
 		}
-	];
+	]);
+	let showMenuPermanent = $state(false);
+	let onAdminPage = $state(false);
+	let isTouch = $state(false);
+	let windowHeight = $state(0);

-	let showMenuPermanent = false;
-
-	let onAdminPage = false;
-	$: onAdminPage =
-		$page.url.pathname.startsWith(`${env.PUBLIC_BASE_PATH}/admin`) &&
-		$page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`;
-	$: {
+	$effect(() => {
+		onAdminPage =
+			$page.url.pathname.startsWith(`${env.PUBLIC_BASE_PATH}/admin`) &&
+			$page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`;
+	});
+	$effect(() => {
 		for (let i = 0; i < navPaths.length; i++) {
 			navPaths[i].active = navPaths[i].href === $page.url.pathname;
 		}
-	}
+	});

-	let isTouch = false;
-	let nav: HTMLDivElement;
-
-	$: windowHeight = 0;
+	let navElem: HTMLDivElement;
 </script>

 <svelte:window bind:innerHeight={windowHeight} />
@ -67,7 +69,7 @@
 	on:touchend={(e) => {
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
-		if (isTouch && !nav.contains(e.target)) showMenuPermanent = false;
+		if (isTouch && !navElem.contains(e.target)) showMenuPermanent = false;
 	}}
 />

@ -81,20 +83,20 @@

 <main>
 	<div class="min-h-[calc(100vh-3.5rem)] h-full w-full" class:min-h-screen={onAdminPage}>
-		<slot />
+		{@render children()}
 	</div>
 </main>
 <nav>
 	<div
 		class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50 main-menu"
 		class:hidden={onAdminPage}
-		bind:this={nav}
+		bind:this={navElem}
 	>
 		<button
 			class={isTouch
 				? 'btn btn-square relative w-16 h-16'
 				: 'btn btn-square group/menu-button relative w-16 h-16'}
-			on:click={() => {
+			onclick={() => {
 				if (!isTouch) {
 					let activePath = navPaths.find((path) => path.active);
 					if (activePath !== undefined) {
@ -103,7 +105,7 @@
 					showMenuPermanent = !showMenuPermanent;
 				}
 			}}
-			on:touchend={() => {
+			ontouchend={() => {
 				isTouch = true;
 				showMenuPermanent = !showMenuPermanent;
 			}}
@ -137,13 +139,13 @@
 						<a
 							class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center"
 							href={navPath.href}
-							on:click={() => goto(navPath.href)}
+							onclick={() => goto(navPath.href)}
 						>
 							<div
 								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.png'); background-position: -{i *
 									3.5}rem 0;"
 								class="block w-full h-full bg-no-repeat bg-horizontal-sprite pixelated"
-							/>
+							></div>
 							<div class="absolute flex justify-center items-center w-full h-full">
 								<img class="w-1/2 h-1/2 pixelated" src={navPath.sprite} alt={navPath.name} />
 							</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -4,7 +4,8 @@
 	import { Clock, User, WrenchScrewdriver } from 'svelte-heros-v2';
 	import Crosshairs from '$lib/components/CustomIcons/Crosshairs.svelte';
 	import Skull from '$lib/components/CustomIcons/Skull.svelte';
-	import type { PageData } from './$types';
+
+	let { data } = $props();

 	let information = [
 		{
@ -23,8 +24,6 @@
 				'Jeder ist willkommen und kann mitspielen. Dazu benötigst Du nur einen Minecraft-Account und schon bist Du Teil unser Community :)'
 		}
 	];
-
-	export let data: PageData;
 </script>

 <svelte:head>
@ -39,7 +38,7 @@
 			<img src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp" alt="Craftattack 7" />
 			<div class="flex flex-col gap-5 lg:gap-14 w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
 				<div>
-					<div class="divider" />
+					<div class="divider"></div>
 					<div class="flex flex-col md:flex-row xl:flex-col gap-5">
 						{#each information as info}
 							<div>
@ -48,7 +47,7 @@
 							</div>
 						{/each}
 					</div>
-					<div class="divider" />
+					<div class="divider"></div>
 				</div>
 				<div class="flex justify-center">
 					<a
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@ -11,10 +11,11 @@
 	} from 'svelte-heros-v2';
 	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
-	import type { LayoutData } from './$types';
 	import { adminCount, errorMessage, reportCount, feedbackCount } from '$lib/stores';
 	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';

+	let { children, data } = $props();
+
 	async function logout() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/logout`, {
 			method: 'POST'
@ -26,7 +27,6 @@
 		}
 	}

-	export let data: LayoutData;
 	if (data.reportCount) $reportCount = data.reportCount;
 	if (data.feedbackCount) $feedbackCount = data.feedbackCount;
 	if (data.adminCount) $adminCount = data.adminCount;
@ -85,9 +85,10 @@
 		<ul class="menu menu-horizontal h-10 p-0 flex items-center bg-base-300 rounded-lg">
 			{#each tabs as tab}
 				{#if tab.enabled}
+					{@const Icon = tab.icon}
 					<li>
 						<a href={tab.path}>
-							<svelte:component this={tab.icon} />
+							<Icon />
 							<span class="mr-1" class:underline={$page.url.pathname === tab.path}>{tab.name}</span>
 							{#if tab.badge != null}
 								<div class="badge">{tab.badge}</div>
@ -100,7 +101,7 @@
 		<div class="absolute top-0 right-0 flex items-center h-full">
 			<ul class="menu menu-vertical">
 				<li>
-					<button on:click={(e) => buttonTriggeredRequest(e, logout())}>
+					<button onclick={(e) => buttonTriggeredRequest(e, logout())}>
 						<ArrowLeftOnRectangle />
 						<span>Ausloggen</span>
 					</button>
@ -109,11 +110,11 @@
 		</div>
 	</div>
 	<div class="h-full w-full -mt-12 pt-12 overflow-y-scroll overflow-x-hidden">
-		<slot />
+		{@render children()}
 	</div>
 {:else}
 	<div class="h-full w-full">
-		<slot />
+		{@render children()}
 	</div>
 {/if}

--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@ -1,9 +1,8 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import { env } from '$env/dynamic/public';
 	import { BookOpen, Cog6Tooth, Flag, UserGroup, Users } from 'svelte-heros-v2';

-	export let data: PageData;
+	let { data } = $props();

 	let tabs = [
 		{
@ -42,13 +41,14 @@
 <div class="flex justify-around items-center h-screen">
 	{#each tabs as tab}
 		{#if tab.enabled}
+			{@const Icon = tab.icon}
 			<div class="flex flex-col gap-4 justify-center items-center">
 				<a
 					class="h-48 w-48 border flex justify-center items-center rounded-xl duration-100 hover:bg-base-200"
 					href={tab.path}
 					title={tab.name}
 				>
-					<svelte:component this={tab.icon} width="10rem" height="10rem" />
+					<Icon />
 				</a>
 				<span>{tab.name}</span>
 			</div>
--- a/src/routes/admin/admin/+page.svelte
+++ b/src/routes/admin/admin/+page.svelte
@ -1,16 +1,18 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import Badges from '$lib/components/Input/Badges.svelte';
 	import { Check, NoSymbol, PencilSquare, Trash, UserPlus } from 'svelte-heros-v2';
 	import Input from '$lib/components/Input/Input.svelte';
 	import { Permissions } from '$lib/permissions';
 	import { env } from '$env/dynamic/public';
-	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
 	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	import { adminCount } from '$lib/stores';

+	let { data } = $props();
+
+	let admins = $state(data.admins);
+
 	let allPermissionBadges = {
 		Admin: Permissions.Admin,
 		Users: Permissions.Users,
@ -19,9 +21,9 @@
 		Settings: Permissions.Settings
 	};

-	let newAdminUsername: string;
-	let newAdminPassword: string;
-	let newAdminPermissions: number[];
+	let newAdminUsername = $state('');
+	let newAdminPassword = $state('');
+	let newAdminPermissions = $state([]);

 	async function addAdmin(username: string, password: string, permissions: Permissions) {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/admin`, {
@ -36,8 +38,11 @@
 			let res = await response.json();
 			$adminCount += 1;
 			res.permissions = new Permissions(res.permissions).asArray();
-			data.admins.push(res);
-			data.admins = data.admins;
+			admins.push(res);
+
+			newAdminUsername = '';
+			newAdminPassword = '';
+			newAdminPermissions = [];
 		} else {
 			throw new Error();
 		}
@ -79,35 +84,32 @@
 				await goto(`${env.PUBLIC_BASE_PATH}/`);
 			} else {
 				$adminCount -= 1;
-				data.admins.splice(
-					data.admins.findIndex((v) => v.id == id),
+				admins.splice(
+					admins.findIndex((v) => v.id == id),
 					1
 				);
-				data.admins = data.admins;
+				admins = admins;
 			}
 		} else {
 			throw new Error();
 		}
 	}

-	let errorMessage = '';
-
-	export let data: PageData;
-	let permissions = new Permissions(data.permissions);
+	let permissions = $state(new Permissions(data.permissions));
 </script>

 <table class="table table-zebra w-full">
 	<thead>
 		<tr>
-			<th />
+			<th></th>
 			<th>Benutzername</th>
 			<th>Passwort</th>
 			<th>Berechtigungen</th>
-			<th />
+			<th></th>
 		</tr>
 	</thead>
 	<tbody>
-		{#each data.admins as admin, i}
+		{#each admins as admin, i}
 			<tr>
 				<td>{i + 1}</td>
 				<td><Input type="text" bind:value={admin.username} disabled={!admin.edit} size="sm" /></td>
@ -133,7 +135,7 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									on:click={async (e) => {
+									onclick={async (e) => {
 										await buttonTriggeredRequest(
 											e,
 											updateAdmin(
@ -153,9 +155,9 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									on:click={() => {
+									onclick={() => {
 										admin.edit = false;
-										admin = admin.before;
+										admins[i] = admin.before;
 									}}
 								>
 									<NoSymbol size="18" />
@ -165,9 +167,9 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									on:click={() => {
+									onclick={() => {
+										admin.before = $state.snapshot(admin);
 										admin.edit = true;
-										admin.before = structuredClone(admin);
 									}}
 								>
 									<PencilSquare size="18" />
@ -176,7 +178,7 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									on:click={(e) => buttonTriggeredRequest(e, deleteAdmin(admin.id))}
+									onclick={(e) => buttonTriggeredRequest(e, deleteAdmin(admin.id))}
 								>
 									<Trash size="18" />
 								</button>
@ -187,7 +189,7 @@
 			</tr>
 		{/each}
 		<tr>
-			<td>{data.admins.length + 1}</td>
+			<td>{admins.length + 1}</td>
 			<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td>
 			<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td>
 			<td><Badges bind:value={newAdminPermissions} available={allPermissionBadges} /></td>
@ -196,7 +198,7 @@
 					<button
 						class="btn btn-sm btn-square"
 						disabled={!newAdminUsername || !newAdminPassword}
-						on:click={async (e) => {
+						onclick={async (e) => {
 							await buttonTriggeredRequest(
 								e,
 								addAdmin(newAdminUsername, newAdminPassword, new Permissions(newAdminPermissions))
@ -213,7 +215,3 @@
 		</tr>
 	</tbody>
 </table>
-
-<ErrorToast show={errorMessage !== ''}>
-	<span />
-</ErrorToast>
--- a/src/routes/admin/feedback/+page.svelte
+++ b/src/routes/admin/feedback/+page.svelte
@ -11,10 +11,10 @@
 	import Textarea from '$lib/components/Input/Textarea.svelte';
 	import { onDestroy, onMount } from 'svelte';

-	let feedbacks: (typeof Feedback.prototype.dataValues)[] = [];
+	let feedbacks: (typeof Feedback.prototype.dataValues)[] = $state([]);
 	let feedbacksPerRequest = 25;
-	let feedbackFilter = { event: null, content: null, username: null };
-	let activeFeedback: typeof Feedback.prototype.dataValues | null = null;
+	let feedbackFilter = $state({ event: null, content: null, username: null });
+	let activeFeedback: typeof Feedback.prototype.dataValues | null = $state(null);

 	async function fetchFeedback(extendedFilter?: {
 		limit?: number;
@ -57,13 +57,14 @@
 	onDestroy(() => {
 		if (browser) window.removeEventListener('hashchange', openHashReport);
 	});
-
-	$: if (feedbackFilter) fetchFeedback({ from: 0 }).then((r) => (feedbacks = r));
 </script>

 <div class="h-full flex flex-row">
 	<div class="w-full flex flex-col overflow-hidden">
-		<HeaderBar bind:feedbackFilter />
+		<HeaderBar
+			bind:feedbackFilter
+			onUpdate={() => fetchFeedback({ from: 0 }).then((r) => (feedbacks = r))}
+		/>
 		<hr class="divider my-1 mx-8 border-none" />
 		<table class="table table-fixed h-fit">
 			<thead>
@ -82,7 +83,7 @@
 					<tr
 						class="hover [&>*]:text-sm cursor-pointer"
 						class:bg-base-200={activeFeedback?.url_hash === feedback.url_hash}
-						on:click={async () => {
+						onclick={async () => {
 							await goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
 								replaceState: true
 							});
@ -96,8 +97,10 @@
 								<button
 									class="pl-1"
 									title="Nach Ersteller filtern"
-									on:click|stopPropagation={() =>
-										(feedbackFilter.username = feedback.user?.username)}
+									onclick={(e) => {
+										e.stopPropagation();
+										feedbackFilter.username = feedback.user.username;
+									}}
 								>
 									<MagnifyingGlass size="14" />
 								</button>
@ -125,18 +128,18 @@
 		>
 			<div class="absolute right-2 top-2 flex justify-center">
 				<form class="dropdown dropdown-end">
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<label tabindex="0" class="btn btn-sm btn-circle btn-ghost text-center">
 						<Share size="1rem" />
 					</label>
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<ul
 						tabindex="0"
 						class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-max"
 					>
 						<li>
 							<button
-								on:click={() => {
+								onclick={() => {
 									navigator.clipboard.writeText(
 										`${window.location.protocol}//${window.location.host}${env.PUBLIC_BASE_PATH}/admin/reports#${activeFeedback.url_hash}`
 									);
@ -145,7 +148,7 @@
 								Internen Link kopieren
 							</button>
 							<button
-								on:click={() =>
+								onclick={() =>
 									navigator.clipboard.writeText(
 										`${window.location.protocol}//${window.location.host}${env.PUBLIC_BASE_PATH}/report/${activeFeedback.url_hash}`
 									)}>Öffentlichen Link kopieren</button
@ -155,7 +158,7 @@
 				</form>
 				<button
 					class="btn btn-sm btn-circle btn-ghost"
-					on:click={() => {
+					onclick={() => {
 						activeFeedback = null;
 						goto(window.location.href.split('#')[0], { replaceState: true });
 					}}>✕</button
@ -169,7 +172,9 @@
 					value={activeFeedback.user?.username || ''}
 					pickyWidth={false}
 				>
-					<span slot="label">Nutzer</span>
+					{#snippet label()}
+						<span>Nutzer</span>
+					{/snippet}
 				</Input>
 				<Textarea readonly={true} rows={4} label="Inhalt" value={activeFeedback.content} />
 			</div>
--- a/src/routes/admin/feedback/+server.ts
+++ b/src/routes/admin/feedback/+server.ts
@ -20,7 +20,7 @@ export const POST = (async ({ request, cookies }) => {
 	}
 	const data = parseResult.data;

-	let feedbackFindOptions: Attributes<Feedback> = {
+	const feedbackFindOptions: Attributes<Feedback> = {
 		content: { [Op.not]: null }
 	};
 	if (data.event) Object.assign(feedbackFindOptions, { event: { [Op.like]: `%${data.event}%` } });
@ -35,7 +35,7 @@ export const POST = (async ({ request, cookies }) => {
 		});
 	if (data.hash) Object.assign(feedbackFindOptions, { url_hash: data.hash });

-	let feedback = await Feedback.findAll({
+	const feedback = await Feedback.findAll({
 		where: feedbackFindOptions,
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
--- a/src/routes/admin/feedback/HeaderBar.svelte
+++ b/src/routes/admin/feedback/HeaderBar.svelte
@ -1,21 +1,26 @@
 <script lang="ts">
 	import Input from '$lib/components/Input/Input.svelte';

-	export let feedbackFilter: { [k: string]: any } = {
-		event: null,
-		content: null,
-		username: null
-	};
+	let {
+		feedbackFilter = $bindable({ event: null, content: null, username: null }),
+		onUpdate
+	}: { feedbackFilter: { [k: string]: any }; onUpdate: () => void } = $props();
 </script>

 <form class="flex flex-row justify-center space-x-4 mx-4 my-2">
-	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.username}>
-		<span slot="label">Nutzer</span>
+	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.username} oninput={onUpdate}>
+		{#snippet label()}
+			<span>Nutzer</span>
+		{/snippet}
 	</Input>
-	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.event}>
-		<span slot="label">Event</span>
+	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.event} oninput={onUpdate}>
+		{#snippet label()}
+			<span>Event</span>
+		{/snippet}
 	</Input>
-	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.content}>
-		<span slot="label">Inhalt</span>
+	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.content} oninput={onUpdate}>
+		{#snippet label()}
+			<span>Inhalt</span>
+		{/snippet}
 	</Input>
 </form>
--- a/src/routes/admin/login/+page.svelte
+++ b/src/routes/admin/login/+page.svelte
@ -3,7 +3,8 @@
 	import { env } from '$env/dynamic/public';
 	import { errorMessage } from '$lib/stores';

-	let passwordValue: string;
+	let password = $state('');
+
 	async function login() {
 		// eslint-disable-next-line no-async-promise-executor
 		loginRequest = new Promise(async (resolve) => {
@ -12,10 +13,10 @@
 				body: JSON.stringify(Object.fromEntries(new FormData(document.forms[0])))
 			});
 			if (response.ok) {
-				window.location = `${env.PUBLIC_BASE_PATH}/admin`;
+				window.location.href = `${env.PUBLIC_BASE_PATH}/admin`;
 				resolve();
 			} else if (response.status == 401) {
-				passwordValue = '';
+				password = '';
 				$errorMessage = 'Nutzername oder Passwort falsch';
 				resolve();
 			} else {
@ -25,25 +26,29 @@
 		});
 	}

-	let loginRequest: Promise<void> | null = null;
+	let loginRequest: Promise<void> | null = $state(null);
 </script>

 <div class="card px-14 py-6 shadow-lg">
 	<h1 class="text-center text-4xl mt-2 mb-4">Craftattack Admin Login</h1>
-	<form class="flex flex-col items-center" on:submit|preventDefault={login}>
+	<form
+		class="flex flex-col items-center"
+		onsubmit={(e) => {
+			e.preventDefault();
+			login();
+		}}
+	>
 		<div class="flex flex-col justify-center items-center">
 			<div class="grid gap-4">
 				<Input id="username" name="username" type="text" required={true}>
-					<span slot="label">Nutzername</span>
+					{#snippet label()}
+						<span>Nutzername</span>
+					{/snippet}
 				</Input>
-				<Input
-					id="password"
-					name="password"
-					type="password"
-					required={true}
-					bind:value={passwordValue}
-				>
-					<span slot="label">Passwort</span>
+				<Input id="password" name="password" type="password" required={true} bind:value={password}>
+					{#snippet label()}
+						<span>Passwort</span>
+					{/snippet}
 				</Input>
 			</div>
 		</div>
@ -56,22 +61,7 @@
 					{#await loginRequest}
 						<span
 							class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
-						/>
-					{:catch error}
-						<dialog
-							class="modal"
-							on:close={() => setTimeout(() => (loginRequest = null), 200)}
-							open
-						>
-							<form method="dialog" class="modal-box">
-								<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-								<h3 class="font-bold text-lg">Error</h3>
-								<p class="py-4">{error.message}</p>
-							</form>
-							<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
-								<button>close</button>
-							</form>
-						</dialog>
+						></span>
 					{/await}
 				{/if}
 			{/key}
--- a/src/routes/admin/reports/+page.svelte
+++ b/src/routes/admin/reports/+page.svelte
@ -1,6 +1,5 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
-	import type { PageData } from './$types';
 	import type { Report } from '$lib/server/database';
 	import { browser } from '$app/environment';
 	import { env } from '$env/dynamic/public';
@ -18,12 +17,12 @@
 	import { usernameSuggestions } from '$lib/utils';
 	import PaginationTableBody from '$lib/components/PaginationTable/PaginationTableBody.svelte';

-	export let data: PageData;
+	let { data } = $props();

-	let reports: (typeof Report.prototype.dataValues)[] = [];
+	let reports: (typeof Report.prototype.dataValues)[] = $state([]);
 	let reportsPerRequest = 25;
-	let reportFilter = { draft: false, status: null, reporter: null, reported: null };
-	let activeReport: typeof Report.prototype.dataValues | null = null;
+	let reportFilter = $state({ draft: false, status: null, reporter: null, reported: null });
+	let activeReport: typeof Report.prototype.dataValues | null = $state(null);

 	async function fetchReports(extendedFilter?: {
 		hash?: string;
@ -94,19 +93,20 @@

 	let saveActiveReportChangesModal: HTMLDialogElement;
 	let newReportModal: HTMLDialogElement;
-
-	$: if (reportFilter) fetchReports({ from: 0 }).then((r) => (reports = r.reports));
 </script>

 <div class="h-full flex flex-row">
 	<div class="w-full flex flex-col overflow-scroll">
 		<div class="grid grid-cols-[5fr_1fr_10fr_1fr_5fr]">
-			<div />
-			<div />
-			<HeaderBar bind:reportFilter />
-			<div class="divider divider-horizontal my-auto h-3/4" />
+			<div></div>
+			<div></div>
+			<HeaderBar
+				bind:reportFilter
+				onUpdate={() => fetchReports({ from: 0 }).then((r) => (reports = r.reports))}
+			/>
+			<div class="divider divider-horizontal my-auto h-3/4"></div>
 			<div class="flex items-center">
-				<button class="btn" on:click={() => newReportModal.show()}>
+				<button class="btn" onclick={() => newReportModal.show()}>
 					<Plus />
 					<span>Neuer Report</span>
 				</button>
@ -140,7 +140,7 @@
 					<tr
 						class="hover [&>*]:text-sm cursor-pointer"
 						class:bg-base-200={activeReport?.url_hash === report.url_hash}
-						on:click={() => {
+						onclick={() => {
 							goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
 								replaceState: true
 							});
@ -154,7 +154,10 @@
 							<button
 								class="pl-1"
 								title="Nach Ersteller filtern"
-								on:click|stopPropagation={() => (reportFilter.reporter = report.reporter.username)}
+								onclick={(e) => {
+									e.stopPropagation();
+									reportFilter.reporter = report.reporter.username;
+								}}
 							>
 								<MagnifyingGlass size="14" />
 							</button>
@ -165,8 +168,10 @@
 								<button
 									class="pl-1"
 									title="Nach Reportetem Spieler filtern"
-									on:click|stopPropagation={() =>
-										(reportFilter.reported = report.reported.username)}
+									onclick={(e) => {
+										e.stopPropagation();
+										reportFilter.reported = report.reported.username;
+									}}
 								>
 									<MagnifyingGlass size="14" />
 								</button>
@ -203,18 +208,18 @@
 		>
 			<div class="absolute right-2 top-2 flex justify-center">
 				<form class="dropdown dropdown-end">
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex a11y-label-has-associated-control -->
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<label tabindex="0" class="btn btn-sm btn-circle btn-ghost text-center">
 						<Share size="1rem" />
 					</label>
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<ul
 						tabindex="0"
 						class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-max"
 					>
 						<li>
 							<button
-								on:click={() => {
+								onclick={() => {
 									navigator.clipboard.writeText(
 										`${window.location.protocol}//${window.location.host}${env.PUBLIC_BASE_PATH}/admin/reports#${activeReport.url_hash}`
 									);
@ -223,7 +228,7 @@
 								Internen Link kopieren
 							</button>
 							<button
-								on:click={() =>
+								onclick={() =>
 									navigator.clipboard.writeText(
 										`${window.location.protocol}//${window.location.host}${env.PUBLIC_BASE_PATH}/report/${activeReport.url_hash}`
 									)}>Öffentlichen Link kopieren</button
@ -233,7 +238,7 @@
 				</form>
 				<button
 					class="btn btn-sm btn-circle btn-ghost"
-					on:click={() => {
+					onclick={() => {
 						activeReport = null;
 						goto(window.location.href.split('#')[0], { replaceState: true });
 					}}>✕</button
@ -242,7 +247,9 @@
 			<h3 class="font-roboto font-semibold text-2xl mb-2">Report</h3>
 			<div class="w-full">
 				<Input readonly={true} size="sm" value={activeReport.reporter.username} pickyWidth={false}>
-					<span slot="label">Reporter</span>
+					{#snippet label()}
+						<span>Reporter</span>
+					{/snippet}
 				</Input>
 				<Search
 					size="sm"
@ -252,17 +259,17 @@
 					invalidMessage="Es können nur registrierte Spieler reportet werden"
 					label="Reporteter User"
 					inputValue={activeReport.reported?.username || ''}
-					on:submit={(e) =>
+					onsubmit={(e) =>
 						(activeReport.reported = {
 							...activeReport.reported,
-							username: e.detail.input,
-							uuid: e.detail.value
+							username: e.input,
+							uuid: e.value
 						})}
 				/>
 				<Textarea readonly={true} rows={1} label="Report Grund" value={activeReport.subject} />
 				<Textarea readonly={true} rows={4} label="Report Details" value={activeReport.body} />
 			</div>
-			<div class="divider mx-4" />
+			<div class="divider mx-4"></div>
 			<div>
 				<div
 					class="w-full"
@ -318,7 +325,7 @@
 				<Input
 					type="submit"
 					value="Speichern"
-					on:click={() => saveActiveReportChangesModal.show()}
+					onclick={() => saveActiveReportChangesModal.show()}
 				/>
 			</div>
 		</div>
@ -333,7 +340,7 @@
 			<Input
 				type="submit"
 				value="Speichern"
-				on:click={async () => {
+				onclick={async () => {
 					await updateActiveReport();
 					if (activeReport.reported?.username) {
 						if (activeReport.reported?.id === undefined) {
@ -363,9 +370,9 @@

 <dialog class="modal" bind:this={newReportModal}>
 	<NewReportModal
-		on:submit={(e) => {
-			if (!e.detail.draft) $reportCount += 1;
-			reports = [e.detail, ...reports];
+		onSubmit={(e) => {
+			if (!e.draft) $reportCount += 1;
+			reports = [e, ...reports];
 			activeReport = reports[0];
 			newReportModal.close();
 		}}
--- a/src/routes/admin/reports/HeaderBar.svelte
+++ b/src/routes/admin/reports/HeaderBar.svelte
@ -2,28 +2,38 @@
 	import Select from '$lib/components/Input/Select.svelte';
 	import Input from '$lib/components/Input/Input.svelte';

-	export let reportFilter = {
-		reporter: null,
-		reported: null,
-		status: null,
-		draft: false
-	};
+	let {
+		reportFilter = $bindable({
+			reporter: undefined,
+			reported: undefined,
+			status: undefined,
+			draft: false
+		}),
+		onUpdate
+	}: {
+		reportFilter: { reporter?: string; reported?: string; status?: string; draft: false };
+		onUpdate: () => void;
+	} = $props();
 </script>

 <form class="flex flex-row justify-center space-x-4 mx-4 my-2">
-	<Input size="sm" placeholder="Alle" bind:value={reportFilter.reporter}>
-		<span slot="label">Report Ersteller</span>
+	<Input size="sm" placeholder="Alle" bind:value={reportFilter.reporter} oninput={onUpdate}>
+		{#snippet label()}
+			<span>Report Ersteller</span>
+		{/snippet}
 	</Input>
-	<Input size="sm" placeholder="Alle" bind:value={reportFilter.reported}>
-		<span slot="label">Reportete Spieler</span>
+	<Input size="sm" placeholder="Alle" bind:value={reportFilter.reported} oninput={onUpdate}>
+		{#snippet label()}
+			<span>Reporteter Spieler</span>
+		{/snippet}
 	</Input>
-	<Select label="Bearbeitungsstatus" size="sm" bind:value={reportFilter.status}>
+	<Select label="Bearbeitungsstatus" size="sm" bind:value={reportFilter.status} onChange={onUpdate}>
 		<option value="none">Unbearbeitet</option>
 		<option value="review">In Bearbeitung</option>
 		<option value={null}>Unbearbeitet & In Bearbeitung</option>
 		<option value="reviewed">Bearbeitet</option>
 	</Select>
-	<Select label="Reportstatus" size="sm" bind:value={reportFilter.draft}>
+	<Select label="Reportstatus" size="sm" bind:value={reportFilter.draft} onChange={onUpdate}>
 		<option value={false}>Erstellt</option>
 		<option value={true}>Entwurf</option>
 	</Select>
--- a/src/routes/admin/reports/NewReportModal.svelte
+++ b/src/routes/admin/reports/NewReportModal.svelte
@ -3,15 +3,15 @@
 	import { env } from '$env/dynamic/public';
 	import Textarea from '$lib/components/Input/Textarea.svelte';
 	import Search from '$lib/components/Input/Search.svelte';
-	import { createEventDispatcher } from 'svelte';
 	import { usernameSuggestions } from '$lib/utils';
+	import type { Report } from '$lib/server/database';

-	const dispatch = createEventDispatcher();
+	let { onSubmit }: { onSubmit: (data: typeof Report.prototype.dataValues) => void } = $props();

-	let reporter: string;
-	let reported: string;
-	let reason = '';
-	let body = '';
+	let reporter: string | undefined = $state();
+	let reported: string | undefined = $state();
+	let reason = $state('');
+	let body = $state('');

 	async function newReport() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/reports`, {
@ -23,7 +23,7 @@
 				body: body || null
 			})
 		});
-		if (response.ok) dispatch('submit', await response.json());
+		if (response.ok) onSubmit(await response.json());
 	}

 	let globalCloseForm: HTMLFormElement;
@ -35,7 +35,10 @@
 <form method="dialog" class="modal-box" bind:this={reportForm}>
 	<button
 		class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-		on:click|preventDefault={() => globalCloseForm.submit()}>✕</button
+		onclick={(e) => {
+			e.preventDefault();
+			globalCloseForm.submit();
+		}}>✕</button
 	>
 	<h3 class="font-roboto text-3xl">Neuer Report</h3>
 	<div class="space-y-2 mt-2 px-1 max-h-[70vh] overflow-y-scroll">
@ -59,9 +62,11 @@
 				bind:value={reported}
 			/>
 		</div>
-		<div class="divider mx-4 pt-3" />
+		<div class="divider mx-4 pt-3"></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>
 			<Textarea rows={4} label="Details über den Report Grund" bind:value={body} />
@ -71,9 +76,9 @@
 		<Input
 			type="submit"
 			value="Erstellen"
-			on:click={(e) => {
+			onclick={(e) => {
 				if (reportForm.checkValidity()) {
-					e.detail.preventDefault();
+					e.preventDefault();
 					confirmDialog.show();
 				}
 			}}
@ -81,8 +86,8 @@
 		<Input
 			type="submit"
 			value="Abbrechen"
-			on:click={(e) => {
-				e.detail.preventDefault();
+			onclick={(e) => {
+				e.preventDefault();
 				globalCloseForm.submit();
 			}}
 		/>
@ -111,7 +116,7 @@
 			<Input
 				type="submit"
 				value="Erstellen"
-				on:click={async () => {
+				onclick={async () => {
 					await newReport();
 					globalCloseForm.submit();
 				}}
--- a/src/routes/admin/settings/+page.server.ts
+++ b/src/routes/admin/settings/+page.server.ts
@ -16,7 +16,6 @@ export const load: PageServerLoad = async ({ parent, cookies }) => {
 		(prev, curr) => {
 			return { ...prev, [curr.key]: curr.value };
 		},
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		{} as { [key: string]: any }
 	);

--- a/src/routes/admin/settings/+page.svelte
+++ b/src/routes/admin/settings/+page.svelte
@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import { env } from '$env/dynamic/public';
-	export let data: PageData;
-	let settings = structuredClone(data.settings);
+
+	let { data } = $props();
+
+	let settings = $state($state.snapshot(data.settings));

 	async function change() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/admin/settings`, {
@ -23,7 +25,7 @@
 			} as PageData['settings'])
 		});
 		data.settings = settings;
-		settings = structuredClone(data.settings);
+		settings = $state.snapshot(data.settings);
 	}

 	function returnIfNoDup<T>(value: T, original: T): T | undefined {
@ -68,7 +70,7 @@
 		<button
 			class="btn btn-success mt-auto"
 			class:btn-disabled={JSON.stringify(data.settings) === JSON.stringify(settings)}
-			on:click={change}>Speichern</button
+			onclick={change}>Speichern</button
 		>
 	</div>
 </div>
--- a/src/routes/admin/users/+page.svelte
+++ b/src/routes/admin/users/+page.svelte
@ -1,10 +1,9 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import { Check, NoSymbol, PencilSquare, Plus, Trash } from 'svelte-heros-v2';
 	import Input from '$lib/components/Input/Input.svelte';
 	import Select from '$lib/components/Input/Select.svelte';
 	import { env } from '$env/dynamic/public';
-	import type { Report, User } from '$lib/server/database';
+	import type { User } from '$lib/server/database';
 	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { browser } from '$app/environment';
 	import HeaderBar from './HeaderBar.svelte';
@ -13,11 +12,9 @@
 	import NewUserModal from './NewUserModal.svelte';
 	import PaginationTableBody from '$lib/components/PaginationTable/PaginationTableBody.svelte';

-	export let data: PageData;
-
-	let users: (typeof User.prototype.dataValues)[] = [];
+	let users: (typeof User.prototype.dataValues)[] = $state([]);
 	let usersPerRequest = 25;
-	let userFilter: { [k: string]: any } = { name: null, playertype: null };
+	let userFilter: { [k: string]: any } = $state({ name: null, playertype: null });

 	let userTableContainerElement: HTMLDivElement;
 	let newUserModal: HTMLDialogElement;
@ -64,18 +61,16 @@
 			users = users;
 		}
 	}
-
-	$: if (userFilter) fetchUsers({ from: 0 }).then((u) => (users = u));
 </script>

 <div class="h-full flex flex-col overflow-hidden">
 	<div class="grid grid-cols-[10fr_1fr_10fr_1fr_10fr]">
-		<div />
-		<div />
-		<HeaderBar bind:userFilter />
-		<div class="divider divider-horizontal my-auto h-3/4" />
+		<div></div>
+		<div></div>
+		<HeaderBar bind:userFilter onUpdate={() => fetchUsers({ from: 0 }).then((u) => (users = u))} />
+		<div class="divider divider-horizontal my-auto h-3/4"></div>
 		<div class="flex items-center">
-			<button class="btn" on:click={() => newUserModal.show()}>
+			<button class="btn" onclick={() => newUserModal.show()}>
 				<Plus />
 				<span>Neuer Spieler</span>
 			</button>
@ -87,16 +82,16 @@
 			<thead>
 				<!-- prettier-ignore -->
 				<SortableTr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
-					<th />
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'firstname', asc: e.detail.asc}}}>Vorname</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'lastname', asc: e.detail.asc}}}>Nachname</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'birthday', asc: e.detail.asc}}}>Geburtstag</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'telephone', asc: e.detail.asc}}}>Telefon</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'username', asc: e.detail.asc}}}>Username</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'playertype', asc: e.detail.asc}}}>Minecraft Edition</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'password', asc: e.detail.asc}}}>Passwort</SortableTh>
-					<SortableTh on:sort={(e) => userFilter = {...userFilter, sort: {key: 'uuid', asc: e.detail.asc}}}>UUID</SortableTh>
-					<th />
+					<th></th>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'firstname', asc: e.asc}}}>Vorname</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'lastname', asc: e.asc}}}>Nachname</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'birthday', asc: e.asc}}}>Geburtstag</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'telephone', asc: e.asc}}}>Telefon</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'username', asc: e.asc}}}>Username</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'playertype', asc: e.asc}}}>Minecraft Edition</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'password', asc: e.asc}}}>Passwort</SortableTh>
+					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'uuid', asc: e.asc}}}>UUID</SortableTh>
+					<th></th>
 				</SortableTr>
 			</thead>
 			<PaginationTableBody
@ -117,7 +112,7 @@
 							<Input
 								type="date"
 								value={new Date(user.birthday).toISOString().split('T')[0]}
-								on:input={(e) => (user.birthday = e.detail.target.valueAsDate.toISOString())}
+								oninput={(e) => (user.birthday = e.currentTarget.valueAsDate.toISOString())}
 								disabled={!user.edit}
 								size="sm"
 							/>
@ -146,7 +141,7 @@
 								{#if user.edit}
 									<button
 										class="btn btn-sm btn-square"
-										on:click={async (e) => {
+										onclick={async (e) => {
 											await buttonTriggeredRequest(e, updateUser(user));
 											user.edit = false;
 										}}
@ -155,9 +150,9 @@
 									</button>
 									<button
 										class="btn btn-sm btn-square"
-										on:click={() => {
+										onclick={() => {
 											user.edit = false;
-											user = user.before;
+											users[i] = user.before;
 										}}
 									>
 										<NoSymbol size="18" />
@ -165,8 +160,8 @@
 								{:else}
 									<button
 										class="btn btn-sm btn-square"
-										on:click={() => {
-											user.before = structuredClone(user);
+										onclick={() => {
+											user.before = $state.snapshot(user);
 											user.edit = true;
 										}}
 									>
@ -174,7 +169,7 @@
 									</button>
 									<button
 										class="btn btn-sm btn-square"
-										on:click={(e) => buttonTriggeredRequest(e, deleteUser(user.id))}
+										onclick={(e) => buttonTriggeredRequest(e, deleteUser(user.id))}
 									>
 										<Trash size="18" />
 									</button>
@ -190,8 +185,8 @@

 <dialog class="modal" bind:this={newUserModal}>
 	<NewUserModal
-		on:submit={(e) => {
-			users = [...users, e.detail];
+		onSubmit={(e) => {
+			users = [...users, e];
 			newUserModal.close();
 		}}
 	/>
--- a/src/routes/admin/users/+server.ts
+++ b/src/routes/admin/users/+server.ts
@ -3,7 +3,13 @@ import { Permissions } from '$lib/permissions';
 import { error, type RequestHandler } from '@sveltejs/kit';
 import { User } from '$lib/server/database';
 import { type Attributes, Op } from 'sequelize';
-import { ApiError, getJavaUuid, getNoAuthUuid, RateLimitError, UserNotFoundError } from '$lib/server/minecraft';
+import {
+	ApiError,
+	getJavaUuid,
+	getNoAuthUuid,
+	RateLimitError,
+	UserNotFoundError
+} from '$lib/server/minecraft';
 import { UserAddSchema, UserDeleteSchema, UserEditSchema, UserListSchema } from './schema';

 export const POST = (async ({ request, cookies }) => {
--- a/src/routes/admin/users/HeaderBar.svelte
+++ b/src/routes/admin/users/HeaderBar.svelte
@ -2,20 +2,34 @@
 	import Select from '$lib/components/Input/Select.svelte';
 	import Input from '$lib/components/Input/Input.svelte';

-	export let userFilter: { [k: string]: any } = {
-		name: null,
-		playertype: null
-	};
+	let {
+		userFilter = $bindable({ name: null, playertype: null }),
+		onUpdate
+	}: { userFilter: { [k: string]: any }; onUpdate: () => void } = $props();
 </script>

 <form class="flex flex-row justify-center items-center space-x-4 my-2 w-full">
 	<div class="w-full">
-		<Input size="sm" placeholder="..." bind:value={userFilter.name} pickyWidth={false}>
-			<span slot="label">Username</span>
+		<Input
+			size="sm"
+			placeholder="..."
+			bind:value={userFilter.name}
+			pickyWidth={false}
+			oninput={onUpdate}
+		>
+			{#snippet label()}
+				<span>Username</span>
+			{/snippet}
 		</Input>
 	</div>
 	<div class="w-full">
-		<Select label="Edition" size="sm" bind:value={userFilter.playertype} pickyWidth={false}>
+		<Select
+			label="Edition"
+			size="sm"
+			bind:value={userFilter.playertype}
+			pickyWidth={false}
+			onChange={onUpdate}
+		>
 			<option value={null}>Alle</option>
 			<option value="java">Java</option>
 			<option value="bedrock">Bedrock</option>
--- a/src/routes/admin/users/NewUserModal.svelte
+++ b/src/routes/admin/users/NewUserModal.svelte
@ -3,16 +3,33 @@
 	import { env } from '$env/dynamic/public';
 	import Select from '$lib/components/Input/Select.svelte';
 	import { errorMessage } from '$lib/stores';
-	import { createEventDispatcher } from 'svelte';

-	const dispatch = createEventDispatcher();
+	let {
+		onSubmit
+	}: {
+		onSubmit: ({
+			firstname,
+			lastname,
+			birthday,
+			telephone,
+			username,
+			playertype
+		}: {
+			firstname: string;
+			lastname: string;
+			birthday: string;
+			telephone: string;
+			username: string;
+			playertype: string;
+		}) => void;
+	} = $props();

-	let firstname: string;
-	let lastname: string;
-	let birthday: string;
-	let phone: string;
-	let username: string;
-	let playertype = 'java';
+	let firstname: string = $state('');
+	let lastname: string = $state('');
+	let birthday: string = $state('');
+	let phone: string = $state('');
+	let username: string = $state('');
+	let playertype = $state('java');

 	async function newUser() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
@ -27,7 +44,7 @@
 			})
 		});
 		if (response.ok) {
-			dispatch('submit', {
+			onSubmit({
 				firstname: firstname,
 				lastname: lastname,
 				birthday: birthday,
@ -50,24 +67,37 @@
 <form method="dialog" class="modal-box" bind:this={reportForm}>
 	<button
 		class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-		on:click|preventDefault={() => globalCloseForm.submit()}>✕</button
+		onclick={(e) => {
+			e.preventDefault();
+			globalCloseForm.submit();
+		}}>✕</button
 	>
 	<h3 class="font-roboto text-3xl">Neuer Spieler</h3>
 	<div class="grid grid-cols-2 gap-4">
 		<Input type="text" required bind:value={firstname}>
-			<span slot="label">Vorname</span>
+			{#snippet label()}
+				<span>Vorname</span>
+			{/snippet}
 		</Input>
 		<Input type="text" required bind:value={lastname}>
-			<span slot="label">Nachname</span>
+			{#snippet label()}
+				<span>Nachname</span>
+			{/snippet}
 		</Input>
 		<Input type="date" required bind:value={birthday}>
-			<span slot="label">Geburtstag</span>
+			{#snippet label()}
+				<span>Geburtstag</span>
+			{/snippet}
 		</Input>
 		<Input type="tel" bind:value={phone}>
-			<span slot="label">Telefonnummer</span>
+			{#snippet label()}
+				<span>Telefonnummer</span>
+			{/snippet}
 		</Input>
 		<Input type="text" required bind:value={username}>
-			<span slot="label">Minecraft-Spielername</span>
+			{#snippet label()}
+				<span>Minecraft-Spielername</span>
+			{/snippet}
 		</Input>
 		<Select required label="Edition" bind:value={playertype}>
 			<option value="java">Java Edition</option>
@ -78,9 +108,9 @@
 		<Input
 			type="submit"
 			value="Hinzufügen"
-			on:click={(e) => {
+			onclick={(e) => {
 				if (reportForm.checkValidity()) {
-					e.detail.preventDefault();
+					e.preventDefault();
 					confirmDialog.show();
 				}
 			}}
@ -88,8 +118,8 @@
 		<Input
 			type="submit"
 			value="Abbrechen"
-			on:click={(e) => {
-				e.detail.preventDefault();
+			onclick={(e) => {
+				e.preventDefault();
 				globalCloseForm.submit();
 			}}
 		/>
@ -104,7 +134,7 @@
 		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		<h3 class="font-roboto text-xl mb-2">Spieler hinzufügen?</h3>
 		<div class="flex flex-row space-x-2 mt-6">
-			<Input type="submit" value="Hinzufügen" on:click={newUser} />
+			<Input type="submit" value="Hinzufügen" onclick={newUser} />
 			<Input type="submit" value="Abbrechen" />
 		</div>
 	</form>
--- a/src/routes/api/feedback/+server.ts
+++ b/src/routes/api/feedback/+server.ts
@ -31,8 +31,6 @@ export const POST = (async ({ request, url }) => {

 	await Feedback.bulkCreate(Object.values(feedback));

-	console.log(Object.entries(feedback));
-
 	return new Response(
 		JSON.stringify(
 			Object.entries(feedback).reduce(
--- a/src/routes/faq/+page.svelte
+++ b/src/routes/faq/+page.svelte
@ -1,9 +1,6 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import { env } from '$env/dynamic/public';

-	export let data: PageData;
-
 	let faq = [
 		{
 			section: 'Allgemein',
@ -204,10 +201,11 @@ sind nicht gestattet.</p>`
 						<input type="checkbox" autocomplete="off" />
 						<div class="collapse-title">{question.title}</div>
 						<div class="collapse-content">
+							<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 							<div class="ml-2">{@html question.content}</div>
 						</div>
 					</div>
-					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
 				{/each}
 			</div>
 		</div>
--- a/src/routes/feedback/+page.svelte
+++ b/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';
 		}}
--- a/src/routes/feedback/[...url_hash]/+page.svelte
+++ b/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>
--- a/src/routes/feedback/[...url_hash]/FeedbackDraft.svelte
+++ b/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" />
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@ -2,17 +2,16 @@
 	import { fly } from 'svelte/transition';
 	import RegistrationComplete from './RegistrationComplete.svelte';
 	import Register from './Register.svelte';
-	import type { PageData } from './$types';

-	let registered = false;
-	let firstname: string | null = null;
-	let lastname: string | null = null;
-	let birthday: Date | null = null;
-	let phone: string | null = null;
-	let username: string | null = null;
-	let edition: string | null = null;
+	let { data } = $props();

-	export let data: PageData;
+	let registered = $state(false);
+	let firstname: string | null = $state(null);
+	let lastname: string | null = $state(null);
+	let birthday: Date | null = $state(null);
+	let phone: string | null = $state(null);
+	let username: string | null = $state(null);
+	let edition: string | null = $state(null);
 </script>

 <svelte:head>
@ -36,15 +35,15 @@
 	{#if !registered}
 		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
 			<Register
-				on:submit={(e) => {
+				submit={(e) => {
 					registered = true;
-					firstname = e.detail.firstname;
-					lastname = e.detail.lastname;
-					birthday = e.detail.birthday;
-					phone = e.detail.phone;
-					phone = e.detail.phone;
-					username = e.detail.username;
-					edition = e.detail.edition;
+					firstname = e.firstname;
+					lastname = e.lastname;
+					birthday = e.birthday;
+					phone = e.phone;
+					phone = e.phone;
+					username = e.username;
+					edition = e.edition;
 				}}
 			/>
 		</div>
@ -57,7 +56,7 @@
 				{phone}
 				{username}
 				{edition}
-				on:close={() => (registered = false)}
+				close={() => (registered = false)}
 			/>
 		</div>
 	{/if}
--- a/src/routes/register/+server.ts
+++ b/src/routes/register/+server.ts
@ -17,6 +17,7 @@ export const POST = (async ({ request }) => {
 	}

 	try {
+		// eslint-disable-next-line no-var
 		var data = RegisterSchema.parse(await request.json());
 	} catch (e) {
 		console.error(e);
--- a/src/routes/register/Register.svelte
+++ b/src/routes/register/Register.svelte
@ -1,27 +1,54 @@
 <script lang="ts">
 	import Select from '$lib/components/Input/Select.svelte';
 	import Input from '$lib/components/Input/Input.svelte';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 	import { rulesShort } from '$lib/rules';
 	import { RegisterSchema } from './schema';
 	import { dev } from '$app/environment';

-	const dispatch = createEventDispatcher();
+	let {
+		submit
+	}: {
+		submit: ({
+			firstname,
+			lastname,
+			birthday,
+			phone,
+			username,
+			edition
+		}: {
+			firstname: string;
+			lastname: string;
+			birthday: Date;
+			phone: string;
+			username: string;
+			edition: string;
+		}) => void;
+	} = $props();

 	const modalTimeoutSeconds = dev ? 0 : 30;

-	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	let checkInputs = () => {};
-	let playertype = 'java';
-	let firstnameInput: HTMLInputElement;
-	let lastnameInput: HTMLInputElement;
-	let birthdayInput: HTMLInputElement;
-	let phoneInput: HTMLInputElement;
-	let usernameInput: HTMLInputElement;
-	let privacyInput: HTMLInputElement;
-	let logsInput: HTMLInputElement;
-	let rulesInput: HTMLInputElement;
+	let checkInputs = $state(() => {});
+	let playertype = $state('java');
+	/* eslint-disable @typescript-eslint/ban-ts-comment */
+	// @ts-ignore
+	let firstnameInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let lastnameInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let birthdayInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let phoneInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let usernameInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let privacyInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let logsInput: HTMLInputElement = $state();
+	// @ts-ignore
+	let rulesInput: HTMLInputElement = $state();
+	/* eslint-enable @typescript-eslint/ban-ts-comment */
 	onMount(() => {
 		checkInputs = () => {
 			let allInputs = [
@ -58,10 +85,10 @@
 				body: JSON.stringify(Object.fromEntries(new FormData(document.forms[0])))
 			});
 			if (response.ok) {
-				dispatch('submit', {
+				submit({
 					firstname: firstnameInput.value,
 					lastname: lastnameInput.value,
-					birthday: birthdayInput.valueAsDate,
+					birthday: birthdayInput.valueAsDate!,
 					phone: phoneInput.value,
 					username: usernameInput.value,
 					edition: playertype == 'java' ? 'Java (PC)' : 'Bedrock (Konsolen und Handys)'
@ -80,17 +107,24 @@

 	let rulesAccepted = false;
 	let rulesModal: HTMLDialogElement;
-	let rulesModalSecondsOpened = 0;
+	let rulesModalSecondsOpened = $state(0);
+	// eslint-disable-next-line no-undef
 	let rulesModalTimer: number | NodeJS.Timeout | undefined = undefined;

-	let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
-	let registerRequest: Promise<void> | null = null;
-
-	let errorMessage: string = '';
+	let inputsInvalidMessage: string | null = $state('Bitte fülle alle erforderlichen Felder aus');
+	let registerRequest: Promise<void> | null = $state(null);
+	let errorMessage: string = $state('');
 </script>

 <h1 class="text-center text-3xl lg:text-5xl">Anmeldung</h1>
-<form id="form" on:input={checkInputs} on:submit|preventDefault={sendRegister}>
+<form
+	id="form"
+	oninput={checkInputs}
+	onsubmit={(e) => {
+		e.preventDefault();
+		sendRegister();
+	}}
+>
 	<div class="divider">Persönliche Angaben</div>
 	<div class="mx-2 grid grid-cols-1 sm:grid-cols-2 gap-y-4">
 		<Input
@ -100,7 +134,9 @@
 			required={true}
 			bind:inputElement={firstnameInput}
 		>
-			<span slot="label">Vorname</span>
+			{#snippet label()}
+				<span>Vorname</span>
+			{/snippet}
 		</Input>
 		<Input
 			id="lastname"
@ -109,7 +145,9 @@
 			required={true}
 			bind:inputElement={lastnameInput}
 		>
-			<span slot="label">Nachname</span>
+			{#snippet label()}
+				<span>Nachname</span>
+			{/snippet}
 		</Input>
 		<Input
 			id="birthday"
@ -118,8 +156,12 @@
 			required={true}
 			bind:inputElement={birthdayInput}
 		>
-			<span slot="label">Geburtstag</span>
-			<span slot="notice">Die Angabe hat keine Auswirkungen auf das Spielgeschehen</span>
+			{#snippet label()}
+				<span>Geburtstag</span>
+			{/snippet}
+			{#snippet notice()}
+				<span>Die Angabe hat keine Auswirkungen auf das Spielgeschehen</span>
+			{/snippet}
 		</Input>
 		<Input
 			id="telephone"
@ -128,12 +170,16 @@
 			bind:inputElement={phoneInput}
 			pattern={new RegExp(/^[+()\s/\d]+$/)}
 		>
-			<span slot="label">Telefonnummer</span>
-			<p slot="notice">
-				Diese nutzen wir, um Dich in der Whatsapp-Gruppe zuzuordnen und kontaktieren zu können.
-				<br />
-				<b>Die Angabe ist freiwillig, hilft den Administratoren jedoch sehr!</b>
-			</p>
+			{#snippet label()}
+				<span>Telefonnummer</span>
+			{/snippet}
+			{#snippet notice()}
+				<p>
+					Diese nutzen wir, um Dich in der Whatsapp-Gruppe zuzuordnen und kontaktieren zu können.
+					<br />
+					<b>Die Angabe ist freiwillig, hilft den Administratoren jedoch sehr!</b>
+				</p>
+			{/snippet}
 		</Input>
 	</div>
 	<div class="divider">Spiel</div>
@ -145,7 +191,9 @@
 			required={true}
 			bind:inputElement={usernameInput}
 		>
-			<span slot="label">Minecraft-Spielername</span>
+			{#snippet label()}
+				<span>Minecraft-Spielername</span>
+			{/snippet}
 		</Input>
 		<Select
 			id="playertype"
@ -158,7 +206,7 @@
 			<option value="bedrock">Bedrock Edition (Konsolen und Handys)</option>
 		</Select>
 	</div>
-	<div class="divider" />
+	<div class="divider"></div>
 	<div class="mx-2 grid gap-y-3 mb-6">
 		<div class="flex gap-4">
 			<Input
@ -199,9 +247,9 @@
 				name="rules"
 				type="checkbox"
 				required={true}
-				on:input={(e) => {
+				oninput={(e) => {
 					if (!rulesAccepted) {
-						e.detail.target.checked = false;
+						e.currentTarget.checked = false;
 						rulesModal.show();
 						rulesModalTimer = setInterval(() => rulesModalSecondsOpened++, 1000);
 					}
@ -211,7 +259,8 @@
 			<label for="rules">
 				Ich bin mit den <button
 					class="link"
-					on:click|preventDefault={() => {
+					onclick={(e) => {
+						e.preventDefault();
 						rulesModal.show();
 						rulesModalTimer = setInterval(() => rulesModalSecondsOpened++, 1000);
 					}}>Regeln</button
@ -238,7 +287,7 @@
 				{#await registerRequest}
 					<span
 						class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
-					/>
+					></span>
 				{/await}
 			{/if}
 		{/key}
@ -247,7 +296,7 @@

 <dialog
 	class="modal"
-	on:close={() => {
+	onclose={() => {
 		clearInterval(rulesModalTimer);
 		rulesModalTimer = undefined;
 	}}
@ -266,7 +315,7 @@
 						<p>{rulesShort.header}</p>
 						<p class="mt-1 text-[.75rem]">{rulesShort.footer}</p>
 					</div>
-					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
 				</div>
 				{#each rulesShort.sections as section, i}
 					<div class="collapse collapse-arrow">
@ -278,10 +327,10 @@
 							<p>{section.content}</p>
 						</div>
 					</div>
-					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
 				{/each}
 			</div>
-			<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 			<div
 				class="relative w-min"
 				title={rulesModalSecondsOpened < modalTimeoutSeconds
@ -290,7 +339,7 @@
 							0
 						)} Sekunden akzeptiert werden`
 					: ''}
-				on:click={() => {
+				onclick={() => {
 					if (rulesModalSecondsOpened < modalTimeoutSeconds) {
 						errorMessage =
 							'Bitte lies die Regeln aufmerksam durch. Du kannst erst in einigen Sekunden fortfahren.';
@ -301,7 +350,7 @@
 					<div
 						style="width: {Math.min((rulesModalSecondsOpened / modalTimeoutSeconds) * 100, 100)}%"
 						class="h-full bg-base-300"
-					/>
+					></div>
 				</div>
 				<Input
 					id="rules-accept"
@ -309,7 +358,7 @@
 					value="Akzeptieren"
 					disabled={rulesModalSecondsOpened < modalTimeoutSeconds}
 					containerClass="bg-transparent z-[1] relative"
-					on:click={() => {
+					onclick={() => {
 						rulesAccepted = true;
 						rulesInput.checked = true;
 						checkInputs();
@ -324,7 +373,7 @@
 </dialog>

 {#if errorMessage}
-	<dialog class="modal" on:close={() => setTimeout(() => (errorMessage = ''), 200)} open>
+	<dialog class="modal" onclose={() => setTimeout(() => (errorMessage = ''), 200)} open>
 		<form method="dialog" class="modal-box z-50">
 			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 			<h3 class="font-bold text-2xl">Achtung</h3>
--- a/src/routes/register/RegistrationComplete.svelte
+++ b/src/routes/register/RegistrationComplete.svelte
@ -1,17 +1,26 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 	import Input from '$lib/components/Input/Input.svelte';
 	import Select from '$lib/components/Input/Select.svelte';

-	export let firstname: string;
-	export let lastname: string;
-	export let birthday: Date;
-	export let phone: string | null;
-	export let username: string;
-	export let edition: string;
-
-	const dispatch = createEventDispatcher();
+	let {
+		firstname,
+		lastname,
+		birthday,
+		phone,
+		username,
+		edition,
+		close
+	}: {
+		firstname: string;
+		lastname: string;
+		birthday: Date;
+		phone?: string;
+		username: string;
+		edition: string;
+		close: () => void;
+	} = $props();

 	let startDayOptions: Intl.DateTimeFormatOptions = {
 		day: '2-digit',
@ -22,7 +31,7 @@
 		hour: '2-digit',
 		minute: '2-digit'
 	};
-	let skin: string | null = null;
+	let skin: string | null = $state(null);

 	onMount(async () => {
 		let skinview3d = await import('skinview3d');
@ -70,16 +79,34 @@
 	uns, dich auf unserem <a class="link" href={env.PUBLIC_TS_LINK} target="_blank">TeamSpeak</a> oder
 	in unserem <a class="link" href={env.PUBLIC_DISCORD_LINK} target="_blank">Discord</a> begrüßen zu dürfen!
 </p>
-<div class="divider" />
+<div class="divider"></div>
 <div class="flex justify-around mt-2 mb-4">
 	<div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
-		<Input value={firstname} size="sm" readonly><span slot="label">Vorname</span></Input>
-		<Input value={lastname} size="sm" readonly><span slot="label">Nachname</span></Input>
-		<Input value={birthday.toISOString().substring(0, 10)} type="date" size="sm" readonly
-			><span slot="label">Geburtstag</span></Input
+		<Input value={firstname} size="sm" readonly>
+			{#snippet label()}
+				<span>Vorname</span>
+			{/snippet}
+		</Input>
+		<Input value={lastname} size="sm" readonly>
+			{#snippet label()}
+				<span>Nachname</span>
+			{/snippet}
+		</Input>
+		<Input value={birthday.toISOString().substring(0, 10)} type="date" size="sm" readonly>
+			{#snippet label()}
+				<span>Geburtstag</span>
+			{/snippet}</Input
 		>
-		<Input value={phone} size="sm" readonly><span slot="label">Telefonnummer</span></Input>
-		<Input value={username} size="sm" readonly><span slot="label">Spielername</span></Input>
+		<Input value={phone} size="sm" readonly>
+			{#snippet label()}
+				<span>Telefonnummer</span>
+			{/snippet}
+		</Input>
+		<Input value={username} size="sm" readonly>
+			{#snippet label()}
+				<span>Spielername</span>
+			{/snippet}
+		</Input>
 		<Select value="edition" size="sm" disabled label="Edition">
 			<option value="edition">{edition}</option>
 		</Select>
@ -88,11 +115,11 @@
 		{#if skin}
 			<img class="absolute" src={skin} alt="" />
 		{:else}
-			<span class="loading loading-spinner loading-lg" />
+			<span class="loading loading-spinner loading-lg"></span>
 		{/if}
 	</div>
 </div>
-<div class="divider" />
+<div class="divider"></div>
 <div class="flex justify-center gap-8">
-	<button class="btn" on:click={() => dispatch('close')}>Weitere Person anmelden</button>
+	<button class="btn" onclick={close}>Weitere Person anmelden</button>
 </div>
--- a/src/routes/report/[...url_hash]/+layout.svelte
+++ b/src/routes/report/[...url_hash]/+layout.svelte
@ -1,3 +1,7 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
 <div class="flex justify-center items-center w-full">
-	<slot />
+	{@render children()}
 </div>
--- a/src/routes/report/[...url_hash]/+page.svelte
+++ b/src/routes/report/[...url_hash]/+page.svelte
@ -1,11 +1,12 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
-	import type { PageData } from './$types';
 	import ReportDraft from './ReportDraft.svelte';
 	import ReportCompleted from './ReportCompleted.svelte';
 	import ReportSubmitted from './ReportSubmitted.svelte';

-	export let data: PageData;
+	let { data } = $props();
+
+	let completed = $state(!data.draft);
 </script>

 <svelte:head>
@ -15,14 +16,14 @@
 </svelte:head>

 <div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
-	{#if data.draft}
+	{#if !completed}
 		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
 			<ReportDraft
 				reason={data.reason}
 				reporterName={data.reporter.name}
 				reportedName={data.reported.name ?? undefined}
 				users={data.users ?? []}
-				on:submit={() => (data.draft = false)}
+				onsubmit={() => (completed = true)}
 			/>
 		</div>
 	{:else if data.status === 'reviewed'}
--- a/src/routes/report/[...url_hash]/ReportDraft.svelte
+++ b/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" />
--- a/src/routes/rules/+layout.svelte
+++ b/src/routes/rules/+layout.svelte
@ -1,3 +1,7 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
 <div class="mx-4 my-6 sm:mx-48 sm:my-12">
-	<slot />
+	{@render children()}
 </div>
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-	import { rulesLong, rulesShort } from '$lib/rules';
+	import { rulesLong } from '$lib/rules';
 </script>

 <svelte:head>
@ -14,12 +14,12 @@
 		<p>0. Vorwort</p>
 	</div>
 	<div class="collapse-content">
-		<p>{rulesShort.header}</p>
-		<p class="mt-1 text-[.75rem]">{rulesShort.footer}</p>
+		<p>{rulesLong.header}</p>
+		<p class="mt-1 text-[.75rem]">{rulesLong.footer}</p>
 	</div>
-	<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+	<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
 </div>
-{#each rulesShort.sections as section, i}
+{#each rulesLong.sections as section, i}
 	<div class="collapse collapse-arrow">
 		<input type="checkbox" autocomplete="off" />
 		<div class="collapse-title">
@ -29,5 +29,5 @@
 			<p>{section.content}</p>
 		</div>
 	</div>
-	<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+	<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
 {/each}
--- a/src/routes/team/+layout.svelte
+++ b/src/routes/team/+layout.svelte
@ -1,3 +1,7 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
 <div class="m-auto flex flex-col justify-center items-center px-4 py-6 2xl:px-48 sm:py-12">
-	<slot />
+	{@render children()}
 </div>
--- a/src/routes/team/+page.svelte
+++ b/src/routes/team/+page.svelte
@ -61,7 +61,7 @@
 					<p class="text-center text-sm font-light">{member.roles.join(' · ')}</p>
 					{#if member.links}
 						<div class="w-full flex items-center flex-col">
-							<div class="w-1/2 h-[1px] my-3 rounded bg-base-content" />
+							<div class="w-1/2 h-[1px] my-3 rounded bg-base-content"></div>
 							<div class="flex gap-3">
 								{#each member.links as link}
 									<a
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,6 +1,6 @@
+import type { Config } from 'tailwindcss';
 import daisyui from 'daisyui';

-/** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
@ -16,4 +16,4 @@ export default {
 	daisyui: {
 		logs: false
 	}
-};
+} satisfies Config;