refactor(settings): modular categories

6 files changed, 314 insertions, 41 deletions

diff --git a/src/lib/Settings/Attributions.svelte b/src/lib/Settings/Attributions.svelte
index cdb752cc..ac51cf2b 100644
--- a/src/lib/Settings/Attributions.svelte
+++ b/src/lib/Settings/Attributions.svelte
@@ -1,60 +1,56 @@
-<details open={false}>
-	<summary>Attributions</summary>
-
-	<ul>
-		<li>
-			<a href="https://anilist.co/" target="_blank">AniList</a>: all but primary chapter and volume
-			data, and character birthday data
-		</li>
-		<li><span id="mangadex">MangaDex</span>: <b>only</b> chapter and volume count data</li>
-		<!-- <li>
+<ul>
+	<li>
+		<a href="https://anilist.co/" target="_blank">AniList</a>: all but primary chapter and volume
+		data, and character birthday data
+	</li>
+	<li><span id="mangadex">MangaDex</span>: <b>only</b> chapter and volume count data</li>
+	<!-- <li>
 			<a href="https://www.animecharactersdatabase.com/index.php" target="_blank">
 				Anime Characters Database
 			</a>: primary character birthday data
 		</li> -->
-		<!-- <li>
+	<!-- <li>
 			<a href="https://www.anisearch.com/" target="_blank">aniSearch</a>: secondary character
 			birthday data
 		</li> -->
-		<!-- <li>
+	<!-- <li>
 			<a href="https://www.mangaupdates.com/" target="">Baka-Updates Magna</a>: manga release data
 		</li> -->
-		<!-- <li>
+	<!-- <li>
 			<a href="https://www.wlnupdates.com/">WLN Updates</a>: web & light novel release data
 		</li> -->
-		<!-- <li>
+	<!-- <li>
 			<a href="https://subsplease.org/">SubsPlease</a>: subtitle release data
 		</li> -->
-	</ul>
+</ul>
 
-	<p />
+<p />
 
-	<ol>
-		<li>
-			<a href="/">due.moe</a>
-			does not host or directly link to any less-than-legal anime or manga material and/or distribution
-			platforms.
-		</li>
-		<li>
-			<a href="/">due.moe</a>
-			is not affiliated with any of the above or below sites and services.
-		</li>
-		<li>
-			<p>
-				At the moment, <a href="/">due.moe</a> only ever contains outbound links to the following sites
-				and services:
-			</p>
+<ol>
+	<li>
+		<a href="/">due.moe</a>
+		does not host or directly link to any less-than-legal anime or manga material and/or distribution
+		platforms.
+	</li>
+	<li>
+		<a href="/">due.moe</a>
+		is not affiliated with any of the above or below sites and services.
+	</li>
+	<li>
+		<p>
+			At the moment, <a href="/">due.moe</a> only ever contains outbound links to the following sites
+			and services:
+		</p>
 
-			<ul>
-				<li><a href="https://anilist.co/">AniList.co</a></li>
-				<li><a href="https://myanimelist.net/">MyAnimeList</a> (optional)</li>
-				<li><a href="https://animeschedule.net/">AnimeSchedule.net</a> (optional)</li>
-				<li><a href="https://www.livechart.me/">LiveChart.me</a> (optional)</li>
-				<li><a href="https://www.wikipedia.org/">Wikipedia</a> (when rate-limited)</li>
-			</ul>
-		</li>
-	</ol>
-</details>
+		<ul>
+			<li><a href="https://anilist.co/">AniList.co</a></li>
+			<li><a href="https://myanimelist.net/">MyAnimeList</a> (optional)</li>
+			<li><a href="https://animeschedule.net/">AnimeSchedule.net</a> (optional)</li>
+			<li><a href="https://www.livechart.me/">LiveChart.me</a> (optional)</li>
+			<li><a href="https://www.wikipedia.org/">Wikipedia</a> (when rate-limited)</li>
+		</ul>
+	</li>
+</ol>
 
 <style>
 	#mangadex {
diff --git a/src/lib/Settings/Categories/Cache.svelte b/src/lib/Settings/Categories/Cache.svelte
new file mode 100644
index 00000000..46faa83b
--- /dev/null
+++ b/src/lib/Settings/Categories/Cache.svelte
@@ -0,0 +1,34 @@
+<script>
+	import settings from '../../../stores/settings';
+	import SettingHint from '../SettingHint.svelte';
+</script>
+
+<!-- <a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
+
+		<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>
+
+		<p /> -->
+
+<span>Re-cache <b>ALL</b> media lists every</span>
+<input type="number" bind:value={$settings.cacheMinutes} min="1" max="60" placeholder="30" />
+minutes
+
+<br />
+
+<span>Re-cache <b>ALL</b> manga chapter counts every</span>
+<input
+	type="number"
+	bind:value={$settings.cacheMangaMinutes}
+	min="5"
+	max="1440"
+	placeholder="120"
+/>
+minutes
+<SettingHint lineBreak>
+	Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
+		rate-limiting
+	</a> depending on the amount of releasing manga are on your lists
+</SettingHint>
diff --git a/src/lib/Settings/Categories/Calculation.svelte b/src/lib/Settings/Categories/Calculation.svelte
new file mode 100644
index 00000000..73522cf1
--- /dev/null
+++ b/src/lib/Settings/Categories/Calculation.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { pruneAllManga } from '$lib/Media/Manga/cache';
+	import settings from '../../../stores/settings';
+	import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
+	import SettingHint from '../SettingHint.svelte';
+</script>
+
+<SettingCheckboxToggle
+	setting="calculateChaptersRoundedDown"
+	text="Round down chapters (recommended)"
+>
+	<SettingHint lineBreak>
+		Round down to the nearest whole number. (e.g., 50/50.6 would <b>not</b> be due)
+	</SettingHint>
+</SettingCheckboxToggle>
+
+<br />
+
+<SettingCheckboxToggle
+	setting="calculateDisableOutOfDateVolumeWarning"
+	text="Disable out-of-date volume warning"
+>
+	<SettingHint lineBreak>
+		Keeping this enabled displays a warning message when there is a mismatch between chapter
+		progress and the number of volumes you have completed for a given title. (e.g. you are on Vol. 5
+		Ch. 50, but only have 3 volumes tracked when you should have 4)
+
+		<br />
+
+		Disabling this option speeds up refresh times for manga lists.
+	</SettingHint>
+</SettingCheckboxToggle>
+
+<br />
+
+<SettingCheckboxToggle
+	setting="calculateGuessingDisabled"
+	text="Disable informed chapter estimation"
+>
+	<SettingHint lineBreak>
+		Enabling this setting will disable light novel chapter counts and may cause inaccuracy in
+		unresolved manga and light novel chapter counts
+	</SettingHint>
+</SettingCheckboxToggle>
+
+{#if !$settings.calculateGuessingDisabled}
+	<br />
+
+	<select bind:value={$settings.calculateGuessMethod} on:change={pruneAllManga}>
+		<option value="mode">Mode (fast, moderate to low accuracy)</option>
+		<option value="median">Median (moderate speed, high accuracy, recommended)</option>
+		<option value="iqr_median">Interquartile Range with Median (slower, high accuracy)</option>
+		<option value="iqr_mode">Interquartile Range with Mode (slower, high accuracy)</option>
+	</select>
+	Informed chapter estimation method
+
+	<SettingHint lineBreak>
+		No chapter count estimation method will be 100% accurate. Since estimated media requires scores
+		derived from user submitted progress, high (or low) false-reports skew the data.
+	</SettingHint>
+{/if}
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
new file mode 100644
index 00000000..691302d8
--- /dev/null
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import settings from '../../../stores/settings';
+	import SettingHint from '../SettingHint.svelte';
+</script>
+
+<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>
+<SettingHint lineBreak>
+	Resets all settings present on this page to their default values
+</SettingHint>
+
+<p />
+
+<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
+<SettingHint lineBreak>
+	Doesn't break anything, but resets all settings and clears all cached media lists. Recommended
+	after updates
+</SettingHint>
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
new file mode 100644
index 00000000..200ca1b3
--- /dev/null
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import settings from '../../../stores/settings';
+	import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
+	import SettingHint from '../SettingHint.svelte';
+
+	const onHelperChange = () => {
+		const mai = document.getElementById('mai') as HTMLImageElement;
+
+		if (!mai) return;
+
+		mai.style.display = 'block';
+
+		switch ($settings.displayAoButa) {
+			case 'mai':
+				{
+					mai.src = '/aobuta/mai.png';
+				}
+				break;
+			case 'nodoka':
+				{
+					mai.src = '/aobuta/nodoka.webp';
+				}
+				break;
+			case 'kaede':
+				{
+					mai.src = '/aobuta/kaede.png';
+				}
+				break;
+			case 'none': {
+				{
+					mai.style.display = 'none';
+				}
+				break;
+			}
+		}
+	};
+</script>
+
+<SettingCheckboxToggle setting="displayPausedMedia" text="Display paused media" lineBreak={false} />
+<SettingCheckboxToggle
+	setting="displayUnresolved"
+	text="Display unresolved media"
+	lineBreak={false}
+/>
+<SettingCheckboxToggle
+	setting="displayPlannedAnime"
+	text="Display planned anime"
+	lineBreak={false}
+/>
+<SettingHint lineBreak>
+	Unresolved media is media where either the next episode's release date is unknown or the chapter
+	count could not be resolved
+</SettingHint>
+
+<p />
+
+<SettingCheckboxToggle
+	setting="disableUpcomingAnime"
+	text="Disable upcoming anime"
+	lineBreak={false}
+/>
+<SettingCheckboxToggle setting="disableAnime" text="Disable anime" lineBreak={false} />
+<SettingCheckboxToggle setting="disableManga" text="Disable manga" />
+<SettingCheckboxToggle
+	setting="displayUpcomingAnimeCollapsed"
+	text="Collapse upcoming anime panels by default"
+	lineBreak={false}
+/>
+<SettingCheckboxToggle
+	setting="displayAnimeCollapsed"
+	text="Collapse anime panels by default"
+	lineBreak={false}
+/>
+<SettingCheckboxToggle setting="displayMangaCollapsed" text="Collapse manga panel by default" />
+<SettingCheckboxToggle setting="displayLimitListHeight" text="Limit list area to screen" />
+<SettingCheckboxToggle setting="displayHoverCover" text="Display cover on hover for media lists" />
+<SettingCheckboxToggle setting="displaySocialButton" text="Display social button for anime" />
+<SettingCheckboxToggle
+	setting="displayCountdownRightAligned"
+	text="Display countdown right aligned"
+/>
+<SettingCheckboxToggle setting="display24HourTime" text="Display countdown in 24-hour format" />
+<SettingCheckboxToggle
+	setting="displayNativeCountdown"
+	text="Display countdown as native release"
+/>
+<select bind:value={$settings.displayTitleFormat}>
+	<option value="english">English</option>
+	<option value="romaji">Romaji</option>
+	<option value="native">Native</option>
+</select>
+Display titles in format
+{#if $settings.displayTitleFormat === 'native'}
+	<SettingCheckboxToggle setting="displayFurigana" text="Display furigana" />
+{:else}
+	<br />
+{/if}
+
+<SettingCheckboxToggle setting="displayHoverNavigation" text="Use hovering navigation bar">
+	<SettingHint lineBreak>
+		Minimises and moves navigation bar to the top-left corner of the screen, visible only on when
+		hovered over. This is intended for use on devices with a cursor.
+	</SettingHint>
+</SettingCheckboxToggle>
+
+<br />
+
+<SettingCheckboxToggle setting="displayNotStarted" text="Display 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="displaySortedByDifference"
+	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>
+
+<br />
+
+<select bind:value={$settings.displayAoButa} on:change={onHelperChange}>
+	<option value="mai">Mai</option>
+	<option value="nodoka">Nodoka</option>
+	<option value="kaede">Kaede</option>
+	<option value="none">None</option>
+</select>
+Display Helper
+<SettingHint lineBreak>Let them remind you. It's for your own benefit.</SettingHint>
+
+<p />
+
+<select bind:value={$settings.displayOutboundLinksTo}>
+	<option value="anilist">AniList</option>
+	<option value="livechartme">LiveChart.me</option>
+	<option value="animeschedule">AnimeSchedule</option>
+	<option value="myanimelist">MyAnimeList</option>
+</select>
+Outbound Links
+<SettingHint lineBreak>
+	This option is in full respect to anime outbound links. If LiveChart.me or AnimeSchedule is
+	chosen, manga links will default to AniList.
+</SettingHint>
diff --git a/src/lib/Settings/Category.svelte b/src/lib/Settings/Category.svelte
new file mode 100644
index 00000000..321aed88
--- /dev/null
+++ b/src/lib/Settings/Category.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let title: string = '';
+	export let id = title.toLowerCase();
+	export let open = true;
+</script>
+
+<details {open} {id}>
+	{#if title}
+		<summary>{title}</summary>
+	{/if}
+
+	<slot />
+</details>
+
+<p />