3 files changed, 124 insertions, 14 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8b802755..4080d5be 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -50,7 +50,9 @@
 		<p />
 
 		<p>
-			「 <a href="/">Home</a> • <a href="/updates">Manga & LN Updates</a> •
+			「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
+			<a href="/updates">Manga & LN Updates</a>
+			•
 			<a href="/tools">Tools</a> • <a href="/settings">Settings</a> 」
 		</p>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2d4fed88..9204eb1f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,7 +6,6 @@
 	import UpcomingAnimeList from '$lib/List/UpcomingAnimeList.svelte';
 	import userIdentity from '../stores/userIdentity';
 	import settings from '../stores/settings';
-	import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte';
 	import { lastActivityDate } from '$lib/AniList/activity';
 	import ListTitle from '$lib/List/ListTitle.svelte';
 
@@ -116,18 +115,6 @@
 				<ul><li>Loading ...</li></ul>
 			{/if}
 		</details>
-
-		{#if $settings.showCompletedAnime}
-			<details open={!$settings.closeAnimeByDefault} class="list">
-				{#if currentUserIdentity.id != -1}
-					<WatchingAnimeList user={data.user} identity={currentUserIdentity} />
-				{:else}
-					<ListTitle custom="Completed Anime" />
-
-					<ul><li>Loading ...</li></ul>
-				{/if}
-			</details>
-		{/if}
 	{/if}
 </div>
 
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
new file mode 100644
index 00000000..4c2537a8
--- /dev/null
+++ b/src/routes/completed/+page.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
+	import userIdentity from '../../stores/userIdentity';
+	import settings from '../../stores/settings';
+	import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte';
+	import { lastActivityDate } from '$lib/AniList/activity';
+	import ListTitle from '$lib/List/ListTitle.svelte';
+	import CompletedMangaList from '$lib/List/CompletedMangaList.svelte';
+
+	export let data;
+
+	let currentUserIdentity = { name: '', id: -1 };
+	let lastActivityWasToday = true;
+
+	onMount(async () => {
+		settings.setKey('limitListHeight', false);
+
+		if ($settings.limitListHeight) {
+			document.querySelectorAll('.list').forEach((list) => {
+				(list as HTMLElement).style.maxHeight = `calc(100vh - ${
+					document.querySelector('#list-container')?.getBoundingClientRect().bottom
+				}px + 1.1rem)`;
+			});
+		}
+
+		if (data.user !== undefined) {
+			if ($userIdentity === '') {
+				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
+			}
+
+			currentUserIdentity = JSON.parse($userIdentity);
+			currentUserIdentity.name = currentUserIdentity.name;
+			lastActivityWasToday =
+				(await lastActivityDate(currentUserIdentity)).toDateString() >= new Date().toDateString();
+
+			if (!lastActivityWasToday) {
+				if ($settings.limitListHeight) {
+					document.querySelectorAll('.list').forEach((list) => {
+						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
+							document.querySelector('#list-container')?.getBoundingClientRect().bottom
+						}px) - 1.9rem)`;
+					});
+				}
+			}
+		}
+	});
+
+	const timeLeftToday = () => {
+		const now = new Date();
+		const currentHour = now.getHours();
+		const currentMinute = now.getMinutes();
+		const hoursLeft = 24 - currentHour;
+		let minutesLeft = 0;
+		let timeLeft = '';
+
+		if (hoursLeft > 0) {
+			minutesLeft = hoursLeft * 60 - currentMinute;
+		} else {
+			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
+		}
+
+		if (minutesLeft > 60) {
+			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
+		} else {
+			timeLeft = `${minutesLeft} minutes`;
+		}
+
+		return timeLeft;
+	};
+</script>
+
+{#if !lastActivityWasToday}
+	<p>
+		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
+		to keep your streak!
+	</p>
+{/if}
+
+<div id="list-container">
+	{#if data.user === undefined}
+		Please log in to view due media.
+	{:else}
+		<details open={!$settings.closeAnimeByDefault} class="list">
+			{#if currentUserIdentity.id != -1}
+				<WatchingAnimeList user={data.user} identity={currentUserIdentity} />
+			{:else}
+				<ListTitle custom="Completed Anime" />
+
+				<ul><li>Loading ...</li></ul>
+			{/if}
+		</details>
+
+		<details open={!$settings.closeMangaByDefault} class="list">
+			{#if currentUserIdentity.id != -1}
+				<CompletedMangaList
+					user={data.user}
+					identity={currentUserIdentity}
+					displayUnresolved={$settings.displayUnresolved}
+				/>
+			{:else}
+				<ListTitle custom="Completed Anime" />
+
+				<ul><li>Loading ...</li></ul>
+			{/if}
+		</details>
+	{/if}
+</div>
+
+<style>
+	#list-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.list {
+		overflow-y: auto;
+		min-width: 300px;
+		flex: 1 1 300px;
+	}
+</style>