feat(settings): limit list height

1 files changed, 52 insertions, 2 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c784cb6c..c5109c4a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,12 +7,22 @@
 	import userIdentity from '../stores/userIdentity';
 	import settings from '../stores/settings';
 	import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte';
+	import { lastActivityDate } from '$lib/AniList/activity';
 
 	export let data;
 
 	let currentUserIdentity = { name: '', id: -1 };
+	let lastActivityWasToday = true;
 
 	onMount(async () => {
+		if ($settings.limitListHeight) {
+			document.querySelectorAll('.list').forEach((list) => {
+				list.style.maxHeight = `calc(100vh - ${
+					document.querySelector('#list-container')?.getBoundingClientRect().bottom
+				}px)`;
+			});
+		}
+
 		if (data.user !== undefined) {
 			if ($userIdentity === '') {
 				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
@@ -20,10 +30,44 @@
 
 			currentUserIdentity = JSON.parse($userIdentity);
 			currentUserIdentity.name = currentUserIdentity.name;
+			lastActivityWasToday =
+				(await lastActivityDate(currentUserIdentity)).toDateString() >= new Date().toDateString();
 		}
 	});
+
+	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}
+	<div id="activity-warning">
+		<p>
+			You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
+			to keep your streak!
+		</p>
+	</div>
+{/if}
+
 <div id="list-container">
 	{#if data.user === undefined}
 		Please log in to view due media.
@@ -82,7 +126,13 @@
 
 <style>
 	#list-container {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.list {
+		overflow-y: auto;
+		min-width: 300px;
+		flex: 1 1 300px;
 	}
 </style>