🌌 Migrate app to svelte-5

app/src/lib/components/InfoDialog.svelte

@@ -1,15 +1,28 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { focusTrap } from 'svelte-focus-trap';
 	import { fly } from 'svelte/transition';
 	import { Check } from './icons';
 
 	// provided by <Modals />
-	export let isOpen: boolean;
 
-	export let title: string;
-	export let message: string;
-	export let onDismiss: any;
-	export let dismiss = { label: 'Dismiss', icon: Check };
+	interface Props {
+		isOpen: boolean;
+		title: string;
+		message: string;
+		onDismiss: any;
+		dismiss?: any;
+	}
+
+	let {
+		isOpen,
+		title,
+		message,
+		onDismiss,
+		dismiss = { label: 'Dismiss', icon: Check }
+	}: Props = $props();
 </script>
 
 {#if isOpen}
@@ -17,22 +30,22 @@
 		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-warning text-warning-content inline-flex items-center"
-					on:click={onDismiss}
-					><svelte:component this={dismiss.icon} class="mr-2 h-5 w-5" /><span>{dismiss.label}</span
+					onclick={onDismiss}
+					><dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span
 					></button
 				>
 			</div>