feat(Landing): Update to match LandingHero

6 files changed, 58 insertions, 56 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 6e8d6d6c..bcd4e806 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -31,6 +31,7 @@
   export let notYetReleased = false;
   export let dummy = false;
   export let disableFilter = false;
+  export let limit: number | undefined = undefined;
 
   let lastUpdatedMedia = -1;
   let previousAnimeList: Media[];
@@ -69,6 +70,7 @@
         bind:pendingUpdate
         {dummy}
         {disableFilter}
+        {limit}
       />
     {:else}
       <PlaceholderList count={lastListSize} {title} />
@@ -91,6 +93,7 @@
         bind:pendingUpdate
         {dummy}
         {disableFilter}
+        {limit}
       />
     {/if}
   {:catch}
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index fef76c03..04b1d03c 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -33,6 +33,7 @@
   export let notYetReleased = false;
   export let dummy = false;
   export let disableFilter = false;
+  export let limit: number | undefined = undefined;
 
   let showRoulette = false;
   let keyCacher: NodeJS.Timeout;
@@ -183,6 +184,7 @@
     {upcoming}
     {notYetReleased}
     reverseSort={$settings.displayReverseSort}
+    {limit}
   >
     <div slot="title" let:title={anime} let:progress>
       {#if !upcoming && !notYetReleased}
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 8e914ef6..b9e86ba0 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -18,7 +18,9 @@
     tokenType: ''
   };
   export let dummy = false;
+  export let dummyCount = 7;
   export let disableFilter = false;
+  export let limit: number | undefined = undefined;
   let animeLists: Promise<Media[]>;
   let startTime: number;
   let endTime: number;
@@ -27,40 +29,29 @@
     startTime = performance.now();
 
     if (dummy) {
+      // Use deterministic selection for consistent display
+      const filtered = 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
+      );
       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) => {
-            const nextEpisode = Math.floor(Math.random() * (anime.episodes || 0)) + 1 || 1;
-
-            anime.status = 'FINISHED';
-            anime.nextAiringEpisode = {
-              airingAt:
-                Math.floor(Date.now() / 1000) +
-                Math.floor(Math.random() * 7 * 24 * 60 * 60) +
-                60 * 60,
-              episode: Math.floor(Math.random() * (anime.episodes || 0)) + 1 || 1
-            };
-            anime.mediaListEntry.progress = Math.floor(Math.random() * nextEpisode) || 1;
-
-            return anime;
-          })
-          .sort(
-            (a, b) => (a.nextAiringEpisode?.airingAt || 0) - (b.nextAiringEpisode?.airingAt || 0)
-          )
-          .slice(0, 7) as unknown as Media[]
+        filtered.slice(0, dummyCount).map((anime, index) => {
+          anime.status = 'FINISHED';
+          anime.nextAiringEpisode = {
+            airingAt: Math.floor(Date.now() / 1000) + (index + 1) * 24 * 60 * 60,
+            episode: Math.floor((anime.episodes || 12) * 0.8)
+          };
+          anime.mediaListEntry.progress = Math.floor((anime.nextAiringEpisode.episode || 5) * 0.6);
+          return anime;
+        }) as unknown as Media[]
       );
     } else {
       animeLists = mediaListCollection(user, $identity, Type.Anime, $anime, $lastPruneTimes.anime, {
@@ -127,4 +118,5 @@
   completed
   {dummy}
   {disableFilter}
+  {limit}
 />
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index 119e4d71..ed4a9733 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -13,10 +13,12 @@
   export let upcoming = false;
   export let notYetReleased = false;
   export let reverseSort = false;
+  export let limit: number | undefined = undefined;
 
   let uniqueID = new Date().getTime();
 
-  $: processedMedia = reverseSort ? media.reverse() : media;
+  $: sortedMedia = reverseSort ? media.reverse() : media;
+  $: processedMedia = limit !== undefined ? sortedMedia.slice(0, limit) : sortedMedia;
 </script>
 
 <div
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index c337a053..f5af25fc 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -33,6 +33,7 @@
   export let authorised: boolean;
   export let dummy = false;
   export let disableFilter = false;
+  export let limit: number | undefined = undefined;
 
   let showRoulette = false;
   let serviceStatusResponse: Promise<Response>;
@@ -165,7 +166,7 @@
 {/if}
 
 {#if $settings.displayCoverModeManga || dummy}
-  <CleanGrid media={filteredMedia} {dummy} type="manga">
+  <CleanGrid media={filteredMedia} {dummy} type="manga" {limit}>
     <div slot="title" let:title={manga} let:progress>
       {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
         <span class="opaque">/{manga.chapters || '?'}</span>
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index 16665d56..c2fc0513 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -31,7 +31,9 @@
   export let displayUnresolved: boolean;
   export let due: boolean;
   export let dummy = $settings.debugDummyLists || false;
+  export let dummyCount = 7;
   export let disableFilter = false;
+  export let limit: number | undefined = undefined;
   const authorised = privilegedUser($identity.id);
   let mangaLists: Promise<Media[]>;
   let startTime: number;
@@ -67,28 +69,25 @@
     startTime = performance.now();
 
     if (dummy) {
+      // Use deterministic selection for consistent display
+      const filtered = 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'
+      );
       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[]
+        filtered.slice(0, dummyCount).map((manga) => {
+          manga.status = 'FINISHED';
+          manga.episodes = Math.floor((manga.chapters || 10) * 0.7) as unknown as null;
+          manga.mediaListEntry.progress = Math.floor((manga.episodes || 5) * 0.5) + 1;
+          return manga;
+        }) as unknown as Media[]
       );
     } else {
       mangaLists = mediaListCollection(user, $identity, Type.Manga, $manga, $lastPruneTimes.manga, {
@@ -262,6 +261,7 @@
       {authorised}
       {dummy}
       {disableFilter}
+      {limit}
     />
   {:else}
     {#if !authorised}
@@ -310,6 +310,7 @@
         {authorised}
         {dummy}
         {disableFilter}
+        {limit}
       />
     {:else}
       {#if !authorised}
@@ -378,6 +379,7 @@
       {authorised}
       {dummy}
       {disableFilter}
+      {limit}
     />
   {:catch}
     {#if authorised}