feat(upcoming): move to dedicated section

2 files changed, 42 insertions, 29 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 2c806a2f..fba53429 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -9,12 +9,17 @@
 	import ListTitle from '../ListTitle.svelte';
 
 	export let endTime: number;
-	export let cleanMedia: (media: Media[], displayUnresolved: boolean) => Media[];
+	export let cleanMedia: (
+		media: Media[],
+		displayUnresolved: boolean,
+		plannedOnly?: boolean
+	) => Media[];
 	export let animeLists: Promise<Media[]>;
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
 	export let title: string;
 	export let completed = false;
+	export let plannedOnly = false;
 
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
@@ -42,10 +47,8 @@
 		<ul><li>Loading ...</li></ul>
 	{/if}
 {:then media}
-	{@const cleanedMedia = cleanMedia(media, $settings.displayUnresolved)}
-
 	<CleanAnimeList
-		media={cleanedMedia}
+		media={cleanMedia(media, $settings.displayUnresolved, plannedOnly)}
 		{title}
 		bind:animeLists
 		{user}
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index e4acc457..2b1d8a4b 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -19,34 +19,32 @@
 		animeLists = mediaListCollection(user, identity, Type.Anime, $anime, $lastPruneTimes.anime);
 	});
 
-	const cleanMedia = (anime: Media[], displayUnresolved: boolean) => {
+	const cleanMedia = (anime: Media[], displayUnresolved: boolean, plannedOnly = true) => {
 		if (anime === undefined) return [];
 
-		let upcomingAnime = anime
-			.filter(
-				// Releasing media
-				(media: Media) =>
-					(media.status === 'RELEASING' || media.status === 'NOT_YET_RELEASED') &&
-					media.nextAiringEpisode !== null
-			)
-			.filter(
-				(media: Media) =>
-					// Outdated media
-					($settings.displayPlannedAnime ? media.mediaListEntry?.status === 'PLANNING' : false) ||
-					(media.nextAiringEpisode || { episode: 0 }).episode - 1 <=
-						(media.mediaListEntry || { progress: 0 }).progress
-			)
-			.map((media: Media) => {
-				// Adjust for planned anime
-				if (
-					($settings.displayPlannedAnime ? media.episodes !== 1 : true) &&
-					(media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0
-				) {
-					media.nextAiringEpisode = { episode: -1 };
-				}
+		const filterAnime = (status: 'RELEASING' | 'NOT_YET_RELEASED') =>
+			anime
+				.filter((media: Media) => media.status === status && media.nextAiringEpisode !== null)
+				.filter(
+					(media: Media) =>
+						// Outdated media
+						($settings.displayPlannedAnime ? media.mediaListEntry?.status === 'PLANNING' : false) ||
+						(media.nextAiringEpisode || { episode: 0 }).episode - 1 <=
+							(media.mediaListEntry || { progress: 0 }).progress
+				)
+				.map((media: Media) => {
+					// Adjust for planned anime
+					if (
+						($settings.displayPlannedAnime ? media.episodes !== 1 : true) &&
+						(media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0
+					) {
+						media.nextAiringEpisode = { episode: -1 };
+					}
 
-				return media;
-			});
+					return media;
+				});
+
+		let upcomingAnime = filterAnime(plannedOnly ? 'NOT_YET_RELEASED' : 'RELEASING');
 
 		if (!displayUnresolved) {
 			upcomingAnime = upcomingAnime.filter(
@@ -67,3 +65,15 @@
 </script>
 
 <AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Upcoming Episodes" />
+
+{#if $settings.displayPlannedAnime}
+	<AnimeList
+		{endTime}
+		{cleanMedia}
+		bind:animeLists
+		{user}
+		{identity}
+		title="Upcoming Episodes (Not Yet Released)"
+		plannedOnly
+	/>
+{/if}