Add confirmation popup util

src/lib/components/Catalog.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
 	import { catalog } from '$lib/catalog';
+	import { Button } from 'flowbite-svelte';
 	import CatalogItem from './CatalogItem.svelte';
+	import { promptConfirmation } from '$lib/util';
+	import { db } from '$lib/catalog/db';
+
+	function onClear() {
+		promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
+	}
 </script>
 
 {#if $catalog}
 	{#if $catalog.length > 0}
+		<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
 		<div class="container">
 			{#each $catalog as { manga }}
 				<CatalogItem {manga} />

src/lib/components/ConfirmationPopup.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { confirmationPopupStore } from '$lib/util';
+	import { Button, Modal } from 'flowbite-svelte';
+	import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
+	import { onMount } from 'svelte';
+
+	let open = false;
+
+	onMount(() => {
+		confirmationPopupStore.subscribe((value) => {
+			open = Boolean(value);
+		});
+	});
+</script>
+
+<Modal bind:open size="xs" autoclose outsideclose>
+	<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">
+			{$confirmationPopupStore?.message}
+		</h3>
+		<Button color="red" class="mr-2" on:click={$confirmationPopupStore?.onConfirm}>Yes</Button>
+		<Button color="alternative">No</Button>
+	</div>
+</Modal>

src/lib/components/Modal.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	export let modal: HTMLDialogElement;
-
-	function closeClicked() {
-		modal.close();
-	}
-</script>
-
-<dialog bind:this={modal}>
-	<button on:click={closeClicked}>X</button>
-	<h2 class="title">
-		<slot name="title" />
-	</h2>
-	<slot name="content" />
-	<div class="action">
-		<slot name="action" />
-	</div>
-</dialog>
-
-<style lang="scss">
-	dialog {
-		background-color: $secondary-color;
-		width: clamp(50vw, 500px, 90%);
-		border: 2px solid $primary-color;
-		border-radius: 12px;
-	}
-	dialog::backdrop {
-		background-color: rgba(black, 0.5);
-	}
-
-	button {
-		color: black;
-		font-weight: bold;
-		position: absolute;
-		right: 10px;
-		top: 10px;
-		font-size: large;
-	}
-
-	.action {
-		float: right;
-	}
-
-	.title {
-		text-align: center;
-	}
-</style>