Start implementing settings

src/app.scss

@@ -9,7 +9,6 @@ body {
 }
 
 button {
-	border: none;
 	font-family: $font-family;
 	background-color: transparent;
 	color: white;

src/lib/assets/svgs/settings-svgrepo-com.svg

@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

src/lib/components/NavBar.svelte

@@ -23,6 +23,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { sineIn } from 'svelte/easing';
+	import { settingsStore, updateSetting } from '$lib/settings';
 
 	let transitionParams = {
 		x: 320,
@@ -32,7 +33,7 @@
 
 	let promise: Promise<void>;
 	let modal = false;
-	let drawer = true;
+	let drawer = false;
 	let isReader = true;
 
 	async function onUpload(files: FileList) {
@@ -52,6 +53,14 @@
 		{ value: 'ca', name: 'Canada' },
 		{ value: 'fr', name: 'France' }
 	];
+
+	$: toggles = [
+		{ key: 'rightToLeft', text: 'Right to left', value: $settingsStore.rightToLeft },
+		{ key: 'singlePageView', text: 'Single page view', value: $settingsStore.singlePageView },
+		{ key: 'textEditable', text: 'Editable text', value: $settingsStore.textEditable },
+		{ key: 'textBoxBorders', text: 'Text box borders', value: $settingsStore.textBoxBorders },
+		{ key: 'displayOCR', text: 'OCR enabled', value: $settingsStore.displayOCR }
+	];
 </script>
 
 <div class="relative z-10">
@@ -87,13 +96,11 @@
 		<CloseButton on:click={() => (drawer = true)} class="mb-4 dark:text-white" />
 	</div>
 	<div class="flex flex-col gap-5">
-		<Toggle size="small">Right to left</Toggle>
+		{#each toggles as { key, text, value }}
-		<Toggle size="small">Display two pages</Toggle>
+			<Toggle size="small" checked={value} on:change={() => updateSetting(key, !value)}
-		<Toggle size="small">First page is cover</Toggle>
+				>{text}</Toggle
-		<Toggle size="small">OCR enabled</Toggle>
+			>
-		<Toggle size="small">Display box outlines</Toggle>
+		{/each}
-		<Toggle size="small">Editable text</Toggle>
-		<Toggle size="small">Toggle boxes on click</Toggle>
 		<div>
 			<Label>Fontsize:</Label>
 			<Select items={countries} bind:value={selected} />

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;