Misc changes

src/lib/components/CatalogItem.svelte

@@ -10,25 +10,14 @@
 </script>
 
 <a href={volumeName} on:click={onClick}>
-	<div class="content">
+	<div class="flex flex-col gap-[5px] text-center">
 		{mokuroData.title}
 		{#if files}
-			<img src={URL.createObjectURL(Object.values(files)[0])} alt="img" />
+			<img
+				src={URL.createObjectURL(Object.values(files)[0])}
+				alt="img"
+				class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
+			/>
 		{/if}
 	</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/Reader/MangaPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { settingsStore } from '$lib/settings';
+	import { settings } from '$lib/settings';
 	import type { Page } from '$lib/types';
 	import { clamp } from '$lib/util';
 
@@ -7,7 +7,7 @@
 	export let left: () => void;
 	export let right: () => void;
 
-	$: fontWeight = $settingsStore.boldFont ? 'bold' : '400';
+	$: fontWeight = $settings.boldFont ? 'bold' : '400';
 
 	$: textBoxes = page.blocks.map((block) => {
 		const { img_height, img_width } = page;

src/lib/components/Settings.svelte

@@ -2,7 +2,7 @@
 	import { Drawer, CloseButton, Toggle, Select, Input, Label, Button } from 'flowbite-svelte';
 	import { UserSettingsSolid } from 'flowbite-svelte-icons';
 	import { sineIn } from 'svelte/easing';
-	import { resetSettings, settingsStore, updateSetting } from '$lib/settings';
+	import { resetSettings, settings, updateSetting } from '$lib/settings';
 	import { promptConfirmation } from '$lib/util';
 
 	let transitionParams = {
@@ -22,12 +22,12 @@
 	];
 
 	$: 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 },
-		{ key: 'boldFont', text: 'Bold font', value: $settingsStore.boldFont }
+		{ key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
+		{ key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
+		{ key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
+		{ key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
+		{ key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },
+		{ key: 'boldFont', text: 'Bold font', value: $settings.boldFont }
 	];
 
 	function onChange(event: Event) {
@@ -66,7 +66,7 @@
 		</div>
 		<div>
 			<Label>Background color:</Label>
-			<Input type="color" on:change={onChange} value={$settingsStore.backgroundColor} />
+			<Input type="color" on:change={onChange} value={$settings.backgroundColor} />
 		</div>
 		<Button outline on:click={onReset}>Reset</Button>
 	</div>

src/lib/settings/index.ts

@@ -26,10 +26,10 @@ const defaultSettings: Settings = {
 const stored = browser ? window.localStorage.getItem('settings') : undefined
 const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings
 
-export const settingsStore = writable<Settings>(initialSettings);
+export const settings = writable<Settings>(initialSettings);
 
 export function updateSetting(key: string, value: any) {
-  settingsStore.update((settings) => {
+  settings.update((settings) => {
     return {
       ...settings,
       [key]: value
@@ -38,10 +38,10 @@ export function updateSetting(key: string, value: any) {
 }
 
 export function resetSettings() {
-  settingsStore.set(defaultSettings);
+  settings.set(defaultSettings);
 }
 
-settingsStore.subscribe((settings) => {
+settings.subscribe((settings) => {
   if (browser) {
     window.localStorage.setItem('settings', JSON.stringify(settings))
   }

src/routes/+layout.svelte

@@ -3,10 +3,10 @@
 	import NavBar from '$lib/components/NavBar.svelte';
 	import Snackbar from '$lib/components/Snackbar.svelte';
 	import ConfirmationPopup from '$lib/components/ConfirmationPopup.svelte';
-	import { settingsStore } from '$lib/settings';
+	import { settings } from '$lib/settings';
 </script>
 
-<div class="h-screen text-white" style:background-color={$settingsStore.backgroundColor}>
+<div class="h-screen text-white" style:background-color={$settings.backgroundColor}>
 	<NavBar />
 	<Snackbar />
 	<ConfirmationPopup />