Handle database

src/routes/+page.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { db } from '$lib/catalog/db';
+	import { catalog } from '$lib/catalog/test';
 	import Button from '$lib/components/Button.svelte';
 	import Catalog from '$lib/components/Catalog.svelte';
 	import Modal from '$lib/components/Modal.svelte';
-	import { showSnackbar } from '$lib/util/snackbar';
 
 	function onClick() {
 		goto('/upload');
 	}
 
+	function clear() {
+		db.catalog.clear();
+	}
+
 	let modal: HTMLDialogElement;
 </script>
 
 <Button variant="secondary" on:click={onClick}>Upload</Button>
+<Button variant="danger" on:click={clear}>Clear</Button>
+
 <Modal bind:modal>
 	<div slot="title">Title</div>
 	<div slot="content">

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

@@ -2,8 +2,6 @@
 	import { currentManga } from '$lib/catalog';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import Button from '$lib/components/Button.svelte';
-	import { panAlign, Panzoom, zoomOriginal } from '$lib/panzoom';
 	import VolumeItem from '$lib/components/VolumeItem.svelte';
 
 	const manga = $currentManga;
@@ -17,7 +15,7 @@
 
 <div>
 	{#if manga}
-		{#each manga.volumes as volume}
+		{#each manga as volume}
 			<VolumeItem {volume} />
 		{/each}
 	{/if}

src/routes/upload/+page.svelte

@@ -1,44 +1,22 @@
 <script lang="ts">
+	import { db } from '$lib/catalog/db';
 	import Button from '$lib/components/Button.svelte';
+	import Catalog from '$lib/components/Catalog.svelte';
 	import FileUpload from '$lib/components/FileUpload.svelte';
-	import { processFiles, unzipManga, type Volume } from '$lib/upload';
+	import { processFiles } from '$lib/upload';
 
-	let promise: Promise<Volume[] | undefined> | undefined;
+	let promise: Promise<void>;
 
 	async function onUpload(files: FileList) {
 		promise = processFiles(files);
 	}
-
-	function up() {
-		page++;
-	}
-
-	function down() {
-		if (page > 0) {
-			page--;
-		}
-	}
-
-	let page = 0;
 </script>
 
 <!-- Note:  webkitdirectory is not fully supported and does not work on mobile -->
-<Button on:click={down}>{'<'}</Button>
-<Button on:click={up}>{'>'}</Button>
-{page}
 <FileUpload {onUpload} webkitdirectory>Upload directory</FileUpload>
 <FileUpload {onUpload} accept=".mokuro,.zip,.cbz,.rar" multiple>Upload files</FileUpload>
-{#if promise}
-	{#await promise}
-		<p>Loading...</p>
-	{:then volumes}
-		{#if volumes}
-			{#each volumes as { mokuroData, volumeName, archiveFile, files }}
-				<p>{volumeName}</p>
-				{#if files}
-					<img src={URL.createObjectURL(Object.values(files)[page])} alt="img" />
-				{/if}
-			{/each}
-		{/if}
-	{/await}
-{/if}
+
+{#await promise}
+	<h2>Loading...</h2>
+{/await}
+<Catalog />