feat(settings): change to checkbox

3 files changed, 90 insertions, 58 deletions

diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
new file mode 100644
index 00000000..ab603278
--- /dev/null
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import settings, { type Settings } from '../../stores/settings';
+
+	type BooleanSettingsKeys<T> = {
+		[K in keyof T]: T[K] extends boolean ? K : never;
+	};
+	type SettingsBooleanKeys = BooleanSettingsKeys<Settings>;
+
+	export let sectionBreak = false;
+	export let disabled = false;
+	export let text: string;
+	export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
+
+	// const toggler = (key: keyof Settings) => [
+	// 	() =>
+	// 		settings.update((s) => {
+	// 			(s[key] as boolean) = true;
+
+	// 			$settings = s;
+
+	// 			return s;
+	// 		}),
+	// 	() =>
+	// 		settings.update((s) => {
+	// 			(s[key] as boolean) = false;
+
+	// 			$settings = s;
+
+	// 			return s;
+	// 		})
+	// ];
+
+	const check = (e: Event & { currentTarget: EventTarget & HTMLInputElement }): void => {
+		settings.setKey(setting, (e.target as HTMLInputElement).checked);
+	};
+</script>
+
+<input type="checkbox" on:change={check} bind:checked={$settings[setting]} />
+
+{#if disabled}
+	<strike>
+		{text}
+	</strike>
+	<slot />
+{:else}
+	{text}
+	<slot />
+{/if}
+
+<br />
+
+{#if sectionBreak}
+	<p />
+{/if}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index b0885436..ca27dfe9 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -5,7 +5,7 @@
 	import manga from '../../stores/manga';
 	import anime from '../../stores/anime';
 	import settings from '../../stores/settings';
-	import SettingToggle from '$lib/Settings/SettingToggle.svelte';
+	import SettingCheckboxToggle from '$lib/Settings/SettingCheckboxToggle.svelte';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import { pruneAllManga } from '$lib/Media/manga';
 
@@ -44,55 +44,32 @@
 	<details open>
 		<summary>Display</summary>
 
-		<SettingToggle setting={'forceLightTheme'} on={'Use preferred'} off={'Force light'}>
-			theme
-		</SettingToggle>
-		<SettingToggle
-			setting={'linkToAniList'}
-			on={'Link anime to LiveChart.me'}
-			off={'Link anime to AniList'}
-		/>
-		<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'}>
-			paused media
-		</SettingToggle>
-		<SettingToggle
-			setting={'limitListHeight'}
-			on={'Display full list area'}
-			off={'Limit list area to screen'}
-		/>
-		<SettingToggle setting={'displaySocialButton'} on={'Hide'} off={'Show'} sectionBreak>
-			social button
-		</SettingToggle>
-
-		<p />
-
-		<SettingToggle setting={'displayUnresolved'} on={'Hide'} off={'Show'}>unresolved</SettingToggle>
-		<SettingHint>Displays unresolved chapter counts as "?"</SettingHint>
-
-		<p />
-
-		<SettingToggle setting={'displayNotStarted'} on={'Hide'} off={'Show'}>
-			media with zero progress
-		</SettingToggle>
-		<SettingHint>
-			May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
-				rate-limiting
-			</a> depending on how much releasing manga are on your lists
-		</SettingHint>
-
-		<p />
-
-		<SettingToggle setting={'closeAnimeByDefault'} on={'Expand'} off={'Close'}>
-			anime panel by default
-		</SettingToggle>
-		<SettingToggle setting={'closeMangaByDefault'} on={'Expand'} off={'Close'}>
-			manga panel by default
-		</SettingToggle>
-		<SettingToggle setting={'sortByDifference'}>
-			Sort anime by {@html !$settings.sortByDifference
-				? 'difference between last watched and next episode'
-				: 'days left until next episode'}
-		</SettingToggle>
+		<SettingCheckboxToggle setting="forceLightTheme" text="Force light theme" />
+		<SettingCheckboxToggle setting="linkToAniList" text="Link anime to LiveChart.me" />
+		<SettingCheckboxToggle setting="displayPausedMedia" text="Show paused media" />
+		<SettingCheckboxToggle setting="limitListHeight" text="Limit list area to screen" />
+		<SettingCheckboxToggle setting="displaySocialButton" text="Show social button" />
+		<SettingCheckboxToggle setting="displayUnresolved" text="Display unresolved media" />
+		<SettingCheckboxToggle setting="displayNotStarted" text="Show media with zero progress">
+			<SettingHint lineBreak>
+				May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
+					rate-limiting
+				</a> depending on how much releasing manga are on your lists
+			</SettingHint>
+		</SettingCheckboxToggle>
+
+		<br />
+
+		<SettingCheckboxToggle setting="closeAnimeByDefault" text="Close anime panel by default" />
+		<SettingCheckboxToggle setting="closeMangaByDefault" text="Close manga panel by default" />
+		<SettingCheckboxToggle
+			setting="sortByDifference"
+			text="Sort anime by difference between last watched and next episode"
+		>
+			<SettingHint lineBreak>
+				By default, anime will be sorted by the number of days left until the next episode airs.
+			</SettingHint>
+		</SettingCheckboxToggle>
 	</details>
 
 	<p />
@@ -100,12 +77,11 @@
 	<details open>
 		<summary>Calculation</summary>
 
-		<SettingToggle setting={'roundDownChapters'} on={'Maintain'} off={'Round down'}>
-			chapters
-		</SettingToggle>
-		<SettingHint>
-			50/50.6 would {@html $settings.roundDownChapters ? '' : '<b>not</b>'} be due
-		</SettingHint>
+		<SettingCheckboxToggle setting="roundDownChapters" text="Round down chapters">
+			<SettingHint lineBreak>
+				Round down to the nearest whole number. 50/50.6 would <b>not</b> be due
+			</SettingHint>
+		</SettingCheckboxToggle>
 	</details>
 
 	<p />
@@ -115,7 +91,7 @@
 
 		<a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
 
-		<p />
+		<br />
 
 		<a href={'#'} on:click={pruneAllManga}>Re-cache <b>ALL</b> manga</a>
 		<SettingHint lineBreak>Force a re-cache of all cached manga chapter counts</SettingHint>
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 0c9742ee..6863ae99 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -15,6 +15,7 @@ export interface Settings {
 	displayPausedMedia: boolean;
 	limitListHeight: boolean;
 	displaySocialButton: boolean;
+	disableGuessing: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -30,7 +31,8 @@ const defaultSettings: Settings = {
 	linkToAniList: true,
 	displayPausedMedia: true,
 	limitListHeight: false,
-	displaySocialButton: false
+	displaySocialButton: false,
+	disableGuessing: false
 };
 
 const createStore = () => {