feat(frontend): Confirmation component to Svelte v5 callbacks

src/frontend/src/lib/components/app/core/Confirmation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
 	import { createEventDispatcher, type Snippet } from 'svelte';
 	import { stopPropagation } from 'svelte/legacy';
 	import Popover from '$lib/components/ui/Popover.svelte';
 	import { isBusy } from '$lib/derived/app/busy.derived';
@@ -10,13 +10,18 @@
 		title?: Snippet;
 		children: Snippet;
 		size?: 'default' | 'wide';
+		onyes: () => Promise<void>;
+		onno: () => void;
 	}
 
-	let { visible = $bindable(false), title, children, size = 'default' }: Props = $props();
-
-	const dispatch = createEventDispatcher();
-	const yes = () => dispatch('junoYes');
-	const no = () => dispatch('junoNo');
+	let {
+		visible = $bindable(false),
+		title,
+		children,
+		size = 'default',
+		onyes,
+		onno
+	}: Props = $props();
 
 	let center = $derived(size === 'wide' ? ('wide' as const) : true);
 </script>
@@ -27,11 +32,11 @@
 
 		{@render children()}
 
-		<button disabled={$isBusy} onclick={stopPropagation(no)} type="button">
+		<button disabled={$isBusy} onclick={onno} type="button">
 			{$i18n.core.no}
 		</button>
 
-		<button disabled={$isBusy} onclick={stopPropagation(yes)} type="button">
+		<button disabled={$isBusy} onclick={onyes} type="button">
 			{$i18n.core.yes}
 		</button>
 	</div>

src/frontend/src/lib/components/modules/access-keys/AccessKeyDelete.svelte

@@ -50,7 +50,7 @@
 	};
 </script>
 
-<Confirmation bind:visible on:junoYes={deleteController} on:junoNo={close}>
+<Confirmation onno={close} onyes={deleteController} bind:visible>
 	{#snippet title()}
 		{$i18n.controllers.delete_question}
 	{/snippet}

src/frontend/src/lib/components/modules/attach-detach/DetachSegment.svelte

@@ -72,7 +72,7 @@
 
 <button class="menu" onclick={() => (visible = true)}><IconLinkOff /> {$i18n.core.detach}</button>
 
-<Confirmation bind:visible on:junoYes={detach} on:junoNo={close}>
+<Confirmation onno={close} onyes={detach} bind:visible>
 	{#snippet title()}
 		<Text key="canisters.detach_title" value={segment} />
 	{/snippet}

src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStart.svelte

@@ -91,7 +91,7 @@
 
 <button class="menu" onclick={() => (visible = true)}><IconStart /> {$i18n.core.start}</button>
 
-<Confirmation bind:visible on:junoYes={start} on:junoNo={close}>
+<Confirmation onno={close} onyes={start} bind:visible>
 	{#snippet title()}
 		<Text key="canisters.start_tile" value={segment} />
 	{/snippet}

src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStop.svelte

@@ -77,7 +77,7 @@
 
 <button class="menu" onclick={() => (visible = true)}><IconStop /> {$i18n.core.stop}</button>
 
-<Confirmation bind:visible on:junoYes={stop} on:junoNo={close}>
+<Confirmation onno={close} onyes={stop} bind:visible>
 	{#snippet title()}
 		<Text key="canisters.stop_title" value={segment} />
 	{/snippet}

src/frontend/src/lib/components/satellites/automation/settings/GitHubDeleteRepoConfig.svelte

@@ -59,12 +59,7 @@
 	onaction={() => (visibleDelete = true)}
 />
 
-<Confirmation
-	size="wide"
-	bind:visible={visibleDelete}
-	on:junoYes={deleteRepoConfig}
-	on:junoNo={close}
->
+<Confirmation onno={close} onyes={deleteRepoConfig} size="wide" bind:visible={visibleDelete}>
 	{#snippet title()}
 		{$i18n.automation.delete_title}
 	{/snippet}

src/frontend/src/lib/components/satellites/collections/CollectionDelete.svelte

@@ -79,7 +79,7 @@
 
 <button onclick={() => (visible = true)} type="button">{$i18n.core.delete}</button>
 
-<Confirmation bind:visible on:junoYes={deleteCollection} on:junoNo={close}>
+<Confirmation onno={close} onyes={deleteCollection} bind:visible>
 	{#snippet title()}
 		{$i18n.collections.delete_question}
 	{/snippet}

src/frontend/src/lib/components/satellites/data/DataDelete.svelte

@@ -68,4 +68,4 @@
 	><IconDelete size="20px" /> {@render button?.()}</button
 >
 
-<Confirmation {children} {title} bind:visible on:junoYes={deleteSelectedData} on:junoNo={close} />
+<Confirmation {children} onno={close} onyes={deleteSelectedData} {title} bind:visible />

src/frontend/src/lib/components/satellites/hosting/HostingSwitchMemory.svelte

@@ -41,7 +41,7 @@
 
 <button onclick={open}>{$i18n.hosting.switch_memory}</button>
 
-<Confirmation bind:visible on:junoYes={switchMemory} on:junoNo={close}>
+<Confirmation onno={close} onyes={switchMemory} bind:visible>
 	{#snippet title()}
 		{$i18n.hosting.switch_memory}
 	{/snippet}

src/frontend/src/lib/components/wallet/transactions/TransactionsExport.svelte

@@ -43,7 +43,7 @@
 	<button onclick={() => (visible = true)} type="button">{$i18n.core.export}</button>
 {/if}
 
-<Confirmation bind:visible on:junoYes={exportTransactions} on:junoNo={close}>
+<Confirmation onno={close} onyes={exportTransactions} bind:visible>
 	{#snippet title()}
 		{$i18n.wallet.export_title}
 	{/snippet}