feat(Completed): allow hiding panels

6 files changed, 57 insertions, 22 deletions

diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 6a6b1550..68b3ad6c 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -98,7 +98,8 @@ const English: Locale = {
 						none: 'None'
 					},
 					hint: "Let them remind you. It's for your own benefit."
-				}
+				},
+				filtersIncludeCompleted: 'Affect Completed'
 			},
 			tooltips: {
 				beta: 'Beta'
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 9847c891..ee823381 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -99,7 +99,8 @@ const Japanese: Locale = {
 						none: 'なし'
 					},
 					hint: '自分のためになる。'
-				}
+				},
+				filtersIncludeCompleted: '「完成メディア」にフィルタを適用'
 			},
 			tooltips: {
 				beta: 'ベータ'
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index b26c1ed8..59aec787 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -101,6 +101,7 @@ export interface Locale {
 					};
 					hint: LocaleValue;
 				};
+				filtersIncludeCompleted: LocaleValue;
 			};
 			tooltips: {
 				beta: LocaleValue;
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index cdcc90a1..64677ab9 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -123,6 +123,13 @@
 	lineBreak={false}
 	onChange={() => {
 		if ($settings.disableUpcomingAnime && $settings.disableManga) $settings.disableAnime = false;
+
+		if (
+			$settings.disableAnime &&
+			$settings.disableManga &&
+			$settings.displayFiltersIncludeCompleted
+		)
+			$settings.displayFiltersIncludeCompleted = false;
 	}}
 />
 <SettingCheckboxToggle
@@ -130,6 +137,25 @@
 	text={$locale().settings.media.manga}
 	onChange={() => {
 		if ($settings.disableAnime && $settings.disableUpcomingAnime) $settings.disableManga = false;
+
+		if (
+			$settings.disableAnime &&
+			$settings.disableManga &&
+			$settings.displayFiltersIncludeCompleted
+		)
+			$settings.displayFiltersIncludeCompleted = false;
+	}}
+/>
+<SettingCheckboxToggle
+	setting="displayFiltersIncludeCompleted"
+	text={$locale().settings.display.categories.filtersIncludeCompleted}
+	onChange={() => {
+		if (
+			$settings.displayFiltersIncludeCompleted &&
+			$settings.disableAnime &&
+			$settings.disableManga
+		)
+			$settings.disableAnime = false;
 	}}
 />
 
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index d3ae7407..8a5724fd 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -33,29 +33,33 @@
 	<Landing />
 {:else}
 	<div class="list-container">
-		<details open={!$settings.displayAnimeCollapsed} class="list">
-			{#if $userIdentity.id !== -2}
-				<WatchingAnimeList user={data.user} />
-			{:else}
-				<ListTitle title={$locale().lists.completed.anime} />
+		{#if !$settings.displayFiltersIncludeCompleted || !$settings.disableAnime}
+			<details open={!$settings.displayAnimeCollapsed} class="list">
+				{#if $userIdentity.id !== -2}
+					<WatchingAnimeList user={data.user} />
+				{:else}
+					<ListTitle title={$locale().lists.completed.anime} />
 
-				<Skeleton card={false} count={5} height="0.9rem" list />
-			{/if}
-		</details>
+					<Skeleton card={false} count={5} height="0.9rem" list />
+				{/if}
+			</details>
+		{/if}
 
-		<details open={!$settings.displayMangaCollapsed} class="list">
-			{#if $userIdentity.id !== -2}
-				<MangaListTemplate
-					user={data.user}
-					displayUnresolved={$settings.displayUnresolved}
-					due={false}
-				/>
-			{:else}
-				<ListTitle title={$locale().lists.completed.mangaAndLightNovels} />
+		{#if !$settings.displayFiltersIncludeCompleted || !$settings.disableManga}
+			<details open={!$settings.displayMangaCollapsed} class="list">
+				{#if $userIdentity.id !== -2}
+					<MangaListTemplate
+						user={data.user}
+						displayUnresolved={$settings.displayUnresolved}
+						due={false}
+					/>
+				{:else}
+					<ListTitle title={$locale().lists.completed.mangaAndLightNovels} />
 
-				<Skeleton card={false} count={5} height="0.9rem" list />
-			{/if}
-		</details>
+					<Skeleton card={false} count={5} height="0.9rem" list />
+				{/if}
+			</details>
+		{/if}
 	</div>
 {/if}
 
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 214433d6..3b9f7f1a 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -62,6 +62,7 @@ export interface Settings {
 	displayCopyMediaTitleNotLink: boolean;
 	displayTotalDueEpisodes: boolean;
 	displayAniListNotifications: boolean;
+	displayFiltersIncludeCompleted: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -101,6 +102,7 @@ const defaultSettings: Settings = {
 	displayCopyMediaTitleNotLink: false,
 	displayTotalDueEpisodes: false,
 	displayAniListNotifications: false,
+	displayFiltersIncludeCompleted: false,
 
 	// Calculation
 	calculateChaptersRoundedDown: true,