Various fixes, some settings handling

src/lib/components/NavBar.svelte

@@ -33,7 +33,7 @@
 	</Navbar>
 	{#if isReader}
 		<UserSettingsSolid
-			class="hover:text-primary-700 absolute right-5 top-5 opacity-10 hover:opacity-100"
+			class="hover:text-primary-700 absolute right-5 top-5 opacity-50 hover:opacity-100"
 			on:click={() => (settingsHidden = false)}
 		/>
 	{/if}

src/lib/components/Reader/MangaPage.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
+	import { settingsStore } from '$lib/settings';
 	import type { Page } from '$lib/types';
+	import { clamp } from '$lib/util';
 
 	export let page: Page;
 	export let left: () => void;
 	export let right: () => void;
 
-	let bold = false;
+	$: fontWeight = $settingsStore.boldFont ? 'bold' : '400';
-
-	$: fontWeight = bold ? 'bold' : '400';
-
-	function clamp(x: number, min: number, max: number) {
-		return Math.min(Math.max(x, min), max);
-	}
 
 	$: textBoxes = page.blocks.map((block) => {
 		const { img_height, img_width } = page;
@@ -43,8 +39,12 @@
 	export let src: Blob;
 </script>
 
-<div>
+<div
-	<img draggable="false" src={URL.createObjectURL(src)} alt="img" />
+	draggable="false"
+	style:width={`${page.img_width}px`}
+	style:height={`${page.img_height}px`}
+	style:background-image={`url(${URL.createObjectURL(src)})`}
+>
 	{#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }}
 		<div
 			class="text-box"
@@ -54,6 +54,7 @@
 			style:top
 			style:font-size={fontSize}
 			style:writing-mode={writingMode}
+			style:font-weight={fontWeight}
 		>
 			{#each lines as line}
 				<p>{line}</p>

src/lib/components/Settings.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Drawer, CloseButton, Toggle, Select, Input, Label } from 'flowbite-svelte';
+	import { Drawer, CloseButton, Toggle, Select, Input, Label, Button } from 'flowbite-svelte';
 	import { UserSettingsSolid } from 'flowbite-svelte-icons';
 	import { sineIn } from 'svelte/easing';
-	import { settingsStore, updateSetting } from '$lib/settings';
+	import { resetSettings, settingsStore, updateSetting } from '$lib/settings';
 
 	let transitionParams = {
 		x: 320,
@@ -25,8 +25,13 @@
 		{ 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 }
+		{ key: 'displayOCR', text: 'OCR enabled', value: $settingsStore.displayOCR },
+		{ key: 'boldFont', text: 'Bold font', value: $settingsStore.boldFont }
 	];
+
+	function onChange(event: Event) {
+		updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
+	}
 </script>
 
 <Drawer
@@ -55,7 +60,8 @@
 		</div>
 		<div>
 			<Label>Background color:</Label>
-			<Input type="color" />
+			<Input type="color" on:change={onChange} value={$settingsStore.backgroundColor} />
 		</div>
+		<Button outline on:click={resetSettings}>Reset</Button>
 	</div>
 </Drawer>

src/lib/panzoom/Panzoom.svelte

@@ -2,15 +2,6 @@
 	import { initPanzoom } from './util';
 </script>
 
-<div>
+<div use:initPanzoom>
-	<div class="container" use:initPanzoom>
+	<slot />
-		<slot />
-	</div>
 </div>
-
-<style>
-	.container {
-		display: flex;
-		justify-content: center;
-	}
-</style>

src/lib/settings/index.ts

@@ -8,6 +8,8 @@ type Settings = {
   textEditable: boolean;
   textBoxBorders: boolean;
   displayOCR: boolean;
+  boldFont: boolean;
+  backgroundColor: string;
 };
 
 const defaultSettings: Settings = {
@@ -16,7 +18,9 @@ const defaultSettings: Settings = {
   singlePageView: false,
   displayOCR: true,
   textEditable: false,
-  textBoxBorders: false
+  textBoxBorders: false,
+  boldFont: false,
+  backgroundColor: '#0d0d0f'
 }
 
 const stored = browser ? window.localStorage.getItem('settings') : undefined
@@ -34,6 +38,8 @@ export function updateSetting(key: string, value: any) {
 }
 
 export function resetSettings() {
+  console.log('br', defaultSettings);
+
   settingsStore.set(defaultSettings);
 }
 

src/lib/util/index.ts

@@ -0,0 +1,3 @@
+export * from './snackbar'
+export * from './upload'
+export * from './misc'

src/lib/util/misc.ts

@@ -0,0 +1,3 @@
+export function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max);
+}

src/routes/+layout.svelte

@@ -11,9 +11,3 @@
 <div>
 	<slot />
 </div>
-
-<style>
-	div {
-		padding: 10px;
-	}
-</style>

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

@@ -1,3 +1,17 @@
+<script lang="ts">
+	import { currentVolume } from '$lib/catalog';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+
+	const volume = $currentVolume;
+
+	onMount(() => {
+		if (!volume) {
+			goto('/');
+		}
+	});
+</script>
+
 <slot />
 
 <style>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Reader from '$lib/components/Reader/Reader.svelte';
+	import { settingsStore } from '$lib/settings';
 </script>
 
-<Reader />
+<div style:background-color={$settingsStore.backgroundColor}><Reader /></div>