feat(stores): settings store for all settings

11 files changed, 108 insertions, 144 deletions

diff --git a/src/lib/List/Due/AnimeList.svelte b/src/lib/List/Due/AnimeList.svelte
index 9f38090b..0cfd5994 100644
--- a/src/lib/List/Due/AnimeList.svelte
+++ b/src/lib/List/Due/AnimeList.svelte
@@ -6,9 +6,8 @@
 	import { onDestroy, onMount } from 'svelte';
 	import anime from '../../../stores/anime';
 	import animeLastPrune from '../../../stores/mangaLastPrune';
-	import sortByDifference from '../../../stores/sortByDifference';
-	import displayNotStarted from '../../../stores/displayNotStarted';
 	import cacheMinutes from '../../../stores/cacheMinutes';
+	import settings from '../../../stores/settings';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -43,7 +42,7 @@
 			(media: Media) =>
 				media.status == 'RELEASING' &&
 				(media.mediaListEntry || { progress: 0 }).progress >=
-					($displayNotStarted === 'true' ? 0 : 1)
+					($settings.displayNotStarted === true ? 0 : 1)
 		);
 		const outdatedMedia = releasingMedia.filter((media: Media) => {
 			return (
@@ -64,7 +63,7 @@
 		}
 
 		finalMedia.sort((a: Media, b: Media) => {
-			if ($sortByDifference === 'true') {
+			if ($settings.sortByDifference === true) {
 				const difference = (anime: Media) => {
 					return (
 						(anime.nextAiringEpisode?.episode === -1
diff --git a/src/lib/List/Due/MangaList.svelte b/src/lib/List/Due/MangaList.svelte
index a7f8d208..43976e0d 100644
--- a/src/lib/List/Due/MangaList.svelte
+++ b/src/lib/List/Due/MangaList.svelte
@@ -7,10 +7,9 @@
 	import manga from '../../../stores/manga';
 	import { chapterDatabase } from '$lib/chapterDatabase';
 	import cacheMangaMinutes from '../../../stores/cacheMangaMinutes';
-	import roundDownChapters from '../../../stores/roundDownChapters';
 	import mangaLastPrune from '../../../stores/mangaLastPrune';
-	import displayNotStarted from '../../../stores/displayNotStarted';
 	import cacheMinutes from '../../../stores/cacheMinutes';
+	import settings from '../../../stores/settings';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -64,7 +63,7 @@
 				media.status == 'RELEASING' &&
 				media.format != 'NOVEL' &&
 				(media.mediaListEntry || { progress: 0 }).progress >=
-					($displayNotStarted === 'true' ? 0 : 1)
+					($settings.displayNotStarted === true ? 0 : 1)
 		);
 		let finalMedia = releasingMedia;
 
@@ -95,7 +94,7 @@
 				(item.episodes === -1337 && displayUnresolved
 					? true
 					: (item.mediaListEntry?.progress || 0) <
-					  ($roundDownChapters === 'true' ? Math.floor(item.episodes) : item.episodes))
+					  ($settings.roundDownChapters === true ? Math.floor(item.episodes) : item.episodes))
 			);
 		});
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cfcf016a..1e49411e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,18 +3,12 @@
 	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
 	import AnimeList from '$lib/List/Due/AnimeList.svelte';
 	import MangaList from '$lib/List/Due/MangaList.svelte';
-	import displayUnresolved from '../stores/displayUnresolved';
-	import closeAnimeByDefault from '../stores/closeAnimeByDefault';
-	import closeMangaByDefault from '../stores/closeMangaByDefault';
 	import UpcomingAnimeList from '$lib/List/UpcomingAnimeList.svelte';
 	import userIdentity from '../stores/userIdentity';
+	import settings from '../stores/settings';
 
 	export let data;
 
-	$: displayingUnresolved = $displayUnresolved === 'true';
-	$: mangaClosed = $closeMangaByDefault === 'false';
-	$: animeClosed = $closeAnimeByDefault === 'false';
-
 	let currentUserIdentity = { name: '', id: -1 };
 
 	onMount(async () => {
@@ -39,12 +33,12 @@
 	{:else}
 		<p />
 
-		<details open={animeClosed} class="list">
+		<details open={!$settings.closeAnimeByDefault} class="list">
 			{#if currentUserIdentity.id != -1}
 				<UpcomingAnimeList
 					user={data.user}
 					identity={currentUserIdentity}
-					displayUnresolved={displayingUnresolved}
+					displayUnresolved={$settings.displayUnresolved}
 				/>
 			{:else}
 				<summary>Upcoming Episodes [...] <small style="opacity: 50%">...s</small></summary>
@@ -54,12 +48,12 @@
 
 		<p />
 
-		<details open={animeClosed} class="list">
+		<details open={!$settings.closeAnimeByDefault} class="list">
 			{#if currentUserIdentity.id != -1}
 				<AnimeList
 					user={data.user}
 					identity={currentUserIdentity}
-					displayUnresolved={displayingUnresolved}
+					displayUnresolved={$settings.displayUnresolved}
 				/>
 			{:else}
 				<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>
@@ -69,12 +63,12 @@
 
 		<p />
 
-		<details open={mangaClosed} class="list">
+		<details open={!$settings.closeMangaByDefault} class="list">
 			{#if currentUserIdentity.id != -1}
 				<MangaList
 					user={data.user}
 					identity={currentUserIdentity}
-					displayUnresolved={displayingUnresolved}
+					displayUnresolved={$settings.displayUnresolved}
 				/>
 			{:else}
 				<summary>Manga [...] <small style="opacity: 50%">...s</small></summary>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index f1ea627f..c2af5e5e 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,17 +1,12 @@
 <script lang="ts">
 	/* eslint svelte/no-at-html-tags: "off" */
 
-	import displayUnresolved from '../../stores/displayUnresolved';
-	import closeAnimeByDefault from '../../stores/closeAnimeByDefault';
-	import closeMangaByDefault from '../../stores/closeMangaByDefault';
 	import { chapterDatabase } from '$lib/chapterDatabase';
 	import cacheMangaMinutes from '../../stores/cacheMangaMinutes';
 	import cacheMinutes from '../../stores/cacheMinutes';
-	import roundDownChapters from '../../stores/roundDownChapters';
-	import sortByDifference from '../../stores/sortByDifference';
-	import displayNotStarted from '../../stores/displayNotStarted';
 	import manga from '../../stores/manga';
 	import anime from '../../stores/anime';
+	import settings from '../../stores/settings';
 
 	export let data;
 
@@ -30,15 +25,6 @@
 		manga.set('');
 		await chapterDatabase.chapters.bulkDelete(ids);
 	};
-	const resetSettings = () => {
-		displayUnresolved.set('false');
-		roundDownChapters.set('true');
-		closeAnimeByDefault.set('false');
-		closeMangaByDefault.set('false');
-		sortByDifference.set('true');
-		cacheMinutes.set('30');
-		cacheMangaMinutes.set('60');
-	};
 </script>
 
 <a href="/">Home</a>
@@ -53,10 +39,10 @@
 	<a
 		href={'#'}
 		on:click={() =>
-			$displayUnresolved === 'true'
-				? displayUnresolved.set('false')
-				: displayUnresolved.set('true')}
-		>{$displayUnresolved === 'true' ? 'Hide' : 'Show'} unresolved</a
+			$settings.displayUnresolved === true
+				? settings.setKey('displayUnresolved', false)
+				: settings.setKey('displayUnresolved', true)}
+		>{$settings.displayUnresolved === true ? 'Hide' : 'Show'} unresolved</a
 	>
 	<br />
 	<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>
@@ -66,10 +52,10 @@
 	<a
 		href={'#'}
 		on:click={() =>
-			$displayNotStarted === 'true'
-				? displayNotStarted.set('false')
-				: displayNotStarted.set('true')}
-		>{$displayNotStarted === 'true' ? 'Hide' : 'Show'} media with zero progress</a
+			$settings.displayNotStarted === true
+				? settings.setKey('displayNotStarted', false)
+				: settings.setKey('displayNotStarted', true)}
+		>{$settings.displayNotStarted === true ? 'Hide' : 'Show'} media with zero progress</a
 	>
 	<br />
 	<small style="opacity: 50%;"
@@ -82,10 +68,10 @@
 	<a
 		href={'#'}
 		on:click={() =>
-			$closeAnimeByDefault === 'true'
-				? closeAnimeByDefault.set('false')
-				: closeAnimeByDefault.set('true')}
-		>{$closeAnimeByDefault === 'true' ? 'Expand' : 'Close'} anime panel by default</a
+			$settings.closeAnimeByDefault === true
+				? settings.setKey('closeAnimeByDefault', false)
+				: settings.setKey('closeAnimeByDefault', true)}
+		>{$settings.closeAnimeByDefault === true ? 'Expand' : 'Close'} anime panel by default</a
 	>
 
 	<br />
@@ -93,10 +79,10 @@
 	<a
 		href={'#'}
 		on:click={() =>
-			$closeMangaByDefault === 'true'
-				? closeMangaByDefault.set('false')
-				: closeMangaByDefault.set('true')}
-		>{$closeMangaByDefault === 'true' ? 'Expand' : 'Close'} manga panel by default</a
+			$settings.closeMangaByDefault === true
+				? settings.setKey('closeMangaByDefault', false)
+				: settings.setKey('closeMangaByDefault', true)}
+		>{$settings.closeMangaByDefault === true ? 'Expand' : 'Close'} manga panel by default</a
 	>
 
 	<br />
@@ -104,8 +90,10 @@
 	<a
 		href={'#'}
 		on:click={() =>
-			$sortByDifference === 'true' ? sortByDifference.set('false') : sortByDifference.set('true')}
-		>Sort anime by {@html $sortByDifference === 'false'
+			$settings.sortByDifference === true
+				? settings.setKey('sortByDifference', false)
+				: settings.setKey('sortByDifference', true)}
+		>Sort anime by {@html $settings.sortByDifference === false
 			? 'difference between last watched and next episode'
 			: 'days left until next episode'}</a
 	>
@@ -115,14 +103,14 @@
 	<a
 		href={'#'}
 		on:click={() =>
-			$roundDownChapters === 'true'
-				? roundDownChapters.set('false')
-				: roundDownChapters.set('true')}
-		>{$roundDownChapters === 'false' ? 'Round down' : 'Maintain'} chapters</a
+			$settings.roundDownChapters === true
+				? settings.setKey('roundDownChapters', false)
+				: settings.setKey('roundDownChapters', true)}
+		>{$settings.roundDownChapters === false ? 'Round down' : 'Maintain'} chapters</a
 	>
 	<br />
 	<small style="opacity: 50%;"
-		>50/50.6 would {@html $roundDownChapters === 'true' ? '<b>not</b>' : ''} be due</small
+		>50/50.6 would {@html $settings.roundDownChapters === true ? '<b>not</b>' : ''} be due</small
 	>
 
 	<h2>Cache</h2>
@@ -151,7 +139,7 @@
 
 	<h2>Reset</h2>
 
-	<a href={'#'} on:click={resetSettings}>Reset <b>ALL</b> settings</a>
+	<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>
 
 	<p />
 
diff --git a/src/stores/closeAnimeByDefault.ts b/src/stores/closeAnimeByDefault.ts
deleted file mode 100644
index 481fabfd..00000000
--- a/src/stores/closeAnimeByDefault.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const closeAnimeByDefault = writable<string>(
-	browser ? localStorage.getItem('closeAnimeByDefault') ?? 'false' : 'false'
-);
-
-closeAnimeByDefault.subscribe((value) => {
-	if (browser) {
-		localStorage.setItem('closeAnimeByDefault', value);
-	}
-});
-
-export default closeAnimeByDefault;
diff --git a/src/stores/closeMangaByDefault.ts b/src/stores/closeMangaByDefault.ts
deleted file mode 100644
index b0b27537..00000000
--- a/src/stores/closeMangaByDefault.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const closeMangaByDefault = writable<string>(
-	browser ? localStorage.getItem('closeMangaByDefault') ?? 'false' : 'false'
-);
-
-closeMangaByDefault.subscribe((value) => {
-	if (browser) {
-		localStorage.setItem('closeMangaByDefault', value);
-	}
-});
-
-export default closeMangaByDefault;
diff --git a/src/stores/displayNotStarted.ts b/src/stores/displayNotStarted.ts
deleted file mode 100644
index f8c1c42a..00000000
--- a/src/stores/displayNotStarted.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const displayNotStarted = writable<string>(
-	browser ? localStorage.getItem('displayNotStarted') ?? 'false' : 'false'
-);
-
-displayNotStarted.subscribe((value) => {
-	if (browser) {
-		localStorage.setItem('displayNotStarted', value);
-	}
-});
-
-export default displayNotStarted;
diff --git a/src/stores/displayUnresolved.ts b/src/stores/displayUnresolved.ts
deleted file mode 100644
index 9b67925f..00000000
--- a/src/stores/displayUnresolved.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const displayUnresolved = writable<string>(
-	browser ? localStorage.getItem('displayUnresolved') ?? 'false' : 'false'
-);
-
-displayUnresolved.subscribe((value) => {
-	if (browser) {
-		localStorage.setItem('displayUnresolved', value);
-	}
-});
-
-export default displayUnresolved;
diff --git a/src/stores/roundDownChapters.ts b/src/stores/roundDownChapters.ts
deleted file mode 100644
index 8cbdbdc1..00000000
--- a/src/stores/roundDownChapters.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const roundDownChapters = writable<string>(
-	browser ? localStorage.getItem('roundDownChapters') ?? 'true' : 'true'
-);
-
-roundDownChapters.subscribe((value) => {
-	if (browser) {
-		localStorage.setItem('roundDownChapters', value);
-	}
-});
-
-export default roundDownChapters;
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
new file mode 100644
index 00000000..30f1c34d
--- /dev/null
+++ b/src/stores/settings.ts
@@ -0,0 +1,68 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+interface Settings {
+	// cacheMangaMinutes: number;
+	// cacheMinutes: number;
+	closeAnimeByDefault: boolean;
+	closeMangaByDefault: boolean;
+	displayNotStarted: boolean;
+	displayUnresolved: boolean;
+	roundDownChapters: boolean;
+	sortByDifference: boolean;
+}
+
+const defaultSettings: Settings = {
+	// cacheMangaMinutes: 60,
+	// cacheMinutes: 30,
+	closeAnimeByDefault: false,
+	closeMangaByDefault: false,
+	displayNotStarted: false,
+	displayUnresolved: false,
+	roundDownChapters: true,
+	sortByDifference: false
+};
+
+const createStore = () => {
+	const { subscribe, set, update } = writable<Settings>(defaultSettings);
+
+	return {
+		subscribe,
+		set,
+		update,
+		reset: () => set(defaultSettings),
+		get: () => {
+			const settings = JSON.parse(
+				browser
+					? localStorage.getItem('settings') ?? JSON.stringify(defaultSettings)
+					: JSON.stringify(defaultSettings)
+			);
+			const keys = Object.keys(defaultSettings);
+			const settingsKeys = Object.keys(settings);
+
+			if (keys.length !== settingsKeys.length) {
+				return defaultSettings;
+			}
+
+			for (const key of keys) {
+				if (!settingsKeys.includes(key)) {
+					return defaultSettings;
+				}
+			}
+
+			return settings;
+		},
+		setKey: (key: keyof Settings, value: any) =>
+			update((settings) => ({ ...settings, [key]: value }))
+	};
+};
+
+const settings = createStore();
+
+settings.subscribe((value) => {
+	if (browser) {
+		localStorage.setItem('settings', JSON.stringify(value));
+	}
+});
+
+export default settings;
diff --git a/src/stores/sortByDifference.ts b/src/stores/sortByDifference.ts
deleted file mode 100644
index 1a26371e..00000000
--- a/src/stores/sortByDifference.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const sortByDifference = writable<string>(
-	browser ? localStorage.getItem('sortByDifference') ?? 'true' : 'true'
-);
-
-sortByDifference.subscribe((value) => {
-	if (browser) {
-		localStorage.setItem('sortByDifference', value);
-	}
-});
-
-export default sortByDifference;