feat(landing): cover mode list demos

7 files changed, 124 insertions, 115 deletions

diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index ae8dcca0..9e5df53d 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -1,74 +1,15 @@
 <script lang="ts">
-	import locale from '$stores/locale';
-	import ListTitle from './List/ListTitle.svelte';
-	import sampleManga from '$lib/Data/Static/SampleMedia/manga.json';
-	import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
-	import MediaTitleDisplay from './List/MediaTitleDisplay.svelte';
-	import { outboundLink } from './Media/links';
-	import settings from '$stores/settings';
 	import root from './Utility/root';
-	import type { Media } from './Data/AniList/media';
 	import { env } from '$env/dynamic/public';
 	import tooltip from './Tooltip/tooltip';
-
-	const mangaCount = 8;
-	const animeCount = 6;
-	const randomManga = sampleManga
-		.filter(
-			(manga) =>
-				manga.chapters &&
-				!manga.tags.some((tag) => tag.name === 'Nudity') &&
-				!manga.tags.some((tag) => tag.name === 'Rape') &&
-				!manga.tags.some((tag) => tag.name === 'Tragedy') &&
-				!manga.tags.some((tag) => tag.name === 'Bondage') &&
-				manga.genres.some((genre) => genre === 'Comedy') &&
-				!manga.genres.some((genre) => genre === 'Hentai')
-		)
-		.sort(() => 0.5 - Math.random())
-		.slice(0, mangaCount) as unknown as Media[];
-	const randomAnime = sampleAnime
-		.filter(
-			(anime) =>
-				anime.episodes &&
-				!anime.tags.some((tag) => tag.name === 'Nudity') &&
-				!anime.tags.some((tag) => tag.name === 'Rape') &&
-				!anime.tags.some((tag) => tag.name === 'Tragedy') &&
-				!anime.tags.some((tag) => tag.name === 'Bondage') &&
-				!anime.genres.some((genre) => genre === 'Hentai') &&
-				anime.genres.some((genre) => genre === 'Comedy') &&
-				anime.status !== 'NOT_YET_RELEASED'
-		)
-		.sort(() => 0.5 - Math.random())
-		.slice(0, animeCount) as unknown as Media[];
+	import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte';
+	import MangaListTemplate from './List/Manga/MangaListTemplate.svelte';
 </script>
 
 <div class="example-item card">
 	<div class="item-content">
-		<details open={true} class="list">
-			<ListTitle title={$locale().lists.due.mangaAndLightNovels} count={mangaCount} hideTime />
-
-			<ul>
-				{#each randomManga as manga}
-					{@const readChapters = Math.floor(Math.random() * (manga.chapters || 0))}
-
-					<li>
-						<a
-							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
-							target="_blank"
-							title={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							use:tooltip
-						>
-							<MediaTitleDisplay title={manga.title} />
-						</a>
-						<span class="opaque">|</span>
-						{readChapters}<span class="opaque">/{manga.chapters || '?'}</span>
-						<button class="button-square button-action">+</button>
-						[{Math.floor(Math.random() * ((manga.chapters ?? 0) - readChapters)) +
-							readChapters +
-							1}]
-					</li>
-				{/each}
-			</ul>
+		<details class="list" open>
+			<MangaListTemplate due={true} dummy displayUnresolved={false} />
 		</details>
 	</div>
 
@@ -118,31 +59,8 @@
 		>
 	</div>
 	<div class="item-content">
-		<details open={true} class="list">
-			<ListTitle title={$locale().lists.due.episodes} count={animeCount} hideTime />
-
-			<ul>
-				{#each randomAnime as anime}
-					{@const watchedEpisodes = Math.floor(Math.random() * (anime.episodes || 0))}
-
-					<li>
-						<a
-							href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
-							target="_blank"
-							title={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							use:tooltip
-						>
-							<MediaTitleDisplay title={anime.title} />
-						</a>
-						<span class="opaque">|</span>
-						{watchedEpisodes}<span class="opaque">/{anime.episodes || '?'}</span>
-						<button class="button-square button-action">+</button>
-						[{Math.floor(Math.random() * ((anime.episodes ?? 0) - watchedEpisodes)) +
-							watchedEpisodes +
-							1}]
-					</li>
-				{/each}
-			</ul>
+		<details class="list" open>
+			<CompletedAnimeList dummy />
 		</details>
 	</div>
 </div>
diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index e60a8a8b..4b69711b 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -28,6 +28,7 @@
 	export let plannedOnly = false;
 	export let upcoming = false;
 	export let notYetReleased = false;
+	export let dummy = false;
 
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
@@ -46,7 +47,7 @@
 	});
 </script>
 
-{#if !$subsPlease}
+{#if !$subsPlease && !dummy}
 	<PlaceholderList count={lastListSize} {title} />
 {:else}
 	{#await animeLists}
@@ -63,6 +64,7 @@
 				{upcoming}
 				bind:previousAnimeList
 				bind:pendingUpdate
+				{dummy}
 			/>
 		{:else}
 			<PlaceholderList count={lastListSize} {title} />
@@ -84,6 +86,7 @@
 				subsPlease={$subsPlease}
 				bind:previousAnimeList
 				bind:pendingUpdate
+				{dummy}
 			/>
 		{/if}
 	{:catch}
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 6988fde0..175b138c 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -31,6 +31,7 @@
 	export let subsPlease: SubsPlease | null = null;
 	export let upcoming = false;
 	export let notYetReleased = false;
+	export let dummy = false;
 
 	let keyCacher: NodeJS.Timeout;
 
@@ -74,7 +75,7 @@
 	onDestroy(() => clearInterval(keyCacher));
 </script>
 
-<ListTitle time={endTime / 1000} count={media.length} {title} />
+<ListTitle time={endTime / 1000} count={media.length} {title} hideTime={dummy} hideCount={dummy} />
 
 {#if media.length === 0}
 	No anime to display. <button on:click={() => (animeLists = cleanCache(user, $identity))}>
@@ -96,6 +97,7 @@
 						id={`anime-${anime.id}`}
 						pin={`anime-${anime.id}`}
 						content={anime ? mediaTitle(anime) : ''}
+						relative={dummy}
 					>
 						<div class="cover-card-image">
 							<a
@@ -132,7 +134,7 @@
 								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
 								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
 								on:click={() => {
-									if (pendingUpdate !== anime.id) {
+									if (!dummy && pendingUpdate !== anime.id) {
 										lastUpdatedMedia = anime.id;
 										pendingUpdate = anime.id;
 
@@ -213,7 +215,7 @@
 								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
 								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
 								on:click={() => {
-									if (pendingUpdate !== anime.id) {
+									if (!dummy && pendingUpdate !== anime.id) {
 										lastUpdatedMedia = anime.id;
 										pendingUpdate = anime.id;
 
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 70dae576..67e917b6 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -9,8 +9,15 @@
 	import { getNotificationsContext } from 'svelte-notifications';
 	import locale from '$stores/locale';
 	import identity from '$stores/identity';
+	import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
 
-	export let user: AniListAuthorisation;
+	export let user: AniListAuthorisation = {
+		accessToken: '',
+		refreshToken: '',
+		expiresIn: 0,
+		tokenType: ''
+	};
+	export let dummy = false;
 
 	const { addNotification } = getNotificationsContext();
 	let animeLists: Promise<Media[]>;
@@ -19,12 +26,41 @@
 
 	onMount(async () => {
 		startTime = performance.now();
-		animeLists = mediaListCollection(user, $identity, Type.Anime, $anime, $lastPruneTimes.anime, {
-			addNotification
-		});
+
+		if (dummy) {
+			animeLists = Promise.resolve(
+				sampleAnime
+					.filter(
+						(anime) =>
+							anime.episodes &&
+							!anime.tags.some((tag) => tag.name === 'Nudity') &&
+							!anime.tags.some((tag) => tag.name === 'Rape') &&
+							!anime.tags.some((tag) => tag.name === 'Tragedy') &&
+							!anime.tags.some((tag) => tag.name === 'Bondage') &&
+							!anime.genres.some((genre) => genre === 'Hentai') &&
+							anime.genres.some((genre) => genre === 'Comedy') &&
+							anime.status !== 'NOT_YET_RELEASED' &&
+							anime.episodes > 1
+					)
+					.sort(() => 0.5 - Math.random())
+					.map((anime) => {
+						anime.mediaListEntry.progress = Math.floor(Math.random() * (anime.episodes || 0)) + 1;
+						anime.status = 'FINISHED';
+
+						return anime;
+					})
+					.slice(0, 7) as unknown as Media[]
+			);
+		} else {
+			animeLists = mediaListCollection(user, $identity, Type.Anime, $anime, $lastPruneTimes.anime, {
+				addNotification
+			});
+		}
 	});
 
 	const cleanMedia = (anime: Media[]) => {
+		if (anime && dummy) return anime;
+
 		if (anime === undefined) return [];
 
 		const outdatedCompletedAnime = anime.filter(
@@ -56,4 +92,5 @@
 	{user}
 	title={$locale().lists.completed.anime}
 	completed
+	{dummy}
 />
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index 4af60acb..0112963f 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -10,11 +10,12 @@
 	};
 	export let progress: undefined | number = undefined;
 	export let hideTime = false;
+	export let hideCount = false;
 </script>
 
 <summary>
 	<span title={title.hint || undefined} use:tooltip>{title.title}</span>
-	[{count === -1337 ? '...' : count}]
+	{#if !hideCount}[{count === -1337 ? '...' : count}]{/if}
 	{#if !hideTime}
 		<small class="opaque">{time ? time.toFixed(3) : '...'}s</small>
 	{/if}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 7adea64c..3fc551f0 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -30,6 +30,7 @@
 	export let due: boolean;
 	export let rateLimited: boolean;
 	export let authorised: boolean;
+	export let dummy = false;
 
 	let serviceStatusResponse: Promise<Response>;
 
@@ -48,13 +49,17 @@
 		title={due
 			? $locale().lists.due.mangaAndLightNovels
 			: $locale().lists.completed.mangaAndLightNovels}
+		hideTime={dummy}
+		hideCount={dummy}
 	>
-		<button
-			class="small-button"
-			title="Force a full refresh"
-			on:click={cleanCache}
-			data-umami-event="Force Refresh Manga">Refresh</button
-		>
+		{#if !dummy}
+			<button
+				class="small-button"
+				title="Force a full refresh"
+				on:click={cleanCache}
+				data-umami-event="Force Refresh Manga">Refresh</button
+			>
+		{/if}
 	</ListTitle>
 {/if}
 
@@ -101,7 +106,7 @@
 	</span>
 {/if}
 
-{#if $settings.displayCoverModeManga}
+{#if $settings.displayCoverModeManga || dummy}
 	<div
 		class="covers"
 		style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
@@ -111,7 +116,11 @@
 
 			{#if progress !== manga.episodes}
 				<div class="cover-card" id={`manga-${manga.id}`}>
-					<Tooltip pin={`manga-${manga.id}`} content={manga ? mediaTitle(manga) : ''}>
+					<Tooltip
+						pin={`manga-${manga.id}`}
+						content={manga ? mediaTitle(manga) : ''}
+						relative={dummy}
+					>
 						<div class="cover-card-image">
 							<a
 								href={$settings.displayCopyMediaTitleNotLink
@@ -148,9 +157,9 @@
 							class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
 							style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
 							on:click={() =>
-								pendingUpdate === manga.id
-									? null
-									: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+								!dummy && pendingUpdate === manga.id
+									? updateMedia(manga.id, manga.mediaListEntry?.progress, media)
+									: null}
 						>
 							+
 						</button>
@@ -218,9 +227,9 @@
 						class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
 						style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
 						on:click={() =>
-							pendingUpdate === manga.id
-								? null
-								: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+							!dummy && pendingUpdate === manga.id
+								? updateMedia(manga.id, manga.mediaListEntry?.progress, media)
+								: null}
 					>
 						+
 					</button>
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index 40702879..6ef172d7 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import sampleManga from '$lib/Data/Static/SampleMedia/manga.json';
 	import { mediaListCollection, Type, type Media } from '$lib/Data/AniList/media';
 	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 	import { onDestroy, onMount } from 'svelte';
@@ -20,9 +21,15 @@
 	import { browser } from '$app/environment';
 	import identity from '$stores/identity';
 
-	export let user: AniListAuthorisation;
+	export let user: AniListAuthorisation = {
+		accessToken: '',
+		refreshToken: '',
+		expiresIn: 0,
+		tokenType: ''
+	};
 	export let displayUnresolved: boolean;
 	export let due: boolean;
+	export let dummy = false;
 
 	const { addNotification } = getNotificationsContext();
 	const authorised = authorisedJson.includes($identity.id);
@@ -53,9 +60,36 @@
 		}
 
 		startTime = performance.now();
-		mangaLists = mediaListCollection(user, $identity, Type.Manga, $manga, $lastPruneTimes.manga, {
-			addNotification
-		});
+
+		if (dummy) {
+			mangaLists = Promise.resolve(
+				sampleManga
+					.filter(
+						(manga) =>
+							manga.chapters &&
+							!manga.tags.some((tag) => tag.name === 'Nudity') &&
+							!manga.tags.some((tag) => tag.name === 'Rape') &&
+							!manga.tags.some((tag) => tag.name === 'Tragedy') &&
+							!manga.tags.some((tag) => tag.name === 'Bondage') &&
+							!manga.genres.some((genre) => genre === 'Hentai') &&
+							manga.genres.some((genre) => genre === 'Comedy') &&
+							manga.status !== 'NOT_YET_RELEASED'
+					)
+					.sort(() => 0.5 - Math.random())
+					.map((manga) => {
+						manga.status = 'FINISHED';
+						manga.episodes = Math.floor(Math.random() * (manga.chapters || 0)) as unknown as null;
+						manga.mediaListEntry.progress = Math.floor(Math.random() * (manga.episodes || 0)) + 1;
+
+						return manga;
+					})
+					.slice(0, 7) as unknown as Media[]
+			);
+		} else {
+			mangaLists = mediaListCollection(user, $identity, Type.Manga, $manga, $lastPruneTimes.manga, {
+				addNotification
+			});
+		}
 	});
 
 	onDestroy(() => clearInterval(keyCacher));
@@ -63,6 +97,8 @@
 	const cleanMedia = async (manga: Media[], displayUnresolved: boolean, force: boolean) => {
 		progress = 0;
 
+		if (manga && dummy) return manga;
+
 		if (manga === undefined) return [];
 
 		if (!authorised && (await database.chapters.toArray()).length <= 0 && !force) return [];
@@ -219,6 +255,7 @@
 			{due}
 			{rateLimited}
 			{authorised}
+			{dummy}
 		/>
 	{:else}
 		{#if !authorised}
@@ -252,6 +289,7 @@
 				{due}
 				{rateLimited}
 				{authorised}
+				{dummy}
 			/>
 		{:else}
 			{#if !authorised}
@@ -301,6 +339,7 @@
 			{due}
 			{rateLimited}
 			{authorised}
+			{dummy}
 		/>
 	{:catch}
 		{#if authorised}