fix(wrapped): account for no activity

1 files changed, 59 insertions, 56 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index b3743549..ac41a72e 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -88,7 +88,8 @@
 	$: {
 		genreTagCount = genreTagCount;
 
-		if (animeList && mangaList) topMedia = tops([...animeList, ...mangaList], genreTagCount);
+		if (animeList && mangaList)
+			topMedia = tops([...(animeList || []), ...(mangaList || [])], genreTagCount);
 
 		// new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
 	}
@@ -453,64 +454,66 @@
 						</div>
 					</div>
 				</div>
-				<div class="categories-grid">
-					<div class="category-grid pure-category category middle-category">
-						<div class="grid-item image-grid">
-							{#if animeList !== undefined}
-								<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
-									<img
-										src={proxy(animeList[0].coverImage.extraLarge)}
-										alt="Highest Rated Anime Cover"
-										class="cover-image"
-										on:load={updateWidth}
-									/>
-								</a>
-								<div>
-									<b>Highest Rated Anime</b>
-									<ol>
-										{#each animeList?.slice(0, highestRatedCount) as anime}
-											<li>
-												<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
-													{anime.title.english || anime.title.romaji || anime.title.native}
-												</a>
-											</li>
-										{/each}
-									</ol>
+				{#if animeList !== undefined || mangaList !== undefined}
+					<div class="categories-grid">
+						{#if animeList !== undefined}
+							<div class="category-grid pure-category category middle-category">
+								<div class="grid-item image-grid">
+									{#if animeList.length !== 0}
+										<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
+											<img
+												src={proxy(animeList[0].coverImage.extraLarge)}
+												alt="Highest Rated Anime Cover"
+												class="cover-image"
+												on:load={updateWidth}
+											/>
+										</a>
+										<div>
+											<b>Highest Rated Anime</b>
+											<ol>
+												{#each animeList?.slice(0, highestRatedCount) as anime}
+													<li>
+														<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
+															{anime.title.english || anime.title.romaji || anime.title.native}
+														</a>
+													</li>
+												{/each}
+											</ol>
+										</div>
+									{/if}
 								</div>
-							{:else}
-								{@html nbsp('Loading anime list ...')}
-							{/if}
-						</div>
-					</div>
-					<div class="category-grid pure-category category middle-category">
-						<div class="grid-item image-grid">
-							{#if mangaList !== undefined}
-								<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
-									<img
-										src={proxy(mangaList[0].coverImage.extraLarge)}
-										alt="Highest Rated Manga Cover"
-										class="cover-image"
-										on:load={updateWidth}
-									/>
-								</a>
-								<div>
-									<b>Highest Rated Manga</b>
-									<ol>
-										{#each mangaList?.slice(0, highestRatedCount) as manga}
-											<li>
-												<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
-													{manga.title.english || manga.title.romaji || manga.title.native}
-												</a>
-											</li>
-										{/each}
-									</ol>
+							</div>
+						{/if}
+						{#if mangaList !== undefined}
+							<div class="category-grid pure-category category middle-category">
+								<div class="grid-item image-grid">
+									{#if mangaList.length !== 0}
+										<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
+											<img
+												src={proxy(mangaList[0].coverImage.extraLarge)}
+												alt="Highest Rated Manga Cover"
+												class="cover-image"
+												on:load={updateWidth}
+											/>
+										</a>
+										<div>
+											<b>Highest Rated Manga</b>
+											<ol>
+												{#each mangaList?.slice(0, highestRatedCount) as manga}
+													<li>
+														<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+															{manga.title.english || manga.title.romaji || manga.title.native}
+														</a>
+													</li>
+												{/each}
+											</ol>
+										</div>
+									{/if}
 								</div>
-							{:else}
-								{@html nbsp('Loading manga list ...')}
-							{/if}
-						</div>
+							</div>
+						{/if}
 					</div>
-				</div>
+				{/if}
 				{#if topGenresTags}
 					<div class="categories-grid" style="padding-top: 0;">
 						<div class="category-grid pure-category category">