Testing page generation

src/routes/(app)/+layout.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { afterNavigate } from '$app/navigation';
-	import { navigating } from '$app/stores';
-	import { currentManga } from '$lib/catalog';
-	import Button from '$lib/components/Button.svelte';
-	import NavBar from '$lib/components/NavBar.svelte';
-	import '../../app.css';
-
-	afterNavigate(({}) => {
-		window.document.body.classList.remove('reader');
-	});
-</script>
-
-<NavBar />
-<div>
-	<slot />
-</div>
-
-<style>
-	div {
-		padding: 10px;
-	}
-</style>

src/routes/(app)/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import Catalog from '$lib/components/Catalog.svelte';
-</script>
-
-<Catalog />

src/routes/+layout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import NavBar from '$lib/components/NavBar.svelte';
+	import '../app.css';
+</script>
+
+<NavBar />
+
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		padding: 10px;
+	}
+</style>

src/routes/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import Button from '$lib/components/Button.svelte';
+	import Catalog from '$lib/components/Catalog.svelte';
+
+	function onClick() {
+		goto('/upload');
+	}
+</script>
+
+<Button on:click={onClick}>Upload</Button>
+<Catalog />

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

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { currentManga } from '$lib/catalog';
-	import NavBar from '$lib/components/NavBar.svelte';
-	import { onMount } from 'svelte';
-	import { afterNavigate, goto } from '$app/navigation';
-	import '../../app.css';
-
-	const manga = $currentManga;
-
-	onMount(() => {
-		if (!manga) {
-			goto('/');
-			window.document.body.classList.remove('reader');
-		} else {
-			window.document.body.classList.add('reader');
-		}
-	});
-</script>
-
-<NavBar title={manga?.title} />
-<slot />
-
-<style>
-	:global(body.reader) {
-		overflow: hidden;
-	}
-</style>

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

@@ -4,24 +4,30 @@
 	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;
+
+	onMount(() => {
+		if (!manga) {
+			goto('/');
+		}
+	});
 </script>
 
-{#if manga}
-	<div>
-		<Button on:click={zoomOriginal}>Reset Zoom</Button>
-	</div>
-	<Panzoom>
-		<img draggable="false" src={manga.cover} alt={manga.title} />
-	</Panzoom>
-{/if}
+<div>
+	{#if manga}
+		{#each manga.volumes as volume}
+			<VolumeItem {volume} />
+		{/each}
+	{/if}
+</div>
 
 <style>
 	div {
-		position: absolute;
-		bottom: 10px;
-		left: 10px;
-		z-index: 1;
+		display: flex;
+		flex-direction: row;
+		gap: 20px;
+		flex-wrap: wrap;
 	}
 </style>

src/routes/[manga]/[volume]/+layout.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { currentVolume } from '$lib/catalog';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+
+	const volume = $currentVolume;
+
+	onMount(() => {
+		if (!volume) {
+			goto('/');
+		} else {
+			console.log('???');
+
+			window.document.body.classList.add('reader');
+		}
+	});
+</script>
+
+<slot />
+
+<style>
+	:global(body.reader) {
+		overflow: hidden !important;
+	}
+</style>

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Reader from '$lib/components/Reader/Reader.svelte';
+</script>
+
+<Reader />

src/routes/upload/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import { unzipManga } from '$lib/upload';
+	import type { Entry } from '@zip.js/zip.js';
+
+	let promise: Promise<Entry[]> | undefined;
+
+	async function onUpload(files: FileList) {
+		const [file] = files;
+		promise = unzipManga(file);
+	}
+</script>
+
+<FileUpload {onUpload} accept=".mokuro,.zip,.cbz,.rar" />
+
+{#if promise}
+	{#await promise}
+		<p>Loading...</p>
+	{:then entries}
+		{#each entries as entry}
+			<p>{entry.filename}</p>
+		{/each}
+	{/await}
+{/if}