refactor(settings): component toggles

3 files changed, 68 insertions, 114 deletions

diff --git a/src/lib/SettingToggle.svelte b/src/lib/SettingToggle.svelte
new file mode 100644
index 00000000..fffb854f
--- /dev/null
+++ b/src/lib/SettingToggle.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import settings, { type Settings } from '../stores/settings';
+
+	export let setting: keyof Settings;
+	export let on = '';
+	export let off = '';
+	export let lineBreak = true;
+</script>
+
+<a
+	href={'#'}
+	on:click={() =>
+		$settings[setting] ? settings.setKey(setting, false) : settings.setKey(setting, true)}
+	>{$settings[setting] ? on : off} <slot /></a
+>
+
+{#if lineBreak}
+	<br />
+{/if}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 572db92f..b93414e6 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -5,6 +5,7 @@
 	import manga from '../../stores/manga';
 	import anime from '../../stores/anime';
 	import settings from '../../stores/settings';
+	import SettingToggle from '$lib/SettingToggle.svelte';
 
 	export let data;
 
@@ -34,125 +35,59 @@
 {:else}
 	<h2>Display</h2>
 
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.forceLightTheme
-				? settings.setKey('forceLightTheme', false)
-				: settings.setKey('forceLightTheme', true)}
-		>{$settings.forceLightTheme ? 'Use preferred theme' : 'Force light theme'}</a
-	>
-	<br />
-
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.linkToAniList
-				? settings.setKey('linkToAniList', false)
-				: settings.setKey('linkToAniList', true)}
-		>{$settings.linkToAniList ? 'Link anime to LiveChart.me' : 'Link anime to AniList'}</a
-	>
-	<br />
-
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.showCompletedAnime
-				? settings.setKey('showCompletedAnime', false)
-				: settings.setKey('showCompletedAnime', true)}
-		>{$settings.showCompletedAnime ? 'Hide' : 'Show'} completed anime</a
-	>
-	<br />
-
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.displayPausedMedia
-				? settings.setKey('displayPausedMedia', false)
-				: settings.setKey('displayPausedMedia', true)}
-		>{$settings.displayPausedMedia ? 'Hide' : 'Show'} paused media</a
-	>
-	<br />
+	<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={'showCompletedAnime'} on={'Hide'} off={'Show'}>
+		completed anime
+	</SettingToggle>
+	<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'}>
+		paused media
+	</SettingToggle>
 
 	<p />
 
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.displayUnresolved
-				? settings.setKey('displayUnresolved', false)
-				: settings.setKey('displayUnresolved', true)}
-		>{$settings.displayUnresolved ? 'Hide' : 'Show'} unresolved</a
-	>
-	<br />
+	<SettingToggle setting={'displayUnresolved'} on={'Hide'} off={'Show'}>unresolved</SettingToggle>
 	<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>
 
 	<p />
 
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.displayNotStarted
-				? settings.setKey('displayNotStarted', false)
-				: settings.setKey('displayNotStarted', true)}
-		>{$settings.displayNotStarted ? 'Hide' : 'Show'} media with zero progress</a
-	>
-	<br />
-	<small style="opacity: 50%;"
-		>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</small
-	>
+	<SettingToggle setting={'displayNotStarted'} on={'Hide'} off={'Show'}>
+		media with zero progress
+	</SettingToggle>
+	<small style="opacity: 50%;">
+		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
+	</small>
 
 	<p />
 
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.closeAnimeByDefault
-				? settings.setKey('closeAnimeByDefault', false)
-				: settings.setKey('closeAnimeByDefault', true)}
-		>{$settings.closeAnimeByDefault ? 'Expand' : 'Close'} anime panel by default</a
-	>
-
-	<br />
-
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.closeMangaByDefault
-				? settings.setKey('closeMangaByDefault', false)
-				: settings.setKey('closeMangaByDefault', true)}
-		>{$settings.closeMangaByDefault ? 'Expand' : 'Close'} manga panel by default</a
-	>
-
-	<br />
-
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.sortByDifference
-				? settings.setKey('sortByDifference', false)
-				: settings.setKey('sortByDifference', true)}
-		>Sort anime by {@html !$settings.sortByDifference
+	<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'}</a
-	>
+			: 'days left until next episode'}
+	</SettingToggle>
 
 	<h2>Calculation</h2>
 
-	<a
-		href={'#'}
-		on:click={() =>
-			$settings.roundDownChapters
-				? settings.setKey('roundDownChapters', false)
-				: settings.setKey('roundDownChapters', true)}
-		>{!$settings.roundDownChapters ? 'Round down' : 'Maintain'} chapters</a
-	>
-	<br />
-	<small style="opacity: 50%;"
-		>50/50.6 would {@html $settings.roundDownChapters ? '<b>not</b>' : ''} be due</small
-	>
+	<SettingToggle setting={'roundDownChapters'} on={'Maintain'} off={'Round down'}>
+		chapters
+	</SettingToggle>
+	<small style="opacity: 50%;">
+		50/50.6 would {@html $settings.roundDownChapters ? '<b>not</b>' : ''} be due
+	</small>
 
 	<h2>Cache</h2>
 
@@ -180,11 +115,11 @@
 	/>
 	minutes
 	<br />
-	<small style="opacity: 50%;"
-		>Low values 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</small
-	>
+	<small style="opacity: 50%;">
+		Low values 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
+	</small>
 
 	<h2>Reset</h2>
 
@@ -194,7 +129,7 @@
 
 	<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
 	<br />
-	<small style="opacity: 50%;"
-		>Doesn't break anything, but resets all settings and key caches. Recommended after updates</small
-	>
+	<small style="opacity: 50%;">
+		Doesn't break anything, but resets all settings and key caches. Recommended after updates
+	</small>
 {/if}
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index c32a2a2a..d0e83514 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
 import { writable } from 'svelte/store';
 
-interface Settings {
+export interface Settings {
 	cacheMangaMinutes: number;
 	cacheMinutes: number;
 	closeAnimeByDefault: boolean;