feat(upcoming): option to display planning

5 files changed, 37 insertions, 13 deletions

diff --git a/src/lib/AniList/media.ts b/src/lib/AniList/media.ts
index a04618d9..8e8f8fb5 100644
--- a/src/lib/AniList/media.ts
+++ b/src/lib/AniList/media.ts
@@ -12,12 +12,22 @@ export enum Type {
 
 export interface Media {
 	id: number;
-	status: string;
-	type: string;
+	status: 'FINISHED' | 'RELEASING' | 'NOT_YET_RELEASED' | 'CANCELLED' | 'HIATUS';
+	type: 'ANIME' | 'MANGA';
 	episodes: number;
 	chapters: number;
 	volumes: number;
-	format: string;
+	format:
+		| 'TV'
+		| 'TV_SHORT'
+		| 'MOVIE'
+		| 'SPECIAL'
+		| 'OVA'
+		| 'ONA'
+		| 'MUSIC'
+		| 'MANGA'
+		| 'NOVEL'
+		| 'ONE_SHOT';
 	title: {
 		romaji: string;
 		english: string;
@@ -30,7 +40,7 @@ export interface Media {
 	mediaListEntry?: {
 		progress: number;
 		progressVolumes: number;
-		status: string;
+		status: 'CURRENT' | 'PLANNING' | 'COMPLETED' | 'DROPPED' | 'PAUSED' | 'REPEATING';
 		score: number;
 		startedAt: {
 			year: number;
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index 232f3d55..99c9b99e 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -5,6 +5,7 @@
 	import anime from '../../../stores/anime';
 	import lastPruneTimes from '../../../stores/lastPruneTimes';
 	import AnimeList from './AnimeListTemplate.svelte';
+	import settings from '../../../stores/settings';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -24,19 +25,22 @@
 		}
 
 		const releasingMedia = media.filter(
-			(media: Media) => media.status == 'RELEASING' && media.nextAiringEpisode !== null
-			/* &&
-				(media['mediaListEntry'] || { progress: 0 })['progress'] >=
-					($displayNotStarted === 'true' ? 0 : 1) */
+			(media: Media) =>
+				(media.status === 'RELEASING' || media.status === 'NOT_YET_RELEASED') &&
+				media.nextAiringEpisode !== null
 		);
 		const outdatedMedia = releasingMedia.filter((media: Media) => {
 			return (
+				($settings.displayPlannedAnime ? media.mediaListEntry?.status === 'PLANNING' : false) ||
 				(media.nextAiringEpisode || { episode: 0 }).episode - 1 <=
-				(media.mediaListEntry || { progress: 0 }).progress
+					(media.mediaListEntry || { progress: 0 }).progress
 			);
 		});
 		let finalMedia = outdatedMedia.map((media: Media) => {
-			if ((media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0) {
+			if (
+				($settings.displayPlannedAnime ? media.episodes !== 1 : true) &&
+				(media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0
+			) {
 				media.nextAiringEpisode = { episode: -1 };
 			}
 
diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
index ab603278..58eeacc9 100644
--- a/src/lib/Settings/SettingCheckboxToggle.svelte
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -10,6 +10,7 @@
 	export let disabled = false;
 	export let text: string;
 	export let setting: SettingsBooleanKeys[keyof SettingsBooleanKeys];
+	export let lineBreak = true;
 
 	// const toggler = (key: keyof Settings) => [
 	// 	() =>
@@ -47,7 +48,9 @@
 	<slot />
 {/if}
 
-<br />
+{#if lineBreak}
+	<br />
+{/if}
 
 {#if sectionBreak}
 	<p />
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 50c5ac28..e015bde8 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -46,7 +46,12 @@
 
 		<SettingCheckboxToggle setting="forceLightTheme" text="Force light theme" />
 		<SettingCheckboxToggle setting="linkToLiveChart" text="Link anime to LiveChart.me" />
-		<SettingCheckboxToggle setting="displayPausedMedia" text="Show paused media" />
+		<SettingCheckboxToggle
+			setting="displayPausedMedia"
+			text="Show paused media"
+			lineBreak={false}
+		/>
+		<SettingCheckboxToggle setting="displayPlannedAnime" text="Show planned anime" />
 		<SettingCheckboxToggle setting="limitListHeight" text="Limit list area to screen" />
 		<SettingCheckboxToggle setting="displaySocialButton" text="Show social button" />
 		<SettingCheckboxToggle setting="displayUnresolved" text="Display unresolved media" />
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index b6ad02bf..fb4d0fff 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -20,6 +20,7 @@ export interface Settings {
 	displayNativeTitles: boolean;
 	guessMethod: 'median' | 'trimmed_mean' | 'weighted_average';
 	disableOutOfDateVolumeWarning: boolean;
+	displayPlannedAnime: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -40,7 +41,8 @@ const defaultSettings: Settings = {
 	hoverNavigation: false,
 	displayNativeTitles: false,
 	guessMethod: 'trimmed_mean',
-	disableOutOfDateVolumeWarning: false
+	disableOutOfDateVolumeWarning: false,
+	displayPlannedAnime: false
 };
 
 const createStore = () => {