refactor(settings): modular categories

4 files changed, 262 insertions, 0 deletions

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>