🌌 Migrate app to svelte-5

app/src/lib/components/ConfirmDialog.svelte

@@ -1,47 +1,61 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { closeModal } from 'svelte-modals';
 	import { focusTrap } from 'svelte-focus-trap';
 	import { fly } from 'svelte/transition';
 	import { Cancel, Check } from '$lib/components/icons';
 
 	// provided by <Modals />
-	export let isOpen: boolean;
 
-	export let title: string;
-	export let message: string;
-	export let onConfirm: any;
-	export let labels = {
+	interface Props {
+		isOpen: boolean;
+		title: string;
+		message: string;
+		onConfirm: any;
+		labels?: any;
+	}
+
+	let {
+		isOpen,
+		title,
+		message,
+		onConfirm,
+		labels = {
 		cancel: { label: 'Cancel', icon: Cancel },
 		confirm: { label: 'OK', icon: Check }
-	};
+	}
+	}: Props = $props();
 </script>
 
 {#if isOpen}
+	{@const SvelteComponent = labels?.confirm.icon}
 	<div
 		role="dialog"
 		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
 		transition:fly={{ y: 50 }}
-		on:introstart
-		on:outroend
+		onintrostart={bubble('introstart')}
+		onoutroend={bubble('outroend')}
         use:focusTrap
 	>
 		<div
 			class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
 		>
 			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-			<div class="divider my-2" />
+			<div class="divider my-2"></div>
 			<p class="text-base-content mb-1 text-start">{message}</p>
-			<div class="divider my-2" />
+			<div class="divider my-2"></div>
 			<div class="flex justify-end gap-2">
-				<button class="btn btn-primary inline-flex items-center" on:click={closeModal}
-					><svelte:component this={labels.cancel.icon} class="mr-2 h-5 w-5" /><span
+				<button class="btn btn-primary inline-flex items-center" onclick={closeModal}
+					><labels.cancel.icon class="mr-2 h-5 w-5" /><span
 						>{labels?.cancel.label}</span
 					></button
 				>
 				<button
 					class="btn btn-warning text-warning-content inline-flex items-center"
-					on:click={onConfirm}
-					><svelte:component this={labels?.confirm.icon} class="mr-2 h-5 w-5" /><span
+					onclick={onConfirm}
+					><SvelteComponent class="mr-2 h-5 w-5" /><span
 						>{labels?.confirm.label}</span
 					></button
 				>