Start implementing settings

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

@@ -3,17 +3,32 @@
 	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 { db } from '$lib/catalog/db';
 
 	const manga = $currentManga;
+	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('/');
+	}
 </script>
 
-<div>
+<div class="float-right"><Button outline color="red" on:click={onDelete}>Delete manga</Button></div>
+<div class="volumes">
 	{#if manga}
 		{#each manga as volume}
 			<VolumeItem {volume} />
@@ -21,8 +36,19 @@
 	{/if}
 </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>
-	div {
+	.volumes {
 		display: flex;
 		flex-direction: row;
 		gap: 20px;