Add confirmation popup util

src/routes/+layout.svelte

@@ -3,10 +3,12 @@
 	import NavBar from '$lib/components/NavBar.svelte';
 	import Snackbar from '$lib/components/Snackbar.svelte';
 	import '../app.scss';
+	import ConfirmationPopup from '$lib/components/ConfirmationPopup.svelte';
 </script>
 
 <NavBar />
 <Snackbar />
+<ConfirmationPopup />
 
 <div>
 	<slot />

src/routes/+page.svelte

@@ -2,4 +2,6 @@
 	import Catalog from '$lib/components/Catalog.svelte';
 </script>
 
-<div class="p-2"><Catalog /></div>
+<div class="p-2">
+	<Catalog />
+</div>

src/routes/[manga]/+page.svelte

@@ -3,9 +3,9 @@
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import VolumeItem from '$lib/components/VolumeItem.svelte';
-	import { Button, Modal } from 'flowbite-svelte';
-	import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
+	import { Button } from 'flowbite-svelte';
 	import { db } from '$lib/catalog/db';
+	import { promptConfirmation } from '$lib/util';
 
 	const manga = $currentManga?.sort((a, b) => {
 		if (a.volumeName < b.volumeName) {
@@ -17,23 +17,21 @@
 		return 0;
 	});
 
-	let popupModal = false;
-
 	onMount(() => {
 		if (!manga) {
 			goto('/');
 		}
 	});
 
-	function onDelete() {
-		popupModal = true;
-	}
-
 	async function confirmDelete() {
 		const title = manga?.[0].mokuroData.title_uuid;
 		await db.catalog.delete(title);
 		goto('/');
 	}
+
+	function onDelete() {
+		promptConfirmation('Are you sure you want to delete this manga?', confirmDelete);
+	}
 </script>
 
 <div class="p-2">
@@ -49,17 +47,6 @@
 	</div>
 </div>
 
-<Modal bind:open={popupModal} size="xs" autoclose>
-	<div class="text-center">
-		<ExclamationCircleOutline class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
-		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-			Are you sure you want to delete this manga?
-		</h3>
-		<Button color="red" class="mr-2" on:click={confirmDelete}>Yes</Button>
-		<Button color="alternative">No</Button>
-	</div>
-</Modal>
-
 <style>
 	.volumes {
 		display: flex;