Add mock catalog

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

@@ -0,0 +1,23 @@
+<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

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

src/routes/+layout.svelte

@@ -1,15 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import img from '$lib/assets/000a.jpg';
-	import Button from '$lib/components/Button.svelte';
-	import { pz, Panzoom } from '$lib/panzoom';
-
-	function test() {
-		$pz?.moveTo(0, 0);
-	}
-</script>
-
-<div>
-	<Button variant="primary" on:click={test}>Click</Button>
-
-	<Panzoom>
-		<p draggable="false">my selectable tex</p>
-		<img draggable="false" src={img} alt="a" />
-	</Panzoom>
-</div>

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<h1>{$page.status}: {$page.error?.message}</h1>

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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Panzoom from '$lib/panzoom/Panzoom.svelte';
+	import { currentManga } from '$lib/catalog';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	const manga = $currentManga;
+</script>
+
+{#if manga}
+	<Panzoom>
+		<img draggable="false" src={manga.cover} alt={manga.title} />
+	</Panzoom>
+{/if}
+
+<style>
+	h2 {
+		z-index: 1;
+		position: fixed;
+		left: 10px;
+	}
+</style>