From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/lib/components/Dialog.svelte | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'frontend/src/lib/components/Dialog.svelte')

diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte
index a0bbe5e..d300369 100644
--- a/frontend/src/lib/components/Dialog.svelte
+++ b/frontend/src/lib/components/Dialog.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
 	import { trapFocus } from '$lib/Actions';
 	import { fadeDefault } from '$lib/Transitions';
-	import { closeModal } from 'svelte-modals';
+	import type { Snippet } from 'svelte';
+	import type { ModalProps } from 'svelte-modals';
 	import { fade } from 'svelte/transition';
 
-	export let isOpen: boolean;
+	interface Props extends ModalProps {
+		title: string;
+		children?: Snippet;
+	}
+
+	let { isOpen, close, title, children }: Props = $props();
 </script>
 
 {#if isOpen}
@@ -18,18 +24,19 @@
 			class="pointer-events-auto flex flex-col rounded-md bg-slate-800 shadow-md shadow-slate-900"
 		>
 			<header class="flex items-center gap-1 border-b-2 border-slate-700/50 p-2">
-				<slot name="header" />
+				<h2>{title}</h2>
 				<button
 					type="button"
 					class="ml-auto flex items-center text-white/30 hover:text-white"
 					title="Cancel"
-					on:click={closeModal}
+					aria-label="Cancel"
+					onclick={close}
 				>
-					<span class="icon-base icon-[material-symbols--close]" />
+					<span class="icon-base icon-[material-symbols--close]"></span>
 				</button>
 			</header>
 			<main class="m-3 w-80 sm:w-[34rem]">
-				<slot />
+				{@render children?.()}
 			</main>
 		</div>
 	</div>
-- 
cgit v1.2.3-2-gb3c3