feat(landing): cover mode list demos

2 files changed, 66 insertions, 18 deletions

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}