refactor(settings): modular categories

7 files changed, 328 insertions, 314 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 />
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}