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/dialogs/ConfirmDeletion.svelte | 31 +++++++++++++------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'frontend/src/lib/dialogs/ConfirmDeletion.svelte')

diff --git a/frontend/src/lib/dialogs/ConfirmDeletion.svelte b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
index 6b0cbf8..571fd05 100644
--- a/frontend/src/lib/dialogs/ConfirmDeletion.svelte
+++ b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
@@ -1,29 +1,30 @@
 <script lang="ts">
 	import { accelerator } from '$lib/Shortcuts';
 	import Dialog from '$lib/components/Dialog.svelte';
-	import { closeModal } from 'svelte-modals';
+	import type { ModalProps } from 'svelte-modals';
 
-	export let isOpen: boolean;
-	export let callback: () => void;
+	interface Props extends ModalProps {
+		callback: () => void;
+		names: string[];
+		typename: string;
+		warning?: string;
+	}
+
+	let { callback, names, typename, warning = undefined, ...modal }: Props = $props();
 
-	export let names: string[];
-	export let typename: string;
-	export let warning: string | undefined = undefined;
 	const multiple = names.length > 1;
 	const formattedTypename = multiple ? `${typename}s` : typename;
 	const formattedNames = multiple ? `${names.length} ${formattedTypename}` : names[0];
 
-	function confirm() {
+	function confirm(event: SubmitEvent) {
+		event.preventDefault();
 		callback();
-		closeModal();
+		modal.close();
 	}
 </script>
 
-<Dialog {isOpen}>
-	<svelte:fragment slot="header">
-		<h2>Delete {formattedTypename}</h2>
-	</svelte:fragment>
-	<form on:submit|preventDefault={confirm}>
+<Dialog title="Delete {formattedTypename}" {...modal}>
+	<form onsubmit={confirm}>
 		<div class="flex flex-col">
 			<p class="mb-3">
 				Are you sure you want to delete <span class="font-semibold">{formattedNames}</span>?
@@ -39,13 +40,13 @@
 				{/if}
 			{/if}
 			{#if warning}
-				<p class="font-medium text-red-600">Warning: {warning}</p>
+				<p class="font-semibold text-rose-600">Warning: {warning}</p>
 			{/if}
 		</div>
 
 		<div class="flex justify-end gap-4">
 			<button type="submit" class="btn-rose" use:accelerator={'Enter'}>Delete</button>
-			<button type="button" on:click={closeModal} class="btn-slate">Cancel</button>
+			<button type="button" onclick={() => modal.close()} class="btn-slate">Cancel</button>
 		</div>
 	</form>
 </Dialog>
-- 
cgit v1.2.3-2-gb3c3