feat(settings): change to checkbox

1 files changed, 33 insertions, 57 deletions

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>