refactor(settings): modular categories

1 files changed, 14 insertions, 273 deletions

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 3281d7d3..196e3839 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
 	/* eslint svelte/no-at-html-tags: "off" */
 
-	import settings from '../../stores/settings';
-	import SettingCheckboxToggle from '$lib/Settings/SettingCheckboxToggle.svelte';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
-	import { pruneAllManga } from '$lib/Media/Manga/cache';
 	import Attributions from '$lib/Settings/Attributions.svelte';
 	import { env } from '$env/dynamic/public';
 	import HeadTitle from '$lib/HeadTitle.svelte';
+	import Display from '$lib/Settings/Categories/Display.svelte';
+	import Calculation from '$lib/Settings/Categories/Calculation.svelte';
+	import Debug from '$lib/Settings/Categories/Debug.svelte';
+	import Cache from '$lib/Settings/Categories/Cache.svelte';
+	import Category from '$lib/Settings/Category.svelte';
 
 	export let data;
 
@@ -19,38 +21,6 @@
 	// 	anime.set('');
 	// 	await chapterDatabase.chapters.bulkDelete(ids);
 	// };
-
-	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>
 
 <HeadTitle route="Settings" path="/settings" />
@@ -63,9 +33,7 @@
 {#if data.user === undefined}
 	Please log in to modify settings.
 {:else}
-	<details open id="feeds">
-		<summary>RSS Feeds</summary>
-
+	<Category title="RSS Feeds" id="feeds">
 		<a
 			href={'#'}
 			on:click={() =>
@@ -80,241 +48,14 @@
 			Click to copy AniList notifications RSS feed URL and token
 		</a>
 		<SettingHint lineBreak>Do not share this link with <b>anyone</b>!</SettingHint>
-	</details>
-
-	<p />
-
-	<details open id="display">
-		<summary>Display</summary>
-
-		<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" />
-		<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
-		<br />
-		{#if $settings.displayTitleFormat}
-			<SettingCheckboxToggle setting="displayFurigana" text="Display furigana for titles" />
-		{/if}
-
-		<SettingCheckboxToggle setting="displayHoverNavigation" text="Display navigation as hover bar">
-			<SettingHint lineBreak>
-				Minimises and moves navigation to the top-left corner of the screen, visible only on hover.
-				Intended for use on desktop devices.
-			</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>
-	</details>
-
-	<p />
-
-	<details open id="calculation">
-		<summary>Calculation</summary>
-
-		<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}
-	</details>
-
-	<p />
-
-	<details open id="cache">
-		<summary>Cache</summary>
-
-		<!-- <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>
-	</details>
-
-	<p />
-
-	<details open id="debug">
+	</Category>
+	<Category title="Display"><Display /></Category>
+	<Category title="Calculation"><Calculation /></Category>
+	<Category title="Cache"><Cache /></Category>
+	<Category id="debug">
 		<summary>Debug <small style="opacity: 50%;">{env.PUBLIC_GIT_SHORT_SHA}</small></summary>
 
-		<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>
-	</details>
-
-	<p />
-
-	<div id="attributions">
-		<Attributions />
-	</div>
+		<Debug />
+	</Category>
+	<Category title="Attributions" open={false}><Attributions /></Category>
 {/if}