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>

src/lib/util/index.ts

@@ -1,3 +1,4 @@
 export * from './snackbar'
 export * from './upload'
 export * from './misc'
+export * from './modals'

src/lib/util/modals.ts

@@ -0,0 +1,17 @@
+import { writable } from "svelte/store";
+
+type ConfirmationPopup = {
+  open: boolean;
+  message: string;
+  onConfirm?: () => void;
+};
+export const confirmationPopupStore = writable<ConfirmationPopup | undefined>(undefined);
+
+export function promptConfirmation(message: string, onConfirm?: () => void) {
+  confirmationPopupStore.set({
+    open: true,
+    message,
+    onConfirm
+  });
+}
+

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 { Button } from 'flowbite-svelte';
-	import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
 	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;