refactor(settings): group display section

1 files changed, 47 insertions, 38 deletions

diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 12b4549f..6b0ccc85 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -36,9 +36,10 @@
 	};
 </script>
 
-<SettingCheckboxToggle setting="displayPausedMedia" text="Show paused media" lineBreak={false} />
-<SettingCheckboxToggle setting="displayUnresolved" text="Show unresolved media" lineBreak={false} />
-<SettingCheckboxToggle setting="displayPlannedAnime" text="Show planned anime" lineBreak={false} />
+<b>Include additional media</b><br />
+<SettingCheckboxToggle setting="displayPausedMedia" text="Paused media" lineBreak={false} />
+<SettingCheckboxToggle setting="displayUnresolved" text="Unresolved media" lineBreak={false} />
+<SettingCheckboxToggle setting="displayPlannedAnime" text="Planned anime" lineBreak={false} />
 <SettingHint lineBreak>
 	Media where either the next episode's release date is unknown or the chapter count could not be
 	resolved is considered unresolved.
@@ -46,36 +47,35 @@
 
 <p />
 
-<SettingCheckboxToggle
-	setting="disableUpcomingAnime"
-	text="Hide upcoming anime panel"
-	lineBreak={false}
-/>
-<SettingCheckboxToggle setting="disableAnime" text="Hide anime panel" lineBreak={false} />
-<SettingCheckboxToggle setting="disableManga" text="Hide manga panel" />
+<b>Hide panels</b><br />
+<SettingCheckboxToggle setting="disableUpcomingAnime" text="Upcoming anime" lineBreak={false} />
+<SettingCheckboxToggle setting="disableAnime" text="Anime" lineBreak={false} />
+<SettingCheckboxToggle setting="disableManga" text="Manga" />
+
+<p />
+
+<b>Collapse panels by default</b><br />
 <SettingCheckboxToggle
 	setting="displayUpcomingAnimeCollapsed"
-	text="Collapse upcoming anime panel by default"
-	lineBreak={false}
-/>
-<SettingCheckboxToggle
-	setting="displayAnimeCollapsed"
-	text="Collapse anime panel by default"
+	text="Upcoming anime"
 	lineBreak={false}
 />
-<SettingCheckboxToggle setting="displayMangaCollapsed" text="Collapse manga panel by default" />
-<SettingCheckboxToggle setting="displayLimitListHeight" text="Limit panel area to screen height" />
+<SettingCheckboxToggle setting="displayAnimeCollapsed" text="Anime" lineBreak={false} />
+<SettingCheckboxToggle setting="displayMangaCollapsed" text="Manga" />
+
+<p />
+
+<b>Motion & Accessibility</b><br />
 <SettingCheckboxToggle
 	setting="displayDisableAnimations"
 	text="Disable page transition animations"
-	lineBreak={false}
 />
 <SettingCheckboxToggle setting="displayDisableNotifications" text="Disable notifications" />
-<SettingCheckboxToggle
-	setting="displayHoverCover"
-	text="Show media cover when hovering on supported media titles"
-/>
-<SettingCheckboxToggle setting="displaySocialButton" text="Show social button for anime" />
+<SettingCheckboxToggle setting="displayLimitListHeight" text="Limit panel area to screen height" />
+
+<p />
+
+<b>Date & Time</b><br />
 <SettingCheckboxToggle
 	setting="displayCountdownRightAligned"
 	text="Align anime episode countdown to the right"
@@ -88,6 +88,15 @@
 	setting="displayNativeCountdown"
 	text="Use native release date for episode countdown"
 />
+
+<p />
+
+<b>Media</b><br />
+<SettingCheckboxToggle
+	setting="displayHoverCover"
+	text="Show media cover when hovering on supported media titles"
+/>
+<SettingCheckboxToggle setting="displaySocialButton" text="Show social button for anime" />
 <select bind:value={$settings.displayTitleFormat}>
 	<option value="english">English</option>
 	<option value="romaji">Romaji</option>
@@ -100,6 +109,19 @@ Media title format
 	<br />
 {/if}
 
+<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>
+	If LiveChart.me or AnimeSchedule is chosen, manga links will default to AniList.
+</SettingHint><br />
+
 <!-- <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 when
@@ -113,7 +135,7 @@ Media title format
 	<SettingHint lineBreak>
 		May potentially cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
 			rate-limiting
-		</a> depending on the number of releasing manga on your lists
+		</a> if you have over ~80 unresolved manga on your lists
 	</SettingHint>
 </SettingCheckboxToggle>
 
@@ -138,16 +160,3 @@ Media title format
 </select>
 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>
-	If LiveChart.me or AnimeSchedule is chosen, manga links will default to AniList.
-</SettingHint>