sort feedback desc

.env.example

@@ -1,10 +1,11 @@
 DATABASE_URI=sqlite://./database.db
 ADMIN_USER=admin
 ADMIN_PASSWORD=admin
-REPORT_SECRET=
 PUBLIC_START_DATE=2023-12-26T00:00:00+0200
 PUBLIC_BASE_PATH=
 
+API_SECRET=
+
 PUBLIC_SERVER_IP=example.com
 PUBLIC_TS_LINK=ts3server://example.com
 PUBLIC_DISCORD_LINK=https://example.com

.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

.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'
-			}
-		}
-	]
-};

eslint.config.mjs

@@ -0,0 +1,38 @@
+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: {
+			'@typescript-eslint/no-explicit-any': 'off'
+		}
+	}
+);

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",

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>

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"

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"

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

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 = $bindable(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}
@@ -82,6 +98,7 @@
 					class:input-lg={type !== 'checkbox' && size === 'lg'}
 					class:input-bordered={type !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
+					class:!border-none,!text-inherit={disabled}
 					{id}
 					{name}
 					{type}
@@ -93,31 +110,28 @@
 					{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);
+					onchange={() => {
+						if (type === 'checkbox') {
+							checked = !checked;
 						}
-							return;
-						}
-						return input(e);
 					}}
-					on:paste={(e) => {
-						if (
-							pattern &&
-							!pattern.test((e.clipboardData || window.clipboardData).getData('text'))
-						) {
+					oninput={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+						value = e.currentTarget.value;
+						if (pattern && !pattern.test(value)) return;
+						oninput?.(e);
+					}}
+					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 +143,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>

src/lib/components/Input/Search.svelte

@@ -1,23 +1,30 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	let {
+		id,
+		value = $bindable(),
+		suggestionRequired = false,
+		emptyAllowed = false,
+		searchSuggestionFunc = () => Promise.resolve([]),
+		invalidMessage,
+		size = 'md',
+		label,
+		required = false,
+		onsubmit
+	}: {
+		id?: string;
+		value: 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 elemValue = $state(value);
+	let searchSuggestions: { name: string; value: string }[] = $state([]);
 </script>
 
 <div class="relative">
@@ -34,6 +41,7 @@
 		{/if}
 		<input
 			type="search"
+			autocomplete="off"
 			class="input input-bordered w-full"
 			class:input-xs={size === 'xs'}
 			class:input-sm={size === 'sm'}
@@ -41,44 +49,44 @@
 			class:input-lg={size === 'lg'}
 			{id}
 			{required}
-			bind:value={inputValue}
-			on:input={(e) => {
-				value = '';
-				searchSuggestionFunc(inputValue).then((v) => {
-					searchSuggestions = v;
-					const searchSuggestion = v.find((v) => v.name === inputValue);
+			bind:value={elemValue}
+			oninput={async (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+				searchSuggestions = await searchSuggestionFunc(elemValue);
+				const searchSuggestion = searchSuggestions.find((v) => v.name === elemValue);
 				if (searchSuggestion !== undefined) {
-						inputValue = searchSuggestion.name;
+					elemValue = searchSuggestion.name;
 					value = searchSuggestion.value;
 					searchSuggestions = [];
-						e.target?.setCustomValidity('');
-						dispatch('submit', { input: inputValue, value: value });
-					} else if (inputValue === '' && emptyAllowed) {
-						dispatch('submit', { input: '', value: '' });
+					(e.currentTarget || e.target).setCustomValidity('');
+					onsubmit?.(Object.assign(e, { input: elemValue, value: value }));
+				} else if (elemValue === '' && emptyAllowed) {
+					onsubmit?.(Object.assign(e, { input: '', value: '' }));
+				} else {
+					value = '';
 				}
-				});
 			}}
-			on:invalid={(e) => {
-				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
+			oninvalid={(e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+				if (invalidMessage) e.currentTarget.setCustomValidity(invalidMessage);
 			}}
+			onfocus={() => searchSuggestionFunc(elemValue).then((v) => (searchSuggestions = v))}
 			pattern={suggestionRequired
-				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
+				? `${value ? elemValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
 				: null}
 		/>
 	</div>
 
-	{#if inputValue && searchSuggestions.length !== 0}
+	{#if elemValue && searchSuggestions.length !== 0}
 		<ul class="absolute bg-base-200 w-full z-20 menu menu-sm rounded-box">
 			{#each searchSuggestions as searchSuggestion}
 				<li class="w-full text-left">
 					<button
 						class="block w-full overflow-hidden text-ellipsis whitespace-nowrap"
 						title="{searchSuggestion.name} ({searchSuggestion.value})"
-						on:click|preventDefault={() => {
-							inputValue = searchSuggestion.name;
+						onclick={(e) => {
+							elemValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
-							dispatch('submit', { input: inputValue, value: value });
+							onsubmit?.(Object.assign(e, { input: elemValue, value: value }));
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@@ -88,9 +96,10 @@
 </div>
 
 <!-- close the search suggestions box when clicking outside -->
-{#if inputValue && searchSuggestions.length !== 0}
+{#if elemValue && 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}

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>
@@ -35,14 +46,15 @@
 		class:select-sm={size === 'sm'}
 		class:select-md={size === 'md'}
 		class:select-lg={size === 'lg'}
+		class:!border-none,!text-inherit={disabled}
 		{id}
 		{name}
 		{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}>

src/lib/components/Input/Textarea.svelte

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

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,12 @@
 		await onUpdate();
 		await tick();
 
-		intersectionObserver = new IntersectionObserver(
+		if (!bodyElem) return;
+
+		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 +37,7 @@
 				await tick();
 
 				if (rows === bodyElem.rows.length) return;
-				observer.observe((intersectionElement = await getIntersectionElement()));
+				observer.observe((intersectionElem = await getIntersectionElement()));
 			},
 			{ threshold: 0.25 }
 		);
@@ -51,14 +51,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>

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}

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>

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}

src/lib/context.ts

@@ -0,0 +1,18 @@
+import { getContext } from 'svelte';
+
+export type PopupModalContextArgs = {
+	title: string;
+	text?: string;
+	actions?: { text: string; action?: (modal: Event) => void }[];
+	onClose?: () => void;
+};
+export function getPopupModalShowFn(): ({
+	title,
+	text,
+	actions,
+	onClose
+}: PopupModalContextArgs) => void {
+	const { set }: { set: ({ title, text, actions, onClose }: PopupModalContextArgs) => void } =
+		getContext('globalPopupModal');
+	return set;
+}

src/lib/permissions.ts

@@ -4,6 +4,7 @@ export class Permissions {
 	static readonly Reports = 2 << 2;
 	static readonly Feedback = 2 << 3;
 	static readonly Settings = 2 << 4;
+	static readonly Tools = 2 << 5;
 
 	readonly value: number;
 
@@ -31,7 +32,8 @@ export class Permissions {
 			Permissions.Users,
 			Permissions.Reports,
 			Permissions.Feedback,
-			Permissions.Settings
+			Permissions.Settings,
+			Permissions.Tools
 		];
 	}
 
@@ -51,6 +53,9 @@ export class Permissions {
 	settings(): boolean {
 		return (this.value & Permissions.Reports) != 0;
 	}
+	tools(): boolean {
+		return (this.value & Permissions.Tools) != 0;
+	}
 
 	asArray(): number[] {
 		const array = [];

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';
@@ -24,16 +24,16 @@ export class User extends Model {
 	@Column({ type: DataTypes.DATE, allowNull: false })
 	declare birthday: Date;
 	@Column({ type: DataTypes.STRING })
-	declare telephone: string;
+	declare telephone: string | null;
 	@Column({ type: DataTypes.STRING, allowNull: false })
 	declare username: string;
 	@Column({ type: DataTypes.ENUM('java', 'bedrock', 'noauth'), allowNull: false })
 	declare playertype: 'java' | 'bedrock' | 'noauth';
 	@Column({ type: DataTypes.STRING })
-	declare password: string;
+	declare password: string | null;
 	@Column({ type: DataTypes.UUID, unique: true })
 	@Index
-	declare uuid: string;
+	declare uuid: string | null;
 }
 
 @Table({ modelName: 'report', underscored: true })
@@ -43,40 +43,51 @@ export class Report extends Model {
 	declare url_hash: string;
 	@Column({ type: DataTypes.STRING, allowNull: false })
 	declare subject: string;
-	@Column({ type: DataTypes.STRING })
-	declare body: string;
+	@Column({ type: DataTypes.TEXT })
+	declare body: string | null;
 	@Column({ type: DataTypes.BOOLEAN, allowNull: false })
 	declare draft: boolean;
 	@Column({ type: DataTypes.ENUM('none', 'review', 'reviewed'), allowNull: false })
 	declare status: 'none' | 'review' | 'reviewed';
 	@Column({ type: DataTypes.STRING })
-	declare notice: string;
-	@Column({ type: DataTypes.STRING })
-	declare statement: string;
+	declare notice: string | null;
+	@Column({ type: DataTypes.TEXT })
+	declare statement: string | null;
+	@Column({ type: DataTypes.DATE })
+	declare striked_at: Date | null;
 	@Column({ type: DataTypes.INTEGER, allowNull: false })
 	@ForeignKey(() => User)
 	declare reporter_id: number;
 	@Column({ type: DataTypes.INTEGER })
 	@ForeignKey(() => User)
-	declare reported_id: number;
+	declare reported_id: number | null;
 	@Column({ type: DataTypes.INTEGER })
 	@ForeignKey(() => Admin)
-	declare auditor_id: number;
+	declare auditor_id: number | null;
 	@Column({ type: DataTypes.INTEGER })
 	@ForeignKey(() => StrikeReason)
 	declare strike_reason_id: number | null;
 
-	@BelongsTo(() => User, 'reporter_id')
-	declare reporter: User;
-	@BelongsTo(() => User, 'reported_id')
-	declare reported: User;
-	@BelongsTo(() => Admin, 'auditor_id')
-	declare auditor: Admin;
-	@BelongsTo(() => StrikeReason, 'strike_reason_id')
-	declare strike_reason: StrikeReason;
-
-	@Column({ type: DataTypes.DATE })
-	declare striked_at: Date | null;
+	@BelongsTo(() => User, {
+		onDelete: 'CASCADE',
+		foreignKey: 'reporter_id'
+	})
+	declare reporter: User | null;
+	@BelongsTo(() => User, {
+		onDelete: 'CASCADE',
+		foreignKey: 'reported_id'
+	})
+	declare reported: User | null;
+	@BelongsTo(() => Admin, {
+		onDelete: 'CASCADE',
+		foreignKey: 'auditor_id'
+	})
+	declare auditor: Admin | null;
+	@BelongsTo(() => StrikeReason, {
+		onDelete: 'CASCADE',
+		foreignKey: 'strike_reason_id'
+	})
+	declare strike_reason: StrikeReason | null;
 }
 
 @Table({ modelName: 'strike_reason', underscored: true, createdAt: false, updatedAt: false })
@@ -102,16 +113,21 @@ export class Feedback extends Model {
 	@Column({ type: DataTypes.STRING, allowNull: false })
 	declare event: string;
 	@Column({ type: DataTypes.STRING })
-	declare content: string;
+	declare title: string | null;
+	@Column({ type: DataTypes.TEXT })
+	declare content: string | null;
 	@Column({ type: DataTypes.STRING, allowNull: false, unique: true })
 	@Index
 	declare url_hash: string;
 	@Column({ type: DataTypes.INTEGER })
 	@ForeignKey(() => User)
-	declare user_id: number;
+	declare user_id: number | null;
 
-	@BelongsTo(() => User, 'user_id')
-	declare user: User;
+	@BelongsTo(() => User, {
+		onDelete: 'CASCADE',
+		foreignKey: 'user_id'
+	})
+	declare user: User | null;
 }
 
 @Table({ modelName: 'admin', underscored: true })
@@ -153,7 +169,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;

src/lib/server/minecraft.ts

@@ -9,11 +9,16 @@ export class UserNotFoundError extends Error {
 	}
 }
 
+export class RateLimitError extends Error {}
+
 export class ApiError extends Error {}
 
 export async function getJavaUuid(username: string): Promise<string> {
 	const response = await fetch(`https://api.mojang.com/users/profiles/minecraft/${username}`);
 	if (!response.ok) {
+		if (response.status == 429) {
+			throw new RateLimitError();
+		}
 		throw response.status < 500
 			? new UserNotFoundError(username)
 			: new ApiError(`mojang server error (${response.status}): ${await response.text()}`);

src/lib/server/webhook.ts

@@ -1,4 +1,5 @@
 export async function webhookUserReported(endpoint: string, uuid: string) {
+	try {
 		await fetch(endpoint, {
 			method: 'POST',
 			headers: {
@@ -8,4 +9,7 @@ export async function webhookUserReported(endpoint: string, uuid: string) {
 				user: uuid
 			})
 		});
+	} catch (e) {
+		throw (e as { message: string }).message;
+	}
 }

src/routes/+layout.svelte

@@ -3,67 +3,89 @@
 	import { env } from '$env/dynamic/public';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import Input from '$lib/components/Input/Input.svelte';
+	import { setContext, tick } from 'svelte';
+	import type { PopupModalContextArgs } from '$lib/context';
 
-	let navPaths = [
+	let { children } = $props();
+
+	let navPaths = $state([
 		{
 			name: 'Startseite',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/`,
 			active: false
 		},
 		{
 			name: 'Registrieren',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/register`,
 			active: false
 		},
 		{
 			name: 'Regeln',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/rules`,
 			active: false
 		},
 		{
 			name: 'FAQ',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-faq.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-faq.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/faq`,
 			active: false
 		},
 		{
 			name: 'Feedback & Kontakt',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-feedback.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-feedback.webp`,
 			href: `${env.PUBLIC_BASE_PATH}/feedback`,
 			active: false
 		},
 		{
 			name: 'Team',
-			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-team.png`,
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-team.webp`,
 			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 =
+	$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;
+	let popupModalState: PopupModalContextArgs | null = $state(null);
+	// eslint-disable-next-line no-undef
+	let popupModalNullTimeout: number | NodeJS.Timeout | null = null;
+	setContext('globalPopupModal', {
+		set: async ({ title, text, actions, onClose }: PopupModalContextArgs) => {
+			if (popupModalNullTimeout) clearTimeout(popupModalNullTimeout);
+			popupModalState = { title, text, actions, onClose };
+			await tick();
+			popupModalElem.showModal();
+		}
+	});
+
+	let navElem: HTMLDivElement;
+	let popupModalElem: HTMLDialogElement;
 </script>
 
+<svelte:window bind:innerHeight={windowHeight} />
+
 <svelte:body
 	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;
 	}}
 />
 
@@ -71,26 +93,26 @@
 	{#if !onAdminPage}
 		<meta property="og:url" content={$page.url.toString()} />
 		<meta property="og:type" content="website" />
-		<meta property="og:image" content="{env.PUBLIC_BASE_PATH}/img/logo-512.png" />
+		<meta property="og:image" content="{env.PUBLIC_BASE_PATH}/img/logo-512.webp" />
 	{/if}
 </svelte:head>
 
 <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"
+		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) {
@@ -99,20 +121,20 @@
 					showMenuPermanent = !showMenuPermanent;
 				}
 			}}
-			on:touchend={() => {
+			ontouchend={() => {
 				isTouch = true;
 				showMenuPermanent = !showMenuPermanent;
 			}}
 		>
 			<img
 				class="absolute w-full h-full p-1 pixelated"
-				src="{env.PUBLIC_BASE_PATH}/img/menu-button.png"
+				src="{env.PUBLIC_BASE_PATH}/img/menu-button.webp"
 				alt="menu"
 			/>
 			<img
 				class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated"
 				class:opacity-100={isTouch && showMenuPermanent}
-				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.webp"
 				alt="menu hover"
 			/>
 		</button>
@@ -120,29 +142,33 @@
 			class:hidden={!showMenuPermanent}
 			class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
 		>
-			<ul class="flex flex-col bg-base-200 rounded">
+			<ul class="bg-base-200 rounded">
 				{#each navPaths as navPath, i}
 					<li
-						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
+						class="flex justify-center tooltip"
+						class:tooltip-left={windowHeight > 450}
+						class:sm:tooltip-right={windowHeight > 450}
+						class:tooltip-top={windowHeight <= 450}
+						class:tooltip-open={isTouch || windowHeight <= 450}
 						data-tip={navPath.name}
 					>
 						<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 *
+								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.webp'); 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>
 							<img
 								class="transition-opacity delay-50 group-hover/menu-item:opacity-100 absolute w-full h-full pixelated scale-110 z-10"
 								class:opacity-0={!navPath.active}
-								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.webp"
 								alt="menu hover"
 							/>
 						</a>
@@ -159,7 +185,7 @@
 			class:hidden={onAdminPage}
 		>
 			<div class="hidden sm:block">
-				<p>© {new Date().getFullYear()} MHSL Craftattack Team</p>
+				<p>© {new Date().getFullYear()} mhsl.eu</p>
 			</div>
 			<div class="flex gap-4">
 				<a class="link" href="https://mhsl.eu/id.html" target="_blank">Impressum</a>
@@ -168,3 +194,65 @@
 		</div>
 	</footer>
 {/if}
+
+<dialog class="modal" bind:this={popupModalElem}>
+	{#if popupModalState}
+		<form
+			method="dialog"
+			class="modal-box z-50"
+			onsubmit={() => {
+				popupModalNullTimeout = setTimeout(() => {
+					popupModalState = null;
+					popupModalNullTimeout = null;
+				}, 200);
+				popupModalState?.onClose?.();
+			}}
+		>
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+			<h3 class="font-bold text-2xl">{popupModalState.title}</h3>
+			{#if popupModalState.text}
+				<p class="py-4 whitespace-pre-line">{popupModalState.text}</p>
+			{/if}
+			{#if popupModalState.actions}
+				<div class="flex flex-row space-x-1 mt-4">
+					{#each popupModalState.actions as action}
+						<Input type="submit" value={action.text} onclick={(e) => action.action?.(e)} />
+					{/each}
+				</div>
+			{/if}
+		</form>
+		<form
+			method="dialog"
+			class="modal-backdrop bg-[rgba(0,0,0,.2)]"
+			onsubmit={() => {
+				popupModalNullTimeout = setTimeout(() => {
+					popupModalState = null;
+					popupModalNullTimeout = null;
+				}, 200);
+				popupModalState?.onClose?.();
+			}}
+		>
+			<button>close</button>
+		</form>
+	{/if}
+</dialog>
+
+<style lang="scss">
+	@media (max-height: 450px) {
+		.main-menu {
+			flex-direction: row;
+		}
+		.main-menu > div {
+			padding: 0.25rem 0 0 0.5rem;
+		}
+		.main-menu li {
+			display: inline-block;
+
+			&::before {
+				transform-origin: 0;
+				transform: rotate(-90deg);
+				margin-bottom: -0.5rem;
+			}
+		}
+	}
+</style>

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
@@ -64,7 +63,13 @@
 		class="hidden xl:block absolute top-0 left-0 h-full w-full"
 		style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"
 	>
-		<img src="{env.PUBLIC_BASE_PATH}/img/bg.webp" alt="" />
+		<img
+			src="{env.PUBLIC_BASE_PATH}/img/bg.webp"
+			alt=""
+			loading="lazy"
+			width="100%"
+			height="100%"
+		/>
 	</div>
 	<div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
 		<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
@@ -76,7 +81,7 @@
 			<h2 class="text-3xl text-black dark:text-white mb-8">Über uns</h2>
 			<p>
 				Wir sind ein kleines <a class="link" href={`${env.PUBLIC_BASE_PATH}/team`}>Team</a> von Minecraft-Enthusiasten,
-				das bereits im 6. Jahr in Folge Minecraft CraftAttack organisiert. Jahr für Jahr arbeiten wir
+				das bereits im 7. Jahr in Folge Minecraft CraftAttack organisiert. Jahr für Jahr arbeiten wir
 				daran, das Spielerlebnis zu verbessern und steigeren die Teilnehmerzahl.
 			</p>
 			<p>
@@ -96,7 +101,7 @@
 </div>
 <div class="flex flex-col xl:flex-row justify-center items-center py-20 bg-base-100">
 	<div>
-		<h3 class="text-center text-2xl mb-6">2023 in Zahlen</h3>
+		<h3 class="text-center text-2xl mb-6">2023/2024 in Zahlen</h3>
 		<div class="flex flex-col lg:flex-row gap-4">
 			<div class="stats stats-vertical xl:stats-horizontal shadow">
 				<div class="stat">

src/routes/admin/+layout.server.ts

@@ -21,6 +21,7 @@ export const load: LayoutServerLoad = async ({ route, cookies }) => {
 			: null,
 		adminCount: session?.permissions.admin() ? await Admin.count() : null,
 		settingsRead: session?.permissions.settings(),
+		toolsRead: session?.permissions.tools(),
 		self: session
 			? JSON.parse(JSON.stringify(await Admin.findOne({ where: { id: session.userId } })))
 			: null

src/routes/admin/+layout.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { fly } from 'svelte/transition';
 	import { env } from '$env/dynamic/public';
 	import {
 		ArrowLeftOnRectangle,
-		Cog6Tooth,
+		AdjustmentsHorizontal,
 		Flag,
 		UserGroup,
 		Users,
-		BookOpen
+		BookOpen,
+		WrenchScrewdriver
 	} 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();
+
+	let transitionPrefix = $state(0);
+
 	async function logout() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/logout`, {
 			method: 'POST'
@@ -26,7 +31,6 @@
 		}
 	}
 
-	export let data: LayoutData;
 	if (data.reportCount) $reportCount = data.reportCount;
 	if (data.feedbackCount) $feedbackCount = data.feedbackCount;
 	if (data.adminCount) $adminCount = data.adminCount;
@@ -62,18 +66,24 @@
 		},
 		{
 			path: `${env.PUBLIC_BASE_PATH}/admin/settings`,
-			icon: Cog6Tooth,
+			icon: AdjustmentsHorizontal,
 			name: 'Website Einstellungen',
 			badge: null,
 			enabled: data.settingsRead
+		},
+		{
+			path: `${env.PUBLIC_BASE_PATH}/admin/tools`,
+			icon: WrenchScrewdriver,
+			name: 'Tools',
+			badge: null,
+			enabled: data.toolsRead
 		}
 	];
 
-	let pageTitleSuffix =
-		(tabs.find((t) => $page.url.pathname === t.path)?.name ??
-		$page.url.pathname === `${env.PUBLIC_BASE_PATH}/admin/login`)
-			? 'Login '
-			: null;
+	let pageTitleSuffix = $derived(
+		tabs.find((t) => $page.url.pathname === t.path)?.name ??
+		($page.url.pathname === `${env.PUBLIC_BASE_PATH}/admin/login` ? 'Login' : null)
+	);
 </script>
 
 <svelte:head>
@@ -81,26 +91,38 @@
 </svelte:head>
 
 {#if $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`}
-	<div class="h-12 relative bg-base-200 flex justify-center items-center">
-		<ul class="menu menu-horizontal h-10 p-0 flex items-center bg-base-300 rounded-lg">
-			{#each tabs as tab}
+	<div class="relative bg-base-200 w-full flex justify-center">
+		<div role="tablist" class="tabs tabs-lifted">
+			{#each tabs as tab, i}
 				{#if tab.enabled}
-					<li>
-						<a href={tab.path}>
-							<svelte:component this={tab.icon} />
-							<span class="mr-1" class:underline={$page.url.pathname === tab.path}>{tab.name}</span>
+					{@const Icon = tab.icon}
+					<a
+						role="tab"
+						class="tab h-full"
+						class:tab-active={$page.url.pathname === tab.path}
+						href={tab.path}
+						onclick={() => {
+							let currIdx = tabs.findIndex((t) => $page.url.pathname === t.path);
+							if (currIdx !== -1) {
+								transitionPrefix = currIdx < i ? 1 : -1;
+							}
+						}}
+					>
+						<span class="my-2 flex items-center space-x-1">
+							<Icon />
+							<span>{tab.name}</span>
 							{#if tab.badge != null}
 								<div class="badge">{tab.badge}</div>
 							{/if}
+						</span>
 					</a>
-					</li>
 				{/if}
 			{/each}
-		</ul>
+		</div>
 		<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>
@@ -108,12 +130,23 @@
 			</ul>
 		</div>
 	</div>
-	<div class="h-full w-full -mt-12 pt-12 overflow-y-scroll overflow-x-hidden">
-		<slot />
+	<div class="grid">
+		{#key $page.url.pathname}
+			<div
+				class="col-[1] row-[1] h-full w-full overflow-y-scroll overflow-x-hidden"
+				in:fly={{ x: transitionPrefix * window.innerWidth, duration: !transitionPrefix ? 0 : 100 }}
+				out:fly={{
+					x: transitionPrefix * -window.innerWidth,
+					duration: !transitionPrefix ? 0 : 100
+				}}
+			>
+				{@render children()}
+			</div>
+		{/key}
 	</div>
 {:else}
 	<div class="h-full w-full">
-		<slot />
+		{@render children()}
 	</div>
 {/if}
 

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>

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

@@ -1,27 +1,33 @@
 <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';
+	import { getPopupModalShowFn } from '$lib/context';
+
+	let { data } = $props();
+
+	let showPopupModal = getPopupModalShowFn();
+
+	let admins = $state(data.admins);
 
 	let allPermissionBadges = {
 		Admin: Permissions.Admin,
 		Users: Permissions.Users,
 		Reports: Permissions.Reports,
 		Feedback: Permissions.Feedback,
-		Settings: Permissions.Settings
+		Settings: Permissions.Settings,
+		Tools: Permissions.Tools
 	};
 
-	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 +42,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 +88,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 +139,14 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									on:click={async (e) => {
+									onclick={async (e) => {
+										showPopupModal({
+											title: 'Speichern',
+											text: `Sollen die Änderungen für den Admin '${admin.username}' gespeichert werden?`,
+											actions: [
+												{
+													text: 'Speichern',
+													action: async () => {
 														await buttonTriggeredRequest(
 															e,
 															updateAdmin(
@@ -145,6 +158,11 @@
 														);
 														admin.password = '';
 														admin.edit = false;
+													}
+												},
+												{ text: 'Abbrechen' }
+											]
+										});
 									}}
 								>
 									<Check size="18" />
@@ -153,9 +171,30 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									on:click={() => {
+									onclick={() => {
+										if (
+											admin.username === admin.before.username &&
+											admin.password === admin.before.password &&
+											JSON.stringify(admin.permissions) === JSON.stringify(admin.before.permissions)
+										) {
 											admin.edit = false;
-										admin = admin.before;
+											return;
+										}
+
+										showPopupModal({
+											title: 'Abbrechen',
+											text: 'Soll die Adminbearbeitung abgebrochen werden?',
+											actions: [
+												{
+													text: 'Abbrechen',
+													action: () => {
+														admin.edit = false;
+														admins[i] = admin.before;
+													}
+												},
+												{ text: 'Schließen' }
+											]
+										});
 									}}
 								>
 									<NoSymbol size="18" />
@@ -165,9 +204,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 +215,19 @@
 							<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) => {
+										showPopupModal({
+											title: 'Admin löschen',
+											text: `Soll der Admin ${admin.username} wirklich gelöscht werden?`,
+											actions: [
+												{
+													text: 'Löschen',
+													action: () => buttonTriggeredRequest(e, deleteAdmin(admin.id))
+												},
+												{ text: 'Abbrechen' }
+											]
+										});
+									}}
 								>
 									<Trash size="18" />
 								</button>
@@ -187,7 +238,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,14 +247,30 @@
 					<button
 						class="btn btn-sm btn-square"
 						disabled={!newAdminUsername || !newAdminPassword}
-						on:click={async (e) => {
+						onclick={async (e) => {
+							showPopupModal({
+								title: 'Admin hinzugügen',
+								text: `Soll der neue Admin ${newAdminUsername} hinzugefügt werden?`,
+								actions: [
+									{
+										text: 'Hinzufügen',
+										action: async () => {
 											await buttonTriggeredRequest(
 												e,
-								addAdmin(newAdminUsername, newAdminPassword, new Permissions(newAdminPermissions))
+												addAdmin(
+													newAdminUsername,
+													newAdminPassword,
+													new Permissions(newAdminPermissions)
+												)
 											);
 											newAdminUsername = '';
 											newAdminPassword = '';
 											newAdminPermissions = [];
+										}
+									},
+									{ text: 'Abbrechen' }
+								]
+							});
 						}}
 					>
 						<UserPlus size="18" />
@@ -213,7 +280,3 @@
 		</tr>
 	</tbody>
 </table>
-
-<ErrorToast show={errorMessage !== ''}>
-	<span />
-</ErrorToast>

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

@@ -11,15 +11,16 @@
 	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;
 		from?: number;
 		hash?: string;
+		preview?: boolean;
 	}): Promise<Feedback[]> {
 		if (!browser) return [];
 
@@ -27,6 +28,8 @@
 			method: 'POST',
 			body: JSON.stringify({
 				...feedbackFilter,
+				preview: extendedFilter?.preview ?? true,
+				hash: extendedFilter?.hash ?? undefined,
 				limit: extendedFilter?.limit ?? feedbacksPerRequest,
 				from: extendedFilter?.from ?? feedbacks.length
 			})
@@ -38,19 +41,14 @@
 		if (!window.location.hash) return;
 
 		const requestedHash = window.location.hash.substring(1);
-		let feedback = feedbacks.find((r) => r.url_hash === requestedHash);
-		if (!feedback) {
-			const hashFeedback = (await fetchFeedback({ hash: requestedHash }))[0];
-			if (hashFeedback) {
-				feedback = [hashFeedback, ...feedback];
-				feedback = hashFeedback;
-			} else {
+
+		const hashFeedback = await fetchFeedback({ hash: requestedHash, preview: false });
+		if (!hashFeedback) {
 			await goto(window.location.href.split('#')[0], { replaceState: true });
 			return;
 		}
-		}
 
-		activeFeedback = feedback;
+		activeFeedback = hashFeedback[0];
 	}
 
 	onMount(async () => {
@@ -59,18 +57,20 @@
 	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>
 			<tr>
 				<th>Event</th>
+				<th>Titel</th>
 				<th>Nutzer</th>
 				<th>Datum</th>
 				<th>Inhalt</th>
@@ -84,22 +84,26 @@
 					<tr
 						class="hover [&>*]:text-sm cursor-pointer"
 						class:bg-base-200={activeFeedback?.url_hash === feedback.url_hash}
-						on:click={() => {
-							goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
+						onclick={async () => {
+							await goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
 								replaceState: true
 							});
-							activeFeedback = feedback;
+							await openHashReport();
 						}}
 					>
 						<td title={feedback.event}>{feedback.event}</td>
+						<td class="overflow-hidden overflow-ellipsis">{feedback.title}</td>
 						<td class="flex">
 							{feedback.user?.username || ''}
 							{#if feedback.user}
 								<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;
+										fetchFeedback({ from: 0 }).then((r) => (feedbacks = r));
+									}}
 								>
 									<MagnifyingGlass size="14" />
 								</button>
@@ -114,7 +118,9 @@
 							minute: '2-digit'
 						}).format(new Date(feedback.updatedAt))} Uhr</td
 						>
-						<td>{feedback.content}...</td>
+						<td class="overflow-hidden overflow-ellipsis"
+						>{feedback.content}{feedback.content_stripped ? '...' : ''}</td
+						>
 					</tr>
 				{/each}
 			</PaginationTableBody>
@@ -127,18 +133,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}`
 									);
@@ -147,7 +153,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
@@ -157,7 +163,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
@@ -165,15 +171,28 @@
 			</div>
 			<h3 class="font-roboto font-semibold text-2xl mb-2">Feedback</h3>
 			<div class="w-full">
+				<Input readonly={true} size="sm" value={activeFeedback.event} pickyWidth={false}>
+					{#snippet label()}
+						<span>Event</span>
+					{/snippet}
+				</Input>
+				<Input readonly={true} size="sm" value={activeFeedback.title} pickyWidth={false}>
+					{#snippet label()}
+						<span>Titel</span>
+					{/snippet}
+				</Input>
+				<Textarea readonly={true} rows={4} label="Inhalt" value={activeFeedback.content} />
+				<div class="divider mb-1"></div>
 				<Input
 					readonly={true}
 					size="sm"
 					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>
 		</div>
 	{/if}

src/routes/admin/feedback/+server.ts

@@ -20,7 +20,9 @@ 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}%` } });
 	// prettier-ignore
 	if (data.content) Object.assign(feedbackFindOptions, { content: { [Op.like]: `%${data.content}%` } });
@@ -31,19 +33,25 @@ export const POST = (async ({ request, cookies }) => {
 				where: { username: { [Op.like]: `%${data.username}%` } }
 			}).then((users) => users.map((user) => user.id))
 		});
-	if (data.hash) Object.assign(feedbackFindOptions, { url_hash: data.hash, from: 0, limit: 1 });
+	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
-		attributes: {
+		attributes: data.preview
+			? {
 					exclude: ['content'],
-			include: [[sequelize.literal('SUBSTR(content, 0, 50)'), 'content']]
-		},
+					include: [
+						[sequelize.literal('SUBSTR(content, 1, 50)'), 'content'],
+						[sequelize.literal('LENGTH(content) > 50'), 'content_stripped']
+					]
+				}
+			: undefined,
 		include: { model: User, as: 'user' },
-		offset: data.from || 0,
-		limit: data.limit || 100
+		order: [['created_at', 'DESC']],
+		offset: data.hash ? 0 : data.from || 0,
+		limit: data.hash ? 1 : data.limit || 100
 	});
 
 	return new Response(JSON.stringify(feedback));

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>

src/routes/admin/feedback/schema.ts

@@ -9,5 +9,7 @@ export const FeedbackListSchema = z.object({
 
 	hash: z.string().nullish(),
 
-	username: z.string().nullish()
+	username: z.string().nullish(),
+
+	preview: z.boolean().nullish()
 });

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}

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';
@@ -17,13 +16,16 @@
 	import Search from '$lib/components/Input/Search.svelte';
 	import { usernameSuggestions } from '$lib/utils';
 	import PaginationTableBody from '$lib/components/PaginationTable/PaginationTableBody.svelte';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	export let data: PageData;
+	let { data } = $props();
 
-	let reports: (typeof Report.prototype.dataValues)[] = [];
+	let showPopupModal = getPopupModalShowFn();
+
+	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;
@@ -92,21 +94,21 @@
 		});
 	}
 
-	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,11 +142,11 @@
 					<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
 							});
-							activeReport = report;
+							activeReport = $state.snapshot(report);
 							activeReport.originalStatus = report.status;
 						}}
 					>
@@ -154,7 +156,11 @@
 							<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;
+									fetchReports({ from: 0 }).then((r) => (reports = r.reports));
+								}}
 							>
 								<MagnifyingGlass size="14" />
 							</button>
@@ -165,8 +171,11 @@
 								<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;
+										fetchReports({ from: 0 }).then((r) => (reports = r.reports));
+									}}
 								>
 									<MagnifyingGlass size="14" />
 								</button>
@@ -203,18 +212,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 +232,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 +242,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 +251,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"
@@ -251,18 +262,18 @@
 					searchSuggestionFunc={usernameSuggestions}
 					invalidMessage="Es können nur registrierte Spieler reportet werden"
 					label="Reporteter User"
-					inputValue={activeReport.reported?.username || ''}
-					on:submit={(e) =>
+					value={activeReport.reported?.username || ''}
+					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,22 +329,13 @@
 				<Input
 					type="submit"
 					value="Speichern"
-					on:click={() => saveActiveReportChangesModal.show()}
-				/>
-			</div>
-		</div>
-	{/if}
-</div>
-
-<dialog class="modal" bind:this={saveActiveReportChangesModal}>
-	<form method="dialog" class="modal-box">
-		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		<h3 class="font-roboto text-xl">Änderungen Speichern?</h3>
-		<div class="flex flex-row space-x-2 mt-6">
-			<Input
-				type="submit"
-				value="Speichern"
-				on:click={async () => {
+					onclick={() => {
+						showPopupModal({
+							title: 'Änderungen Speichern?',
+							actions: [
+								{
+									text: 'Speichern',
+									action: async () => {
 										await updateActiveReport();
 										if (activeReport.reported?.username) {
 											if (activeReport.reported?.id === undefined) {
@@ -342,8 +344,17 @@
 										} else {
 											activeReport.reported = undefined;
 										}
-					reports = [...reports];
-					if (activeReport.originalStatus !== 'reviewed' && activeReport.status === 'reviewed') {
+										const activeReportIndex = reports.findIndex((r) => r.id === activeReport.id);
+										if (activeReportIndex === -1) {
+											return;
+										}
+
+										reports[activeReportIndex] = activeReport;
+
+										if (
+											activeReport.originalStatus !== 'reviewed' &&
+											activeReport.status === 'reviewed'
+										) {
 											$reportCount -= 1;
 										} else if (
 											activeReport.originalStatus === 'reviewed' &&
@@ -351,22 +362,24 @@
 										) {
 											$reportCount += 1;
 										}
+									}
+								},
+								{ text: 'Abbrechen' }
+							]
+						});
 					}}
 				/>
-			<Input type="submit" value="Abbrechen" />
 			</div>
-	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>
+		</div>
+	{/if}
+</div>
 
 <dialog class="modal" bind:this={newReportModal}>
 	<NewReportModal
-		on:submit={(e) => {
-			if (!e.detail.draft) $reportCount += 1;
-			reports = [e.detail, ...reports];
-			activeReport = reports[0];
+		onSubmit={(e) => {
+			if (!e.draft) $reportCount += 1;
+			reports = [e, ...reports];
+			activeReport = $state.snapshot(reports[0]);
 			newReportModal.close();
 		}}
 	/>

src/routes/admin/reports/+server.ts

@@ -50,12 +50,7 @@ export const POST = (async ({ request, cookies }) => {
 
 	let reports = await Report.findAll({
 		where: reportFindOptions,
-		include: [
-			{ model: User, as: 'reporter' },
-			{ model: User, as: 'reported' },
-			{ model: Admin, as: 'auditor' },
-			{ model: StrikeReason, as: 'strike_reason' }
-		],
+		include: [{ all: true }],
 		order: [['created_at', 'DESC']],
 		offset: data.from || 0,
 		limit: data.limit || 100
@@ -102,60 +97,61 @@ export const PATCH = (async ({ request, cookies }) => {
 	}
 	const data = parseResult.data;
 
-	const report = await Report.findOne({ where: { id: data.id } });
+	const report = await Report.findOne({ where: { id: data.id }, include: [{ all: true }] });
 	const admin = await Admin.findOne({ where: { id: data.auditor } });
-	const reported = data.reported
-		? await User.findOne({ where: { uuid: data.reported } })
-		: undefined;
-	if (report === null || (admin === null && data.auditor != -1) || reported === null)
+	const reported = data.reported ? await User.findOne({ where: { uuid: data.reported } }) : null;
+	if (report === null || (admin === null && data.auditor != -1))
 		return new Response(null, { status: 400 });
 
 	const webhookTriggerUsers: string[] = [];
-	if (report.reported_id != reported?.id) {
-		const oldReportUser = await User.findByPk(report.reported_id);
-		if (oldReportUser) webhookTriggerUsers.push(oldReportUser.uuid);
-		if (reported) webhookTriggerUsers.push(reported.uuid);
-	} else if (
-		reported &&
-		report.reported_id != null &&
-		report.strike_reason_id != data.strike_reason
+
+	// check if strike reason has changed and return 400 if it doesn't exist
+	if (
+		(report.strike_reason?.id ?? -1) != data.strike_reason &&
+		data.strike_reason != null &&
+		data.strike_reason != -1
 	) {
-		webhookTriggerUsers.push(reported.uuid);
+		const strike_reason = await StrikeReason.findByPk(data.strike_reason);
+		if (strike_reason == null) return new Response(null, { status: 400 });
+	}
+
+	if (data.status === 'reviewed') {
+		// trigger webhook if status changed to reviewed
+		if (report.status !== 'reviewed' && data.strike_reason != -1 && reported) {
+			webhookTriggerUsers.push(reported.uuid!);
+		}
+		// trigger webhook if strike reason has changed
+		else if (
+			(report.strike_reason?.id ?? -1) != data.strike_reason &&
+			report.reported &&
+			reported
+		) {
+			webhookTriggerUsers.push(reported.uuid!);
+		}
+	} else if (report.status === 'reviewed') {
+		// trigger webhook if report status is reviewed and reported user has changed
+		if (report.strike_reason != null && report.reported) {
+			webhookTriggerUsers.push(report.reported.uuid!);
+		}
 	}
 
-	report.reported_id = reported?.id ?? null;
 	if (data.notice != null) report.notice = data.notice;
 	if (data.statement != null) report.statement = data.statement;
 	if (data.status != null) report.status = data.status;
-	if (data.strike_reason != null) {
-		if (data.status !== 'reviewed') {
-			if (data.strike_reason == -1) {
-				report.strike_reason_id = null;
-			} else {
-				const strike_reason = await StrikeReason.findByPk(data.strike_reason);
-				if (strike_reason == null) return new Response(null, { status: 400 });
-				report.strike_reason_id = strike_reason.id;
-			}
-		} else if (data.strike_reason == -1 && report.strike_reason_id != null) {
-			report.strike_reason_id = null;
-			report.striked_at = null;
-		} else if (data.strike_reason != -1 && data.strike_reason != report.strike_reason_id) {
-			if (!report.reported_id) return new Response(null, { status: 400 });
-			const strike_reason = await StrikeReason.findByPk(data.strike_reason);
-			if (strike_reason == null) return new Response(null, { status: 400 });
-			report.strike_reason_id = strike_reason.id;
-			report.striked_at = new Date(Date.now());
-		}
-	}
+	if (data.reported != null && reported) report.reported_id = reported.id;
+	if (data.strike_reason != null)
+		report.strike_reason_id = data.strike_reason == -1 ? null : data.strike_reason;
+	if (data.strike_reason != null)
+		report.striked_at = data.strike_reason == -1 ? null : new Date(Date.now());
 	if (admin != null) report.auditor_id = admin.id;
 
 	await report.save();
 
-	if (webhookTriggerUsers.length > 0 && data.status == 'reviewed' && env.REPORTED_WEBHOOK) {
 	for (const webhookTriggerUser of webhookTriggerUsers) {
 		// no `await` to avoid blocking
-			webhookUserReported(env.REPORTED_WEBHOOK, webhookTriggerUser);
-		}
+		webhookUserReported(env.REPORTED_WEBHOOK, webhookTriggerUser).catch((e) =>
+			console.error(`failed to send reported webhook: ${e}`)
+		);
 	}
 
 	return new Response();

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,
+	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>

src/routes/admin/reports/NewReportModal.svelte

@@ -3,15 +3,18 @@
 	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';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	const dispatch = createEventDispatcher();
+	let { onSubmit }: { onSubmit: (data: typeof Report.prototype.dataValues) => void } = $props();
 
-	let reporter: string;
-	let reported: string;
-	let reason = '';
-	let body = '';
+	let showPopupModal = getPopupModalShowFn();
+
+	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,19 +26,21 @@
 				body: body || null
 			})
 		});
-		if (response.ok) dispatch('submit', await response.json());
+		if (response.ok) onSubmit(await response.json());
 	}
 
 	let globalCloseForm: HTMLFormElement;
 
 	let reportForm: HTMLFormElement;
-	let confirmDialog: HTMLDialogElement;
 </script>
 
 <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 +64,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,18 +78,33 @@
 		<Input
 			type="submit"
 			value="Erstellen"
-			on:click={(e) => {
+			onclick={(e) => {
 				if (reportForm.checkValidity()) {
-					e.detail.preventDefault();
-					confirmDialog.show();
+					e.preventDefault();
+					showPopupModal({
+						title: 'Report Erstellen?',
+						text: body
+							? 'Dadurch, dass bereits Details über den Report Grund hinzugefügt wurden, ist es nach dem Erstellen nicht mehr möglich, den Report Inhalt zu ändern'
+							: 'Der Report wird als Entwurf gespeichert und kann nach dem Erstellen über den Report-Link bearbeitet werden',
+						actions: [
+							{
+								text: 'Erstellen',
+								action: async () => {
+									await newReport();
+									globalCloseForm.submit();
+								}
+							},
+							{ text: 'Abbrechen' }
+						]
+					});
 				}
 			}}
 		/>
 		<Input
 			type="submit"
 			value="Abbrechen"
-			on:click={(e) => {
-				e.detail.preventDefault();
+			onclick={(e) => {
+				e.preventDefault();
 				globalCloseForm.submit();
 			}}
 		/>
@@ -91,35 +113,3 @@
 <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]" bind:this={globalCloseForm}>
 	<button>close</button>
 </form>
-
-<dialog class="modal" bind:this={confirmDialog}>
-	<form method="dialog" class="modal-box">
-		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		<h3 class="font-roboto text-xl mb-2">Report Erstellen?</h3>
-		{#if body}
-			<p>
-				Dadurch, dass bereits Details über den Report Grund hinzugefügt wurden, ist es nach dem
-				Erstellen nicht mehr möglich, den Report Inhalt zu ändern
-			</p>
-		{:else}
-			<p>
-				Der Report wird als Entwurf gespeichert und kann nach dem Erstellen über den Report-Link
-				bearbeitet werden
-			</p>
-		{/if}
-		<div class="flex flex-row space-x-2 mt-6">
-			<Input
-				type="submit"
-				value="Erstellen"
-				on:click={async () => {
-					await newReport();
-					globalCloseForm.submit();
-				}}
-			/>
-			<Input type="submit" value="Abbrechen" />
-		</div>
-	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>

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 }
 	);
 

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>

src/routes/admin/tools/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="flex justify-center">
+	<slot />
+</div>

src/routes/admin/tools/+page.server.ts

@@ -0,0 +1,11 @@
+import type { PageServerLoad } from './$types';
+import { getSession } from '$lib/server/session';
+import { Permissions } from '$lib/permissions';
+import { redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/public';
+
+export const load: PageServerLoad = async ({ cookies }) => {
+	if (getSession(cookies, { permissions: [Permissions.Settings] }) == null) {
+		throw redirect(302, `${env.PUBLIC_BASE_PATH}/admin`);
+	}
+};

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import UuidFinder from './UuidFinder.svelte';
+
+	let tools = [{ label: 'Account UUID finder', component: UuidFinder }];
+</script>
+
+<div class="mt-4">
+	{#each tools as tool}
+		{@const Component = tool.component}
+		<fieldset class="border border-solid rounded border-gray-700 py-3 px-6">
+			<legend class="text-sm px-1">{tool.label}</legend>
+			<Component />
+		</fieldset>
+	{/each}
+</div>

src/routes/admin/tools/+server.ts

@@ -0,0 +1,71 @@
+import { getSession } from '$lib/server/session';
+import { Permissions } from '$lib/permissions';
+import type { RequestHandler } from '@sveltejs/kit';
+import {
+	ApiError,
+	getBedrockUuid,
+	getJavaUuid,
+	RateLimitError,
+	UserNotFoundError
+} from '$lib/server/minecraft';
+import type { ZodType } from 'zod';
+import { FindUuidSchema } from './schema';
+
+export const POST = (async ({ url, request, cookies }) => {
+	if (getSession(cookies, { permissions: [Permissions.Tools] }) == null) {
+		return new Response(null, { status: 401 });
+	}
+
+	const action = url.searchParams.get('action');
+	if (!action) {
+		return new Response(null, { status: 400 });
+	}
+
+	try {
+		switch (action) {
+			case 'getuuid': {
+				const data = await parseData(FindUuidSchema, await request.json());
+				return new Response(await findUuid(data.username, data.edition), { status: 200 });
+			}
+		}
+		return new Response(null, { status: 400 });
+	} catch (error) {
+		return new Response(JSON.stringify({ error: error }), { status: 400 });
+	}
+}) satisfies RequestHandler;
+
+async function parseData<Output>(schema: ZodType<Output>, json: string): Promise<Output> {
+	const parseResult = await schema.safeParseAsync(json);
+	if (!parseResult.success) throw new Error(parseResult.error.toString());
+
+	return parseResult.data;
+}
+
+async function findUuid(username: string, edition: 'java' | 'bedrock'): Promise<string> {
+	let uuid = '';
+
+	try {
+		switch (edition) {
+			case 'java':
+				uuid = await getJavaUuid(username);
+				break;
+			case 'bedrock':
+				uuid = await getBedrockUuid(username);
+				break;
+		}
+	} catch (e) {
+		if (e instanceof UserNotFoundError) {
+			throw `Der Spielername ${username} existiert nicht`;
+		} else if (e instanceof ApiError) {
+			throw (e as Error).message;
+		} else if (e instanceof RateLimitError) {
+			throw 'Rate limit exceeded, bitte versuche es erneut';
+		} else {
+			throw e;
+		}
+	}
+
+	return JSON.stringify({
+		uuid: uuid
+	});
+}

src/routes/admin/tools/UuidFinder.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import Select from '$lib/components/Input/Select.svelte';
+	import { sendRequest } from './tools';
+
+	let username = $state('');
+	let edition = $state('java');
+	let uuid = $state('');
+</script>
+
+<div class="flex flex-col items-center space-y-4">
+	<div class="flex flex-row space-x-2">
+		<Input type="text" size="sm" bind:value={username}>
+			{#snippet label()}
+				<span>Username</span>
+			{/snippet}
+		</Input>
+		<Select label="Edition" size="sm" bind:value={edition}>
+			<option value="java">Java Edition</option>
+			<option value="bedrock">Bedrock Edition</option>
+		</Select>
+	</div>
+	<Input
+		type="submit"
+		size="sm"
+		disabled={!username}
+		value="UUID finden"
+		onclick={() =>
+			sendRequest('getuuid', { username, edition })
+				.then((data) => (uuid = data.uuid))
+				.catch(() => (uuid = ''))}
+	/>
+	<div class="w-full">
+		<Input
+			type="text"
+			size="sm"
+			readonly={true}
+			disabled={!uuid}
+			pickyWidth={false}
+			placeholder="UUID... "
+			value={uuid}
+		/>
+	</div>
+</div>

src/routes/admin/tools/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const FindUuidSchema = z.object({
+	username: z.string(),
+	edition: z.enum(['java', 'bedrock'])
+});

src/routes/admin/tools/tools.ts

@@ -0,0 +1,22 @@
+import { env } from '$env/dynamic/public';
+import { errorMessage } from '$lib/stores';
+
+type Actions = 'getuuid';
+
+export async function sendRequest<T = any>(action: Actions, data: any): Promise<T> {
+	const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/tools?action=${action}`, {
+		method: 'POST',
+		body: JSON.stringify(data)
+	});
+	if (!response.ok) {
+		const data = await response.json();
+		if (Object.hasOwn(data, 'error')) {
+			errorMessage.set(data['error']);
+		} else {
+			errorMessage.set('Ein Fehler ist aufgetreten');
+		}
+		throw new Error();
+	}
+
+	return response.json();
+}

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';
@@ -12,12 +11,13 @@
 	import SortableTh from '$lib/components/Table/SortableTh.svelte';
 	import NewUserModal from './NewUserModal.svelte';
 	import PaginationTableBody from '$lib/components/PaginationTable/PaginationTableBody.svelte';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	export let data: PageData;
+	let showPopupModal = getPopupModalShowFn();
 
-	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;
@@ -65,17 +65,27 @@
 		}
 	}
 
-	$: if (userFilter) fetchUsers({ from: 0 }).then((u) => (users = u));
+	let userFilterEffectAlreadyRan = false;
+	$effect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		userFilter;
+
+		if (!userFilterEffectAlreadyRan) {
+			userFilterEffectAlreadyRan = true;
+			return;
+		}
+		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={() => (userFilter = $state.snapshot(userFilter))} />
+		<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 +97,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 +127,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,18 +156,56 @@
 								{#if user.edit}
 									<button
 										class="btn btn-sm btn-square"
-										on:click={async (e) => {
+										onclick={async (e) => {
+											showPopupModal({
+												title: 'Speichern',
+												text: `Sollen die Änderungen für den Nutzer '${user.username}' gespeichert werden?`,
+												actions: [
+													{
+														text: 'Speichern',
+														action: async () => {
 															await buttonTriggeredRequest(e, updateUser(user));
 															user.edit = false;
+														}
+													},
+													{ text: 'Abbrechen' }
+												]
+											});
 										}}
 									>
 										<Check size="18" />
 									</button>
 									<button
 										class="btn btn-sm btn-square"
-										on:click={() => {
+										onclick={() => {
+											if (
+												user.firstname === user.before.firstname &&
+												user.lastname === user.before.lastname &&
+												user.birthday === user.before.birthday &&
+												user.telephone === user.before.telephone &&
+												user.username === user.before.username &&
+												user.playertype === user.before.playertype &&
+												user.password === user.before.password &&
+												user.uuid === user.before.uuid
+											) {
 												user.edit = false;
-											user = user.before;
+												return;
+											}
+
+											showPopupModal({
+												title: 'Abbrechen',
+												text: 'Soll die Nutzerbearbeitung abgebrochen werden?',
+												actions: [
+													{
+														text: 'Abbrechen',
+														action: () => {
+															user.edit = false;
+															users[i] = user.before;
+														}
+													},
+													{ text: 'Schließen' }
+												]
+											});
 										}}
 									>
 										<NoSymbol size="18" />
@@ -165,8 +213,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 +222,19 @@
 									</button>
 									<button
 										class="btn btn-sm btn-square"
-										on:click={(e) => buttonTriggeredRequest(e, deleteUser(user.id))}
+										onclick={(e) => {
+											showPopupModal({
+												title: 'Nutzer löschen',
+												text: `Soll der Nutzer '${user.username}' wirklich gelöscht werden?`,
+												actions: [
+													{
+														text: 'Löschen',
+														action: () => buttonTriggeredRequest(e, deleteUser(user.id))
+													},
+													{ text: 'Abbrechen' }
+												]
+											});
+										}}
 									>
 										<Trash size="18" />
 									</button>
@@ -190,8 +250,8 @@
 
 <dialog class="modal" bind:this={newUserModal}>
 	<NewUserModal
-		on:submit={(e) => {
-			users = [...users, e.detail];
+		onSubmit={(e) => {
+			users = [...users, e];
 			newUserModal.close();
 		}}
 	/>

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, 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 }) => {
@@ -117,6 +123,9 @@ export const PUT = (async ({ request, cookies }) => {
 		} else if (e instanceof ApiError) {
 			console.error((e as Error).message);
 			uuid = null;
+		} else if (e instanceof RateLimitError) {
+			console.error(`uuid request rate limited for user '${data.username}'`);
+			uuid = null;
 		} else {
 			console.error((e as Error).message);
 			throw error(500);

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>

src/routes/admin/users/NewUserModal.svelte

@@ -3,16 +3,36 @@
 	import { env } from '$env/dynamic/public';
 	import Select from '$lib/components/Input/Select.svelte';
 	import { errorMessage } from '$lib/stores';
-	import { createEventDispatcher } from 'svelte';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	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 showPopupModal = getPopupModalShowFn();
+
+	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 +47,7 @@
 			})
 		});
 		if (response.ok) {
-			dispatch('submit', {
+			onSubmit({
 				firstname: firstname,
 				lastname: lastname,
 				birthday: birthday,
@@ -44,30 +64,42 @@
 	let globalCloseForm: HTMLFormElement;
 
 	let reportForm: HTMLFormElement;
-	let confirmDialog: HTMLDialogElement;
 </script>
 
 <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,18 +110,21 @@
 		<Input
 			type="submit"
 			value="Hinzufügen"
-			on:click={(e) => {
+			onclick={(e) => {
 				if (reportForm.checkValidity()) {
-					e.detail.preventDefault();
-					confirmDialog.show();
+					e.preventDefault();
+					showPopupModal({
+						title: 'Spieler hinzufügen?',
+						actions: [{ text: 'Hinzufügen', action: newUser }, { text: 'Abbrechen' }]
+					});
 				}
 			}}
 		/>
 		<Input
 			type="submit"
 			value="Abbrechen"
-			on:click={(e) => {
-				e.detail.preventDefault();
+			onclick={(e) => {
+				e.preventDefault();
 				globalCloseForm.submit();
 			}}
 		/>
@@ -98,17 +133,3 @@
 <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]" bind:this={globalCloseForm}>
 	<button>close</button>
 </form>
-
-<dialog class="modal" bind:this={confirmDialog}>
-	<form method="dialog" class="modal-box">
-		<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="Abbrechen" />
-		</div>
-	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>

src/routes/api/feedback/+server.ts

@@ -7,7 +7,7 @@ import type { CreationAttributes } from 'sequelize';
 import { env as public_env } from '$env/dynamic/public';
 
 export const POST = (async ({ request, url }) => {
-	if (env.REPORT_SECRET && url.searchParams.get('secret') !== env.REPORT_SECRET)
+	if (env.API_SECRET && url.searchParams.get('secret') !== env.API_SECRET)
 		return new Response(null, { status: 401 });
 
 	const parseResult = await FeedbackAddSchema.safeParseAsync(await request.json());
@@ -21,9 +21,10 @@ export const POST = (async ({ request, url }) => {
 		where: { uuid: data.users },
 		attributes: ['id', 'uuid']
 	})) {
-		feedback[user.uuid] = {
+		feedback[user.uuid!] = {
 			url_hash: crypto.randomBytes(18).toString('hex'),
 			event: data.event,
+			title: data.title ?? null,
 			draft: true,
 			user_id: user.id
 		};
@@ -31,8 +32,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(

src/routes/api/feedback/schema.ts

@@ -2,5 +2,6 @@ import { z } from 'zod';
 
 export const FeedbackAddSchema = z.object({
 	event: z.string(),
+	title: z.string().nullish(),
 	users: z.array(z.string())
 });

src/routes/api/report/+server.ts

@@ -6,10 +6,10 @@ import { env } from '$env/dynamic/private';
 import { ReportAddSchema } from './schema';
 
 export const GET = (async ({ url }) => {
-	if (env.REPORT_SECRET && url.searchParams.get('secret') !== env.REPORT_SECRET)
+	if (env.API_SECRET && url.searchParams.get('secret') !== env.API_SECRET)
 		return new Response(null, { status: 401 });
 
-	const user = await User.findOne({ where: { uuid: url.searchParams.get('user') ?? '' } });
+	const user = await User.findOne({ where: { uuid: url.searchParams.get('uuid') ?? '' } });
 	if (user === null) return new Response(null, { status: 400 });
 
 	const reports = {
@@ -55,7 +55,7 @@ export const GET = (async ({ url }) => {
 }) satisfies RequestHandler;
 
 export const POST = (async ({ request, url }) => {
-	if (env.REPORT_SECRET && url.searchParams.get('secret') !== env.REPORT_SECRET)
+	if (env.API_SECRET && url.searchParams.get('secret') !== env.API_SECRET)
 		return new Response(null, { status: 401 });
 
 	const parseResult = await ReportAddSchema.safeParseAsync(await request.json());

src/routes/api/user/+server.ts

@@ -4,7 +4,7 @@ import { env } from '$env/dynamic/private';
 import { Op } from 'sequelize';
 
 export const GET = (async ({ url }) => {
-	if (env.REPORT_SECRET && url.searchParams.get('secret') !== env.REPORT_SECRET)
+	if (env.API_SECRET && url.searchParams.get('secret') !== env.API_SECRET)
 		return new Response(null, { status: 401 });
 
 	const uuid = url.searchParams.get('uuid');

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',
@@ -62,7 +59,7 @@ Gruppe beitreten.</p>`
 				},
 				{
 					title: 'Auf welcher Version läuft der Server?',
-					content: `<p>Gespielt wird immer auf der neuesten Version, also laut aktuellem Stand Version 1.21.3.</p>`
+					content: `<p>Gespielt wird immer auf der neuesten Version, also laut aktuellem Stand Version 1.21.4.</p>`
 				},
 				{
 					title: 'Kann ich auch als Bedrock-Spieler (Handy oder Konsole) mitspielen?',
@@ -159,7 +156,7 @@ allerdings erst nach einigen Stunden wieder beendet werden.</p>`
 wirkt sich allerdings nicht auf das Spielgeschehen aus.</p>`
 				},
 				{
-					title: 'Was gibt es für neue coole Features?',
+					title: 'Was gibt es für neue Features?',
 					content: `<ul class="list-disc pl-8">
 <li>Miniböcke, die du selbst gestalten kannst</li>
 <li>Neue Event-Spiele</li>
@@ -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>

src/routes/feedback/+layout.svelte

@@ -1,5 +1,5 @@
-<div class="flex justify-center items-center w-full min-h-screen h-full">
-	<div class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
+<div class="flex justify-center items-center w-full">
+	<div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
 		<slot />
 	</div>
 </div>

src/routes/feedback/+page.svelte

@@ -3,12 +3,12 @@
 	import Textarea from '$lib/components/Input/Textarea.svelte';
 	import { env } from '$env/dynamic/public';
 	import Select from '$lib/components/Input/Select.svelte';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	let content = '';
-	let type = 'feedback';
+	let showPopupModal = getPopupModalShowFn();
 
-	let submitModal: HTMLDialogElement;
-	let sentModal: HTMLDialogElement & { type?: string } = {};
+	let content = $state('');
+	let type = $state('feedback');
 
 	async function submitFeedback() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/feedback`, {
@@ -27,7 +27,42 @@
 
 <div>
 	<h2 class="text-3xl text-center">Feedback & Kontakt</h2>
-	<form on:submit|preventDefault={() => submitModal.show()}>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+
+			showPopupModal({
+				title: `${type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abschicken?`,
+				text:
+					type === 'feedback'
+						? 'Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.'
+						: 'Bitte hinterlege eine Rückmeldemöglichkeit in deiner Anfrage. Nachdem sie abgeschickt wurde, kannst du die Nachricht nicht mehr bearbeiten.',
+				actions: [
+					{
+						text: 'Abschicken',
+						action: () =>
+							setTimeout(async () => {
+								await submitFeedback();
+
+								showPopupModal({
+									title: `${type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt`,
+									text:
+										type === 'feedback'
+											? 'Dein Feedback wurde abgeschickt.'
+											: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.',
+									actions: [{ text: 'Schließen' }],
+									onClose: () => {
+										content = '';
+										type = 'feedback';
+									}
+								});
+							}, 200)
+					},
+					{ text: 'Abbrechen' }
+				]
+			});
+		}}
+	>
 		<div class="space-y-4 mt-6 mb-4">
 			<Select size="sm" bind:value={type}>
 				<option value="feedback">Feedback</option>
@@ -45,78 +80,3 @@
 		</div>
 	</form>
 </div>
-
-<dialog class="modal" bind:this={submitModal}>
-	<form method="dialog" class="modal-box">
-		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		<div>
-			<h3 class="font-roboto font-medium text-xl">
-				{type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abschicken?
-			</h3>
-			<div class="my-4">
-				{#if type === 'feedback'}
-					<p>Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.</p>
-				{:else}
-					<p>
-						Bitte hinterlege eine Rückmeldemöglichkeit in deiner Anfrage. Nachdem sie abgeschickt
-						wurde, kannst du die Nachricht nicht mehr bearbeiten.
-					</p>
-				{/if}
-			</div>
-			<div class="flex flex-row space-x-1">
-				<Input
-					type="submit"
-					value="Abschicken"
-					on:click={async () => {
-						await submitFeedback();
-						sentModal.type = type;
-						sentModal.show();
-					}}
-				/>
-				<Input type="submit" value="Abbrechen" />
-			</div>
-		</div>
-	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>
-
-<dialog class="modal" bind:this={sentModal}>
-	<form
-		method="dialog"
-		class="modal-box"
-		on:submit={() => {
-			content = '';
-			type = 'feedback';
-		}}
-	>
-		<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
-			</h3>
-			<div class="my-4">
-				{#if type === 'feedback'}
-					<p>Dein Feedback wurde abgeschickt.</p>
-				{:else}
-					<p>
-						Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei
-						Dir melden.
-					</p>
-				{/if}
-			</div>
-			<Input type="submit" value="Schließen" />
-		</div>
-	</form>
-	<form
-		method="dialog"
-		class="modal-backdrop bg-[rgba(0,0,0,.3)]"
-		on:submit={() => {
-			content = '';
-			type = 'feedback';
-		}}
-	>
-		<button>close</button>
-	</form>
-</dialog>

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

@@ -12,7 +12,7 @@ export const load: PageServerLoad = async ({ params }) => {
 
 	return {
 		draft: feedback.content === null,
-		event: feedback.event,
+		title: feedback.title,
 		anonymous: feedback.user_id === null
 	};
 };

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

@@ -1,10 +1,11 @@
 <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();
+
+	let draft = $state(data.draft);
 </script>
 
 <svelte:head>
@@ -13,13 +14,9 @@
 	<meta name="robots" content="noindex" />
 </svelte:head>
 
-{#if data.draft}
+{#if draft}
 	<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
-		<FeedbackDraft
-			event={data.event}
-			anonymous={data.anonymous}
-			on:submit={() => (data.draft = false)}
-		/>
+		<FeedbackDraft title={data.title} anonymous={data.anonymous} onSubmit={() => (draft = false)} />
 	</div>
 {:else}
 	<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>

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

@@ -1,19 +1,20 @@
 <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';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	export let event: string;
-	export let anonymous: boolean;
+	let {
+		title,
+		anonymous,
+		onSubmit
+	}: { title: string | null; anonymous: boolean; onSubmit?: () => void } = $props();
 
-	const dispatch = createEventDispatcher();
+	let showPopupModal = getPopupModalShowFn();
 
-	let content = '';
-	let sendAnonymous = true;
-
-	let submitModal: HTMLDialogElement;
+	let content = $state('');
+	let sendAnonymous = $state(false);
 
 	async function submitFeedback() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/feedback/${$page.params.url_hash}`, {
@@ -28,29 +29,38 @@
 
 <div>
 	<h2 class="text-3xl text-center">Feedback</h2>
-	<form on:submit|preventDefault={() => submitModal.show()}>
-		<div class="space-y-4 my-4">
-			<Input size="sm" pickyWidth={false} disabled value={event}>
-				<span slot="label">Event</span>
-			</Input>
-			<Textarea required={true} rows={4} label="Feedback" bind:value={content} />
-			<div>
-				<Input type="submit" disabled={content === ''} value="Feedback senden" />
-			</div>
-		</div>
-	</form>
-</div>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
 
-<dialog class="modal" bind:this={submitModal}>
-	<form method="dialog" class="modal-box">
-		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		<div>
-			<h3 class="font-roboto font-medium text-xl">Feedback abschicken?</h3>
-			<div class="my-4">
-				<p>Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.</p>
+			showPopupModal({
+				title: 'Feedback abschicken?',
+				text: 'Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.',
+				actions: [
+					{
+						text: 'Abschicken',
+						action: async () => {
+							await submitFeedback();
+							onSubmit?.();
+						}
+					},
+					{ text: 'Abbrechen' }
+				]
+			});
+		}}
+	>
+		<div class="space-y-4 my-4">
+			{#if title}
+				<Input size="sm" pickyWidth={false} disabled value={title}>
+					{#snippet label()}
+						<span>Event</span>
+					{/snippet}
+				</Input>
+			{/if}
+			<Textarea required={true} rows={4} label="Feedback" bind:value={content} />
 			{#if !anonymous}
 				<div class="flex items-center gap-2 mt-2">
-						<Input type="checkbox" id="anonymous" size="xs" checked />
+					<Input type="checkbox" id="anonymous" size="xs" bind:checked={sendAnonymous} />
 					<label
 						for="anonymous"
 						title="Dein Spielername wird nach dem Abschicken nicht mit dem Feedback zusammen gespeichert"
@@ -58,21 +68,9 @@
 					>
 				</div>
 			{/if}
-			</div>
-			<div class="flex flex-row space-x-1">
-				<Input
-					type="submit"
-					value="Abschicken"
-					on:click={async () => {
-						await submitFeedback();
-						dispatch('submit');
-					}}
-				/>
-				<Input type="submit" value="Abbrechen" />
+			<div>
+				<Input type="submit" disabled={content === ''} value="Feedback senden" />
 			</div>
 		</div>
 	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>
+</div>

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}

src/routes/register/+server.ts

@@ -1,4 +1,10 @@
-import { ApiError, getJavaUuid, getNoAuthUuid, UserNotFoundError } from '$lib/server/minecraft';
+import {
+	ApiError,
+	getJavaUuid,
+	getNoAuthUuid,
+	RateLimitError,
+	UserNotFoundError
+} from '$lib/server/minecraft';
 import { error, type RequestHandler } from '@sveltejs/kit';
 import { Settings, User } from '$lib/server/database';
 import { RegisterSchema } from './schema';
@@ -11,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);
@@ -44,13 +51,19 @@ export const POST = (async ({ request }) => {
 		} else if (e instanceof ApiError) {
 			console.error((e as Error).message);
 			uuid = null;
+		} else if (e instanceof RateLimitError) {
+			console.error(`uuid request rate limited for user '${data.username}'`);
+			uuid = null;
 		} else {
 			console.error((e as Error).message);
 			throw error(500);
 		}
 	}
 
-	if (uuid && (await User.findOne({ where: { uuid: uuid } }))) {
+	if (
+		(uuid && (await User.findOne({ where: { uuid: uuid } }))) ||
+		(!uuid && (await User.findOne({ where: { username: data.username } })))
+	) {
 		throw error(
 			400,
 			'Dein Minecraft-Account wurde bereits registriert.\n\nKontaktiere bitte einen Admin, falls diese ' +

src/routes/register/Register.svelte

@@ -1,27 +1,57 @@
 <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';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	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();
+
+	let showPopupModal = getPopupModalShowFn();
 
 	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 = [
@@ -49,7 +79,7 @@
 			);
 
 			if (!parseResult.success) {
-				reject(Error(parseResult.error.issues.map((i) => i.message).join('\n\n')));
+				reject(Error(parseResult.error.issues.map((i) => i.message).join('\n')));
 				return;
 			}
 
@@ -58,10 +88,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 +110,32 @@
 
 	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 inputsInvalidMessage: string | null = $state('Bitte fülle alle erforderlichen Felder aus');
+	let registerRequest: Promise<void> | null = $state(null);
+	let errorMessage: string = $state('');
 
-	let errorMessage: string = '';
+	$effect(() => {
+		if (!errorMessage) return;
+		showPopupModal({
+			title: 'Fehler',
+			text: errorMessage
+		});
+	});
 </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 +145,9 @@
 			required={true}
 			bind:inputElement={firstnameInput}
 		>
-			<span slot="label">Vorname</span>
+			{#snippet label()}
+				<span>Vorname</span>
+			{/snippet}
 		</Input>
 		<Input
 			id="lastname"
@@ -109,7 +156,9 @@
 			required={true}
 			bind:inputElement={lastnameInput}
 		>
-			<span slot="label">Nachname</span>
+			{#snippet label()}
+				<span>Nachname</span>
+			{/snippet}
 		</Input>
 		<Input
 			id="birthday"
@@ -118,8 +167,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 +181,16 @@
 			bind:inputElement={phoneInput}
 			pattern={new RegExp(/^[+()\s/\d]+$/)}
 		>
-			<span slot="label">Telefonnummer</span>
-			<p slot="notice">
+			{#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 +202,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 +217,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 +258,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 +270,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 +298,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 +307,7 @@
 
 <dialog
 	class="modal"
-	on:close={() => {
+	onclose={() => {
 		clearInterval(rulesModalTimer);
 		rulesModalTimer = undefined;
 	}}
@@ -266,7 +326,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 +338,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 +350,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 +361,7 @@
 					<div
 						style="width: {Math.min((rulesModalSecondsOpened / modalTimeoutSeconds) * 100, 100)}%"
 						class="h-full bg-base-300"
-					/>
+					></div>
 				</div>
 				<Input
 					id="rules-accept"
@@ -309,7 +369,7 @@
 					value="Akzeptieren"
 					disabled={rulesModalSecondsOpened < modalTimeoutSeconds}
 					containerClass="bg-transparent z-[1] relative"
-					on:click={() => {
+					onclick={() => {
 						rulesAccepted = true;
 						rulesInput.checked = true;
 						checkInputs();
@@ -322,16 +382,3 @@
 		<button>close</button>
 	</form>
 </dialog>
-
-{#if errorMessage}
-	<dialog class="modal" on:close={() => 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>
-			<p class="py-4 whitespace-pre-line">{errorMessage}</p>
-		</form>
-		<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
-			<button>close</button>
-		</form>
-	</dialog>
-{/if}

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" disabled>
+			{#snippet label()}
+				<span>Vorname</span>
+			{/snippet}
+		</Input>
+		<Input value={lastname} size="sm" disabled>
+			{#snippet label()}
+				<span>Nachname</span>
+			{/snippet}
+		</Input>
+		<Input value={birthday.toISOString().substring(0, 10)} type="date" size="sm" disabled>
+			{#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" disabled>
+			{#snippet label()}
+				<span>Telefonnummer</span>
+			{/snippet}
+		</Input>
+		<Input value={username} size="sm" disabled>
+			{#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>

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

@@ -1,3 +1,7 @@
-<div class="flex justify-center items-center w-full min-h-screen h-full">
-	<slot />
+<script lang="ts">
+	let { children } = $props();
+</script>
+
+<div class="flex justify-center items-center w-full">
+	{@render children()}
 </div>

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

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

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

@@ -1,11 +1,15 @@
 <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 reason = $state(data.reason);
+	let body = $state(data.body);
+	let reporterName = $state(data.reporter.name);
+	let reportedName = $state(data.reported.name || null);
+	let completed = $state(!data.draft);
 </script>
 
 <svelte:head>
@@ -14,22 +18,28 @@
 	<meta name="robots" content="noindex" />
 </svelte:head>
 
-<div class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
-	{#if data.draft}
+<div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
+	{#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}
+				bind:reason
+				bind:body
+				bind:reporterName
+				bind:reportedName
 				users={data.users ?? []}
-				on:submit={() => (data.draft = false)}
+				onsubmit={() => (completed = true)}
 			/>
 		</div>
-	{:else if data.status === 'reviewed'}
-		<ReportCompleted />
 	{:else}
 		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
-			<ReportSubmitted />
+			<ReportSubmitted
+				{reason}
+				{body}
+				{reporterName}
+				{reportedName}
+				status={data.status}
+				statement={data.statement}
+			/>
 		</div>
 	{/if}
 </div>

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

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

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

@@ -3,29 +3,35 @@
 	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';
+	import { getPopupModalShowFn } from '$lib/context';
 
-	export let reporterName: string;
-	export let reportedName: string | null;
-	export let reason: string;
-	export let users: string[];
+	let {
+		reporterName = $bindable(),
+		reportedName = $bindable(null),
+		reason = $bindable(),
+		body = $bindable(),
+		users,
+		onsubmit
+	}: {
+		reporterName: string;
+		reportedName: string | null;
+		reason: string;
+		body: string;
+		users: string[];
+		onsubmit: () => void;
+	} = $props();
 
-	let oldReported = reportedName;
-	$: reportedName = oldReported;
+	let showPopupModal = getPopupModalShowFn();
 
-	let body: string;
-	let userErrorModal: HTMLDialogElement;
-	let submitModal: HTMLDialogElement;
-
-	let dispatch = createEventDispatcher();
+	let reported = $state(reportedName);
 
 	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
 			})
@@ -45,35 +51,57 @@
 <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) {
-				userErrorModal.show();
+		onsubmit={(e) => {
+			e.preventDefault();
+			if (reported != null && users.findIndex((u) => u === reported) === -1) {
+				showPopupModal({
+					title: 'Fehler',
+					text: 'Der zu reportende Spieler existiert nicht.',
+					actions: [{ text: 'Schließen' }]
+				});
 			} else {
-				submitModal.show();
+				showPopupModal({
+					title: 'Report abschicken?',
+					text: 'Nach dem Abschicken des Reports wird sich ein Admin schnellstmöglich darum kümmern.',
+					actions: [
+						{
+							text: 'Abschicken',
+							action: async () => {
+								await submitReport();
+								onsubmit();
+							}
+						},
+						{ text: 'Abbrechen' }
+					]
+				});
 			}
 		}}
 	>
 		<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>
@@ -90,47 +118,3 @@
 		</div>
 	</form>
 </div>
-
-<dialog class="modal" bind:this={userErrorModal}>
-	<form method="dialog" class="modal-box">
-		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		<div>
-			<h3 class="font-roboto font-medium text-xl">Fehler</h3>
-			<div class="my-4">
-				<p>Der zu reportende Spieler existiert nicht</p>
-			</div>
-			<div class="flex flex-row space-x-1">
-				<Input type="submit" value="Schließen" />
-			</div>
-		</div>
-	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>
-
-<dialog class="modal" bind:this={submitModal}>
-	<form method="dialog" class="modal-box">
-		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-		<div>
-			<h3 class="font-roboto font-medium text-xl">Report abschicken?</h3>
-			<div class="my-4">
-				<p>Nach dem Abschicken des Reports wird sich ein Admin schnellstmöglich darum kümmern.</p>
-			</div>
-			<div class="flex flex-row space-x-1">
-				<Input
-					type="submit"
-					value="Abschicken"
-					on:click={async () => {
-						await submitReport();
-						dispatch('submit');
-					}}
-				/>
-				<Input type="submit" value="Abbrechen" />
-			</div>
-		</div>
-	</form>
-	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-		<button>close</button>
-	</form>
-</dialog>

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

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

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>

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}

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>

src/routes/team/+page.svelte

@@ -32,7 +32,10 @@
 		{
 			name: 'Lars',
 			nickname: '28Pupsi28',
-			roles: ['Softwareentwicklung']
+			roles: ['Softwareentwicklung'],
+			links: [
+				{ name: 'Website', href: 'https://mathemann.ddns.net/turtle_game/', icon: globe_icon }
+			]
 		}
 	];
 </script>
@@ -45,7 +48,7 @@
 <h1 class="text-5xl mb-10">Das Team</h1>
 <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 my-4 justify-center">
 	{#each team as member}
-		<div class="card w-96 bg-base-200">
+		<div class="card max-w-96 bg-base-200">
 			<div class="card-body px-4 py-6">
 				<div class="flex flex-col items-center">
 					<div class="avatar placeholder mb-2">
@@ -61,7 +64,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

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;