Add mock catalog

src/app.css

@@ -1,34 +1,39 @@
 :root {
 	--background-color: #1b1b20;
 	--font-family: Verdana, Geneva, Tahoma, sans-serif;
-
-	--primary-color: #2e3042;
-	--primary-accent-color: #263447;
-
-	--secondary-color: #dfdfe9;
-	--secondary-accent-color: #adadbb;
-
-	--danger-color: #be3329;
-	--danger-accent-color: #ddaeb2;
-	--danger-active-color: #b69092;
 }
 
  body {
 	background-color: var(--background-color);
-	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-family: var(--font-family);
 	color: white;
 	margin: 0;
 	padding: 0;
-	overflow: hidden;
 }
 
 button {
 	border: none;
 	background-color: transparent;
+	color: white;
 }
 
+button:hover {
+	cursor: pointer;
+}
 
+a {
+	text-decoration: inherit;
+    color: inherit;
+    cursor: auto;
+}
 
+a:visited {
+	text-decoration: inherit;
+	color: inherit;
+	cursor: auto;
+}
 
-
+a:hover {
+	cursor: pointer;
+}
 

src/lib/catalog/index.ts

@@ -0,0 +1,4 @@
+import type { Manga } from "$lib/types/catalog";
+import { writable } from "svelte/store";
+
+export const currentManga = writable<Manga | undefined>(undefined);

src/lib/components/Button.svelte

@@ -3,7 +3,7 @@
 
 	type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
 
-	export let variant: ButtonType;
+	export let variant: ButtonType = 'primary';
 
 	function getStyles(buttonType: ButtonType) {
 		switch (buttonType) {

src/lib/components/Catalog.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import image1 from '$lib/assets/1.jpg';
+	import image2 from '$lib/assets/2.jpg';
+	import image3 from '$lib/assets/3.jpg';
+	import image4 from '$lib/assets/4.jpg';
+	import image5 from '$lib/assets/5.jpg';
+	import type { Manga } from '$lib/types/catalog';
+	import CatalogItem from './CatalogItem.svelte';
+
+	const manga: Manga[] = [
+		{
+			title: 'Manga name',
+			cover: image1,
+			currentPage: 26,
+			totalPages: 100
+		},
+		{
+			title: 'Another',
+			cover: image2,
+			currentPage: 0,
+			totalPages: 120
+		},
+		{
+			title: 'Awooo',
+			cover: image3,
+			currentPage: 69,
+			totalPages: 96
+		},
+		{
+			title: 'Title',
+			cover: image4,
+			currentPage: 9,
+			totalPages: 59
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		},
+		{
+			title: 'sdhfjksdh',
+			cover: image5,
+			currentPage: 19,
+			totalPages: 200
+		}
+	];
+</script>
+
+<div>
+	{#each manga as item}
+		<CatalogItem manga={item} />
+	{/each}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: row;
+		gap: 20px;
+		flex-wrap: wrap;
+	}
+</style>

src/lib/components/CatalogItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { currentManga } from '$lib/catalog';
+	import type { Manga } from '$lib/types/catalog';
+	import Button from './Button.svelte';
+
+	export let manga: Manga;
+	const { cover, currentPage, title, totalPages } = manga;
+
+	function onClick() {
+		currentManga.set(manga);
+	}
+</script>
+
+<a href={title} on:click={onClick}>
+	<div class="content">
+		{title}
+		<img src={cover} alt={title} />
+		{currentPage} / {totalPages}
+	</div>
+</a>
+
+<style>
+	img {
+		width: 250px;
+		height: 350px;
+		object-fit: contain;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		text-align: center;
+	}
+</style>

src/lib/components/NavBar.svelte

@@ -1,43 +1,19 @@
 <script lang="ts">
 	import { colors } from '$lib/theme';
-	import Button from './Button.svelte';
 
-	let expanded = true;
-
-	function toggle() {
-		expanded = !expanded;
-	}
-	let color = colors.secondaryColor;
+	export let title: string | undefined = undefined;
 </script>
 
-{#if expanded}
-	<nav>
-		<div>
-			<h2>Mokuro</h2>
-			<Button variant="secondary" on:click={toggle}>Settings</Button>
+<nav>
+	<div style:background-color={colors.primaryColor}>
+		{#if title}
+			<a href="/"><h2>Back</h2></a>
+			<h2>{title}</h2>
+		{:else}
+			<a href="/"><h2>Mokuro</h2></a>
+		{/if}
 	</div>
-	</nav>
-{:else}
-	<button on:click={toggle} class="svg">
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke={color}
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line
-				x1="3"
-				y1="18"
-				x2="21"
-				y2="18"
-			/></svg
-		>
-	</button>
-{/if}
+</nav>
 
 <style>
 	nav {
@@ -49,24 +25,8 @@
 		display: flex;
 		flex: 1;
 		justify-content: space-between;
-		background-color: var(--primary-color);
 		padding: 0 10px 0 10px;
 		align-items: center;
 		z-index: 1;
 	}
-	.svg {
-		padding: 10px;
-		margin: 5px;
-		position: fixed;
-		border-radius: 2px;
-		z-index: 1;
-		right: 10px;
-	}
-
-	.svg:active {
-		background-color: var(--primary-accent-color);
-	}
-	svg {
-		z-index: 1;
-	}
 </style>

src/lib/panzoom/Panzoom.svelte

@@ -2,6 +2,8 @@
 	import { initPanzoom } from './util';
 </script>
 
-<div use:initPanzoom>
+<div>
+	<div use:initPanzoom>
 		<slot />
+	</div>
 </div>

src/lib/types/catalog.ts

@@ -0,0 +1,6 @@
+export type Manga = {
+  title: string;
+  cover: string;
+  currentPage: number;
+  totalPages: number;
+};

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>