refactor(home): move layout to home

3 files changed, 117 insertions, 0 deletions

diff --git a/src/lib/Home/HeadTitle.svelte b/src/lib/Home/HeadTitle.svelte
new file mode 100644
index 00000000..39d6b4ef
--- /dev/null
+++ b/src/lib/Home/HeadTitle.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let route: string | undefined = undefined;
+	export let path: string | undefined = undefined;
+
+	const title = (route ? `${route} • ` : '') + 'due.moe';
+</script>
+
+<svelte:head>
+	<!-- Facebook -->
+	<meta property="og:url" content={`https://due.moe${path}`} />
+	<meta property="og:title" content={title} />
+
+	<!-- Twitter -->
+	<meta property="twitter:url" content={`https://due.moe${path}`} />
+	<meta name="twitter:title" content={title} />
+
+	<title>{title}</title>
+</svelte:head>
diff --git a/src/lib/Home/LastActivity.svelte b/src/lib/Home/LastActivity.svelte
new file mode 100644
index 00000000..67125476
--- /dev/null
+++ b/src/lib/Home/LastActivity.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import userIdentity from '$stores/userIdentity';
+	import { onMount } from 'svelte';
+	import {
+		userIdentity as getUserIdentity,
+		type AniListAuthorisation
+	} from '$lib/AniList/identity';
+	import { lastActivityDate } from '../AniList/activity';
+	import settings from '$stores/settings';
+
+	export let user: AniListAuthorisation;
+
+	let currentUserIdentity = {
+		name: '',
+		id: -1,
+		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
+	};
+	let lastActivityWasToday = true;
+
+	onMount(async () => {
+		if (user !== undefined) {
+			if ($userIdentity === '') {
+				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
+			}
+
+			currentUserIdentity = JSON.parse($userIdentity);
+			currentUserIdentity.name = currentUserIdentity.name;
+			lastActivityWasToday =
+				(await lastActivityDate(currentUserIdentity, user)).date.toDateString() >=
+				new Date().toDateString();
+
+			if (!lastActivityWasToday) {
+				if ($settings.displayLimitListHeight) {
+					document.querySelectorAll('.list').forEach((list) => {
+						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
+							document.querySelector('#list-container')?.getBoundingClientRect().top
+						}px) - 5rem)`;
+					});
+				}
+			}
+		}
+	});
+
+	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}
+	<blockquote>
+		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
+		to keep your streak!
+	</blockquote>
+{/if}
diff --git a/src/lib/Home/Root.svelte b/src/lib/Home/Root.svelte
new file mode 100644
index 00000000..d65a9832
--- /dev/null
+++ b/src/lib/Home/Root.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import settings from '$stores/settings';
+	import { fly } from 'svelte/transition';
+
+	export let data: any;
+	export let way: number;
+
+	const animationDelay = 100;
+</script>
+
+{#if $settings.displayDisableAnimations}
+	<slot />
+{:else}
+	{#key data.url}
+		<div
+			in:fly={{
+				x: way,
+				duration: animationDelay,
+				delay: animationDelay
+			}}
+			out:fly={{ x: -way, duration: animationDelay }}
+		>
+			<slot />
+		</div>
+	{/key}
+{/if}