9 files changed, 757 insertions, 662 deletions

diff --git a/src/lib/Tools/Wrapped/ActivityHistory.svelte b/src/lib/Tools/Wrapped/ActivityHistory.svelte
index f1f1a28a..f47b5f71 100644
--- a/src/lib/Tools/Wrapped/ActivityHistory.svelte
+++ b/src/lib/Tools/Wrapped/ActivityHistory.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-import type { ActivityHistoryEntry } from '$lib/Data/AniList/activity';
-import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
-import ActivityHistoryGrid from '../ActivityHistory/Grid.svelte';
+import type { ActivityHistoryEntry } from "$lib/Data/AniList/activity";
+import type { AniListAuthorisation } from "$lib/Data/AniList/identity";
+import ActivityHistoryGrid from "../ActivityHistory/Grid.svelte";
 
 export let user: AniListAuthorisation;
 export let activities: ActivityHistoryEntry[];
 export let year: number;
-export let activityHistoryPosition: 'TOP' | 'BELOW_TOP' | 'ORIGINAL';
+export let activityHistoryPosition: "TOP" | "BELOW_TOP" | "ORIGINAL";
 </script>
 
 <div
diff --git a/src/lib/Tools/Wrapped/DataLoader.svelte b/src/lib/Tools/Wrapped/DataLoader.svelte
index 6063f349..99f836b6 100644
--- a/src/lib/Tools/Wrapped/DataLoader.svelte
+++ b/src/lib/Tools/Wrapped/DataLoader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { onMount } from 'svelte';
+import { onMount } from "svelte";
 
 export let onLoad: () => void;
 
diff --git a/src/lib/Tools/Wrapped/Media.svelte b/src/lib/Tools/Wrapped/Media.svelte
index bbd7ee5b..f7dd3007 100644
--- a/src/lib/Tools/Wrapped/Media.svelte
+++ b/src/lib/Tools/Wrapped/Media.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import type { Media } from '$lib/Data/AniList/media';
-import type { Wrapped } from '$lib/Data/AniList/wrapped';
-import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
-import proxy from '$lib/Utility/proxy';
+import type { Media } from "$lib/Data/AniList/media";
+import type { Wrapped } from "$lib/Data/AniList/wrapped";
+import MediaTitleDisplay from "$lib/List/MediaTitleDisplay.svelte";
+import proxy from "$lib/Utility/proxy";
 
 export let animeList: Media[] | undefined;
 export let mangaList: Media[] | undefined;
diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte
index d9dc8efb..6eefcbe9 100644
--- a/src/lib/Tools/Wrapped/MediaExtras.svelte
+++ b/src/lib/Tools/Wrapped/MediaExtras.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { TopMedia } from '$lib/Data/AniList/wrapped';
-import proxy from '$lib/Utility/proxy';
+import type { TopMedia } from "$lib/Data/AniList/wrapped";
+import proxy from "$lib/Utility/proxy";
 
 export let topMedia: TopMedia;
 export let updateWidth: () => void;
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index 7ce50ac3..680e710e 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -1,38 +1,44 @@
 <script lang="ts">
-import Spacer from '$lib/Layout/Spacer.svelte';
-import './wrapped.css';
-import userIdentity from '$stores/identity';
-import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
-import { onMount } from 'svelte';
-import { tops, wrapped, type TopMedia, SortOptions, type Wrapped } from '$lib/Data/AniList/wrapped';
+import Spacer from "$lib/Layout/Spacer.svelte";
+import "./wrapped.css";
+import userIdentity from "$stores/identity";
+import type { AniListAuthorisation } from "$lib/Data/AniList/identity";
+import { onMount } from "svelte";
 import {
-  fullActivityHistory,
-  activityHistory as getActivityHistory,
-  type ActivityHistoryEntry
-} from '$lib/Data/AniList/activity';
-import { Type, mediaListCollection, type Media } from '$lib/Data/AniList/media';
-import anime from '$stores/anime';
-import lastPruneTimes from '$stores/lastPruneTimes';
-import manga from '$stores/manga';
-import RateLimitedError from '$lib/Error/RateLimited.svelte';
-import { domToBlob } from 'modern-screenshot';
-import { browser } from '$app/environment';
-import { page } from '$app/stores';
-import { clearAllParameters } from '../../Utility/parameters';
-import SettingHint from '$lib/Settings/SettingHint.svelte';
-import { database } from '$lib/Database/IDB/activities';
-import Activity from './Top/Activity.svelte';
-import Anime from './Top/Anime.svelte';
-import Manga from './Top/Manga.svelte';
-import ActivityHistory from './ActivityHistory.svelte';
-import MediaExtras from './MediaExtras.svelte';
-import MediaPanel from './Media.svelte';
-import Watermark from './Watermark.svelte';
-import DataLoader from './DataLoader.svelte';
-import Skeleton from '$lib/Loading/Skeleton.svelte';
-import Message from '$lib/Loading/Message.svelte';
-import tooltip from '$lib/Tooltip/tooltip';
-import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
+	tops,
+	wrapped,
+	type TopMedia,
+	SortOptions,
+	type Wrapped,
+} from "$lib/Data/AniList/wrapped";
+import {
+	fullActivityHistory,
+	activityHistory as getActivityHistory,
+	type ActivityHistoryEntry,
+} from "$lib/Data/AniList/activity";
+import { Type, mediaListCollection, type Media } from "$lib/Data/AniList/media";
+import anime from "$stores/anime";
+import lastPruneTimes from "$stores/lastPruneTimes";
+import manga from "$stores/manga";
+import RateLimitedError from "$lib/Error/RateLimited.svelte";
+import { domToBlob } from "modern-screenshot";
+import { browser } from "$app/environment";
+import { page } from "$app/stores";
+import { clearAllParameters } from "../../Utility/parameters";
+import SettingHint from "$lib/Settings/SettingHint.svelte";
+import { database } from "$lib/Database/IDB/activities";
+import Activity from "./Top/Activity.svelte";
+import Anime from "./Top/Anime.svelte";
+import Manga from "./Top/Manga.svelte";
+import ActivityHistory from "./ActivityHistory.svelte";
+import MediaExtras from "./MediaExtras.svelte";
+import MediaPanel from "./Media.svelte";
+import Watermark from "./Watermark.svelte";
+import DataLoader from "./DataLoader.svelte";
+import Skeleton from "$lib/Loading/Skeleton.svelte";
+import Message from "$lib/Loading/Message.svelte";
+import tooltip from "$lib/Tooltip/tooltip";
+import LogInRestricted from "$lib/Error/LogInRestricted.svelte";
 
 export let user: AniListAuthorisation;
 
@@ -60,7 +66,7 @@ let genreTagCount = 5;
 let mounted = false;
 let generated = false;
 let disableActivityHistory = true;
-let excludedKeywordsInput = '';
+let excludedKeywordsInput = "";
 let excludedKeywords: string[] = [];
 let useFullActivityHistory = false;
 let disableLoopingActivityCounter = false;
@@ -72,7 +78,7 @@ let genreTagsSort = SortOptions.SCORE;
 let mediaSort = SortOptions.SCORE;
 let includeMovies = true;
 let includeOVAs = true;
-let activityHistoryPosition: 'TOP' | 'BELOW_TOP' | 'ORIGINAL' = 'ORIGINAL';
+let activityHistoryPosition: "TOP" | "BELOW_TOP" | "ORIGINAL" = "ORIGINAL";
 let includeOngoingMediaFromPreviousYears = false;
 let excludeUnratedUnwatched = true;
 let startDateFilter: Date | null = null;
@@ -90,518 +96,590 @@ let lastEndDateFilter: Date | null = endDateFilter;
 const touch = (...values: unknown[]) => values;
 
 $: {
-  if (browser && mounted) {
-    $page.url.searchParams.set('transparency', transparency.toString());
-    $page.url.searchParams.set('lightTheme', lightTheme.toString());
-    $page.url.searchParams.set('watermark', watermark.toString());
-    $page.url.searchParams.set('includeMusic', includeMusic.toString());
-    $page.url.searchParams.set('includeSpecials', includeSpecials.toString());
-    $page.url.searchParams.set('includeRepeats', includeRepeats.toString());
-    $page.url.searchParams.set('lightMode', lightMode.toString());
-    $page.url.searchParams.set('highestRatedCount', highestRatedCount.toString());
-    $page.url.searchParams.set('genreTagCount', genreTagCount.toString());
-    $page.url.searchParams.set('disableActivityHistory', disableActivityHistory.toString());
-    $page.url.searchParams.set(
-      'highestRatedMediaPercentage',
-      highestRatedMediaPercentage.toString()
-    );
-    $page.url.searchParams.set(
-      'highestRatedGenreTagPercentage',
-      highestRatedGenreTagPercentage.toString()
-    );
-    $page.url.searchParams.set('genreTagsSort', genreTagsSort.toString());
-    $page.url.searchParams.set('mediaSort', mediaSort.toString());
-    $page.url.searchParams.set('includeMovies', includeMovies.toString());
-    $page.url.searchParams.set('includeOVAs', includeOVAs.toString());
-    $page.url.searchParams.set('excludeUnratedUnwatched', excludeUnratedUnwatched.toString());
-    $page.url.searchParams.set(
-      'disableLoopingActivityCounter',
-      disableLoopingActivityCounter.toString()
-    );
-
-    history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
-  }
+	if (browser && mounted) {
+		$page.url.searchParams.set("transparency", transparency.toString());
+		$page.url.searchParams.set("lightTheme", lightTheme.toString());
+		$page.url.searchParams.set("watermark", watermark.toString());
+		$page.url.searchParams.set("includeMusic", includeMusic.toString());
+		$page.url.searchParams.set("includeSpecials", includeSpecials.toString());
+		$page.url.searchParams.set("includeRepeats", includeRepeats.toString());
+		$page.url.searchParams.set("lightMode", lightMode.toString());
+		$page.url.searchParams.set(
+			"highestRatedCount",
+			highestRatedCount.toString(),
+		);
+		$page.url.searchParams.set("genreTagCount", genreTagCount.toString());
+		$page.url.searchParams.set(
+			"disableActivityHistory",
+			disableActivityHistory.toString(),
+		);
+		$page.url.searchParams.set(
+			"highestRatedMediaPercentage",
+			highestRatedMediaPercentage.toString(),
+		);
+		$page.url.searchParams.set(
+			"highestRatedGenreTagPercentage",
+			highestRatedGenreTagPercentage.toString(),
+		);
+		$page.url.searchParams.set("genreTagsSort", genreTagsSort.toString());
+		$page.url.searchParams.set("mediaSort", mediaSort.toString());
+		$page.url.searchParams.set("includeMovies", includeMovies.toString());
+		$page.url.searchParams.set("includeOVAs", includeOVAs.toString());
+		$page.url.searchParams.set(
+			"excludeUnratedUnwatched",
+			excludeUnratedUnwatched.toString(),
+		);
+		$page.url.searchParams.set(
+			"disableLoopingActivityCounter",
+			disableLoopingActivityCounter.toString(),
+		);
+
+		history.replaceState(null, "", `?${$page.url.searchParams.toString()}`);
+	}
 }
 
 $: {
-  if (dataFetched) {
-    const yearChanged = selectedYear !== lastSelectedYear;
-    const fullActivityChanged = useFullActivityHistory !== lastUseFullActivityHistory;
-    const loopingChanged = disableLoopingActivityCounter !== lastDisableLoopingActivityCounter;
-    const startDateChanged = startDateFilter !== lastStartDateFilter;
-    const endDateChanged = endDateFilter !== lastEndDateFilter;
-
-    if (yearChanged || fullActivityChanged || loopingChanged || startDateChanged || endDateChanged)
-      needsRefetch = true;
-  }
+	if (dataFetched) {
+		const yearChanged = selectedYear !== lastSelectedYear;
+		const fullActivityChanged =
+			useFullActivityHistory !== lastUseFullActivityHistory;
+		const loopingChanged =
+			disableLoopingActivityCounter !== lastDisableLoopingActivityCounter;
+		const startDateChanged = startDateFilter !== lastStartDateFilter;
+		const endDateChanged = endDateFilter !== lastEndDateFilter;
+
+		if (
+			yearChanged ||
+			fullActivityChanged ||
+			loopingChanged ||
+			startDateChanged ||
+			endDateChanged
+		)
+			needsRefetch = true;
+	}
 }
 
 $: {
-  touch(
-    includeMusic,
-    includeSpecials,
-    includeRepeats,
-    disableActivityHistory,
-    highestRatedMediaPercentage,
-    highestRatedGenreTagPercentage,
-    topGenresTags,
-    genreTagsSort,
-    mediaSort,
-    includeMovies,
-    includeOVAs,
-    selectedYear,
-    includeOngoingMediaFromPreviousYears,
-    excludeUnratedUnwatched
-  );
-
-  if (shouldFetchData) update().then(updateWidth).catch(updateWidth);
+	touch(
+		includeMusic,
+		includeSpecials,
+		includeRepeats,
+		disableActivityHistory,
+		highestRatedMediaPercentage,
+		highestRatedGenreTagPercentage,
+		topGenresTags,
+		genreTagsSort,
+		mediaSort,
+		includeMovies,
+		includeOVAs,
+		selectedYear,
+		includeOngoingMediaFromPreviousYears,
+		excludeUnratedUnwatched,
+	);
+
+	if (shouldFetchData) update().then(updateWidth).catch(updateWidth);
 }
 $: {
-  touch(animeList, mangaList, highestRatedCount);
+	touch(animeList, mangaList, highestRatedCount);
 
-  new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
+	new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
 }
 $: {
-  touch(genreTagCount);
+	touch(genreTagCount);
 
-  if (animeList && mangaList)
-    topMedia = tops(
-      [...(animeList || []), ...(mangaList || [])],
-      genreTagCount,
-      genreTagsSort,
-      excludedKeywords
-    );
+	if (animeList && mangaList)
+		topMedia = tops(
+			[...(animeList || []), ...(mangaList || [])],
+			genreTagCount,
+			genreTagsSort,
+			excludedKeywords,
+		);
 
-  new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
+	new Promise((resolve) => setTimeout(resolve, 1)).then(updateWidth);
 }
 $: {
-  touch(excludedKeywords);
-
-  if (excludedKeywords.length > 0 && animeList !== undefined && mangaList !== undefined) {
-    animeList = originalAnimeList;
-    mangaList = originalMangaList;
-    animeList = excludeKeywords(animeList as Media[]);
-    mangaList = excludeKeywords(mangaList as Media[]);
-  }
-
-  updateWidth();
+	touch(excludedKeywords);
+
+	if (
+		excludedKeywords.length > 0 &&
+		animeList !== undefined &&
+		mangaList !== undefined
+	) {
+		animeList = originalAnimeList;
+		mangaList = originalMangaList;
+		animeList = excludeKeywords(animeList as Media[]);
+		mangaList = excludeKeywords(mangaList as Media[]);
+	}
+
+	updateWidth();
 }
 $: genreTagTitle = (() => {
-  switch (genreTagsSort) {
-    case SortOptions.SCORE:
-      return 'Highest Rated';
-    case SortOptions.MINUTES_WATCHED:
-      return 'Most Watched';
-    case SortOptions.COUNT:
-      return 'Most Common';
-  }
+	switch (genreTagsSort) {
+		case SortOptions.SCORE:
+			return "Highest Rated";
+		case SortOptions.MINUTES_WATCHED:
+			return "Most Watched";
+		case SortOptions.COUNT:
+			return "Most Common";
+	}
 })();
 $: animeMostTitle = (() => {
-  switch (mediaSort) {
-    case SortOptions.SCORE:
-      return 'Highest Rated';
-    case SortOptions.MINUTES_WATCHED:
-      return 'Most Watched';
-    case SortOptions.COUNT:
-      return 'Most Common';
-  }
+	switch (mediaSort) {
+		case SortOptions.SCORE:
+			return "Highest Rated";
+		case SortOptions.MINUTES_WATCHED:
+			return "Most Watched";
+		case SortOptions.COUNT:
+			return "Most Common";
+	}
 })();
 $: mangaMostTitle = (() => {
-  switch (mediaSort) {
-    case SortOptions.SCORE:
-      return 'Highest Rated';
-    case SortOptions.MINUTES_WATCHED:
-      return 'Most Read';
-    case SortOptions.COUNT:
-      return 'Most Common';
-  }
+	switch (mediaSort) {
+		case SortOptions.SCORE:
+			return "Highest Rated";
+		case SortOptions.MINUTES_WATCHED:
+			return "Most Read";
+		case SortOptions.COUNT:
+			return "Most Common";
+	}
 })();
 
 function updateWidth() {
-  if (!browser) return;
-
-  const wrappedContainer = document.querySelector('#wrapped') as HTMLElement;
-
-  if (!wrappedContainer) return;
-
-  wrappedContainer.style.width = `1920px`;
-
-  const reset = () => {
-    let topWidths = 0;
-    let middleWidths = 0;
-    let bottomWidths = 0;
-
-    wrappedContainer.querySelectorAll('.category').forEach((item) => {
-      const category = item as HTMLElement;
-      const style = window.getComputedStyle(category);
-      const width =
-        category.offsetWidth +
-        parseFloat(style.marginLeft) +
-        parseFloat(style.marginRight) +
-        parseFloat(style.paddingLeft) +
-        parseFloat(style.paddingRight) +
-        parseFloat(style.borderLeftWidth) +
-        parseFloat(style.borderRightWidth);
-
-      if (category.classList.contains('top-category')) {
-        topWidths += width;
-      } else if (category.classList.contains('middle-category')) {
-        middleWidths += width;
-      } else if (category.classList.contains('bottom-category')) {
-        bottomWidths += width;
-      }
-    });
-
-    let requiredWidth = topWidths > middleWidths ? topWidths : middleWidths;
-
-    if (!disableActivityHistory && bottomWidths > requiredWidth) requiredWidth = bottomWidths;
-
-    requiredWidth += wrappedContainer.offsetWidth - wrappedContainer.clientWidth;
-
-    wrappedContainer.style.width = `${requiredWidth}px`;
-    width = requiredWidth;
-  };
-
-  reset();
-  reset();
+	if (!browser) return;
+
+	const wrappedContainer = document.querySelector("#wrapped") as HTMLElement;
+
+	if (!wrappedContainer) return;
+
+	wrappedContainer.style.width = `1920px`;
+
+	const reset = () => {
+		let topWidths = 0;
+		let middleWidths = 0;
+		let bottomWidths = 0;
+
+		wrappedContainer.querySelectorAll(".category").forEach((item) => {
+			const category = item as HTMLElement;
+			const style = window.getComputedStyle(category);
+			const width =
+				category.offsetWidth +
+				parseFloat(style.marginLeft) +
+				parseFloat(style.marginRight) +
+				parseFloat(style.paddingLeft) +
+				parseFloat(style.paddingRight) +
+				parseFloat(style.borderLeftWidth) +
+				parseFloat(style.borderRightWidth);
+
+			if (category.classList.contains("top-category")) {
+				topWidths += width;
+			} else if (category.classList.contains("middle-category")) {
+				middleWidths += width;
+			} else if (category.classList.contains("bottom-category")) {
+				bottomWidths += width;
+			}
+		});
+
+		let requiredWidth = topWidths > middleWidths ? topWidths : middleWidths;
+
+		if (!disableActivityHistory && bottomWidths > requiredWidth)
+			requiredWidth = bottomWidths;
+
+		requiredWidth +=
+			wrappedContainer.offsetWidth - wrappedContainer.clientWidth;
+
+		wrappedContainer.style.width = `${requiredWidth}px`;
+		width = requiredWidth;
+	};
+
+	reset();
+	reset();
 }
 
 onMount(async () => {
-  clearAllParameters([
-    'transparency',
-    'lightTheme',
-    'watermark',
-    'includeMusic',
-    'includeSpecials',
-    'includeRepeats',
-    'forceDark',
-    'highestRatedCount',
-    'genreTagCount',
-    'disableActivityHistory',
-    'highestRatedMediaPercentage',
-    'highestRatedGenreTagPercentage',
-    'genreTagsSort',
-    'mediaSort',
-    'includeMovies',
-    'includeOVAs',
-    'disableLoopingActivityCounter'
-  ]);
-
-  if (browser) {
-    transparency = $page.url.searchParams.get('transparency') === 'true';
-    lightTheme = $page.url.searchParams.get('lightTheme') === 'true';
-    watermark = $page.url.searchParams.get('watermark') === 'true';
-    includeMusic = $page.url.searchParams.get('includeMusic') === 'true';
-    includeSpecials = $page.url.searchParams.get('includeSpecials') === 'true';
-    includeRepeats = $page.url.searchParams.get('includeRepeats') === 'true';
-    lightMode = $page.url.searchParams.get('lightMode') === 'true';
-    highestRatedCount = parseInt($page.url.searchParams.get('highestRatedCount') || '5', 10);
-    genreTagCount = parseInt($page.url.searchParams.get('genreTagCount') || '5', 10);
-    disableActivityHistory = $page.url.searchParams.get('disableActivityHistory') === 'true';
-    disableLoopingActivityCounter =
-      $page.url.searchParams.get('disableLoopingActivityCounter') === 'true';
-    highestRatedMediaPercentage =
-      $page.url.searchParams.get('highestRatedMediaPercentage') === 'true';
-    highestRatedGenreTagPercentage =
-      $page.url.searchParams.get('highestRatedGenreTagPercentage') === 'true';
-    // genreTagsSort = parseInt($page.url.searchParams.get('genreTagsSort') || '0', 10);
-    // mediaSort = parseInt($page.url.searchParams.get('mediaSort') || '0', 10);
-    includeMovies = $page.url.searchParams.get('includeMovies') === 'true';
-    includeOVAs = $page.url.searchParams.get('includeOVAs') === 'true';
-  }
-
-  await update().then(() => (mounted = true));
+	clearAllParameters([
+		"transparency",
+		"lightTheme",
+		"watermark",
+		"includeMusic",
+		"includeSpecials",
+		"includeRepeats",
+		"forceDark",
+		"highestRatedCount",
+		"genreTagCount",
+		"disableActivityHistory",
+		"highestRatedMediaPercentage",
+		"highestRatedGenreTagPercentage",
+		"genreTagsSort",
+		"mediaSort",
+		"includeMovies",
+		"includeOVAs",
+		"disableLoopingActivityCounter",
+	]);
+
+	if (browser) {
+		transparency = $page.url.searchParams.get("transparency") === "true";
+		lightTheme = $page.url.searchParams.get("lightTheme") === "true";
+		watermark = $page.url.searchParams.get("watermark") === "true";
+		includeMusic = $page.url.searchParams.get("includeMusic") === "true";
+		includeSpecials = $page.url.searchParams.get("includeSpecials") === "true";
+		includeRepeats = $page.url.searchParams.get("includeRepeats") === "true";
+		lightMode = $page.url.searchParams.get("lightMode") === "true";
+		highestRatedCount = parseInt(
+			$page.url.searchParams.get("highestRatedCount") || "5",
+			10,
+		);
+		genreTagCount = parseInt(
+			$page.url.searchParams.get("genreTagCount") || "5",
+			10,
+		);
+		disableActivityHistory =
+			$page.url.searchParams.get("disableActivityHistory") === "true";
+		disableLoopingActivityCounter =
+			$page.url.searchParams.get("disableLoopingActivityCounter") === "true";
+		highestRatedMediaPercentage =
+			$page.url.searchParams.get("highestRatedMediaPercentage") === "true";
+		highestRatedGenreTagPercentage =
+			$page.url.searchParams.get("highestRatedGenreTagPercentage") === "true";
+		// genreTagsSort = parseInt($page.url.searchParams.get('genreTagsSort') || '0', 10);
+		// mediaSort = parseInt($page.url.searchParams.get('mediaSort') || '0', 10);
+		includeMovies = $page.url.searchParams.get("includeMovies") === "true";
+		includeOVAs = $page.url.searchParams.get("includeOVAs") === "true";
+	}
+
+	await update().then(() => (mounted = true));
 });
 
 const triggerFetch = () => {
-  shouldFetchData = true;
-  needsRefetch = false;
-  dataFetched = true;
-  fetchKey += 1;
-  lastSelectedYear = selectedYear;
-  lastUseFullActivityHistory = useFullActivityHistory;
-  lastDisableLoopingActivityCounter = disableLoopingActivityCounter;
-  lastStartDateFilter = startDateFilter;
-  lastEndDateFilter = endDateFilter;
+	shouldFetchData = true;
+	needsRefetch = false;
+	dataFetched = true;
+	fetchKey += 1;
+	lastSelectedYear = selectedYear;
+	lastUseFullActivityHistory = useFullActivityHistory;
+	lastDisableLoopingActivityCounter = disableLoopingActivityCounter;
+	lastStartDateFilter = startDateFilter;
+	lastEndDateFilter = endDateFilter;
 };
 
-const createDummyMedia = (type: 'ANIME' | 'MANGA'): Media => ({
-  id: 0,
-  idMal: 0,
-  status: 'FINISHED',
-  type,
-  episodes: type === 'ANIME' ? 0 : 0,
-  chapters: type === 'MANGA' ? 0 : 0,
-  volumes: 0,
-  duration: 0,
-  format: type === 'ANIME' ? 'TV' : 'MANGA',
-  title: {
-    romaji: '...',
-    english: '...',
-    native: '...'
-  },
-  synonyms: [],
-  mediaListEntry: {
-    progress: 0,
-    progressVolumes: 0,
-    status: 'COMPLETED',
-    score: 0,
-    repeat: 0,
-    startedAt: {
-      year: 0,
-      month: 0,
-      day: 0
-    },
-    completedAt: {
-      year: 0,
-      month: 0,
-      day: 0
-    },
-    createdAt: 0,
-    updatedAt: 0,
-    customLists: {}
-  },
-  startDate: {
-    year: 0,
-    month: 0
-  },
-  endDate: {
-    year: 0,
-    month: 0
-  },
-  coverImage: {
-    extraLarge: 'https://s4.anilist.co/file/anilistcdn/staff/large/default.jpg',
-    medium: 'https://s4.anilist.co/file/anilistcdn/staff/large/default.jpg'
-  },
-  tags: [],
-  genres: [],
-  season: 'WINTER',
-  isAdult: false,
-  relations: {
-    edges: []
-  }
+const createDummyMedia = (type: "ANIME" | "MANGA"): Media => ({
+	id: 0,
+	idMal: 0,
+	status: "FINISHED",
+	type,
+	episodes: type === "ANIME" ? 0 : 0,
+	chapters: type === "MANGA" ? 0 : 0,
+	volumes: 0,
+	duration: 0,
+	format: type === "ANIME" ? "TV" : "MANGA",
+	title: {
+		romaji: "...",
+		english: "...",
+		native: "...",
+	},
+	synonyms: [],
+	mediaListEntry: {
+		progress: 0,
+		progressVolumes: 0,
+		status: "COMPLETED",
+		score: 0,
+		repeat: 0,
+		startedAt: {
+			year: 0,
+			month: 0,
+			day: 0,
+		},
+		completedAt: {
+			year: 0,
+			month: 0,
+			day: 0,
+		},
+		createdAt: 0,
+		updatedAt: 0,
+		customLists: {},
+	},
+	startDate: {
+		year: 0,
+		month: 0,
+	},
+	endDate: {
+		year: 0,
+		month: 0,
+	},
+	coverImage: {
+		extraLarge: "https://s4.anilist.co/file/anilistcdn/staff/large/default.jpg",
+		medium: "https://s4.anilist.co/file/anilistcdn/staff/large/default.jpg",
+	},
+	tags: [],
+	genres: [],
+	season: "WINTER",
+	isAdult: false,
+	relations: {
+		edges: [],
+	},
 });
 
 const dummyWrapped: Wrapped = {
-  statistics: {
-    anime: {
-      startYears: [],
-      genres: [],
-      tags: []
-    },
-    manga: {
-      startYears: [],
-      genres: [],
-      tags: []
-    }
-  },
-  activities: {
-    statusCount: 0,
-    messageCount: 0
-  },
-  avatar: {
-    large: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/3.jpg'
-  }
+	statistics: {
+		anime: {
+			startYears: [],
+			genres: [],
+			tags: [],
+		},
+		manga: {
+			startYears: [],
+			genres: [],
+			tags: [],
+		},
+	},
+	activities: {
+		statusCount: 0,
+		messageCount: 0,
+	},
+	avatar: {
+		large: "https://s4.anilist.co/file/anilistcdn/user/avatar/large/3.jpg",
+	},
 };
 
 const dummyActivities: ActivityHistoryEntry[] = [];
-const dummyAnimeList: Media[] = [createDummyMedia('ANIME')];
-const dummyMangaList: Media[] = [createDummyMedia('MANGA')];
+const dummyAnimeList: Media[] = [createDummyMedia("ANIME")];
+const dummyMangaList: Media[] = [createDummyMedia("MANGA")];
 
 async function update() {
-  if ($userIdentity.id === -1) return;
-
-  let rawAnimeList = await mediaListCollection(
-    user,
-    $userIdentity,
-    Type.Anime,
-    $anime,
-    $lastPruneTimes.anime,
-    {
-      forcePrune: dateTicked ? false : true,
-      includeCompleted: true,
-      all: true
-    }
-  );
-  calculatedAnimeList = rawAnimeList
-    .filter(
-      (item, index, self) =>
-        self.findIndex((itemToCompare) => itemToCompare.id === item.id) === index &&
-        (includeMusic ? true : item.format !== 'MUSIC') &&
-        (includeRepeats
-          ? true
-          : item.startDate.year === selectedYear || item.endDate.year === selectedYear
-            ? true
-            : item.mediaListEntry?.repeat === 0) &&
-        (item.mediaListEntry?.startedAt.year === selectedYear ||
-          item.mediaListEntry?.completedAt.year === selectedYear ||
-          ((item.mediaListEntry?.createdAt
-            ? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() === selectedYear
-            : false) && item.mediaListEntry
-            ? item.mediaListEntry?.progress >= 1
-            : false)) &&
-        (includeMovies ? true : item.format !== 'MOVIE') &&
-        (includeSpecials ? true : item.format !== 'SPECIAL') &&
-        (includeOVAs ? true : item.format !== 'OVA') &&
-        (excludeUnratedUnwatched ? item.mediaListEntry?.score !== 0 : true) &&
-        (excludeUnratedUnwatched ? item.mediaListEntry?.progress !== 0 : true) &&
-        (startDateFilter && item.mediaListEntry?.startedAt
-          ? new Date(
-              item.mediaListEntry.startedAt.year,
-              item.mediaListEntry?.startedAt.month - 1,
-              item.mediaListEntry.startedAt.day
-            ) >= new Date(startDateFilter)
-          : true) &&
-        (endDateFilter && item.mediaListEntry?.startedAt
-          ? new Date(
-              item.mediaListEntry.completedAt.year,
-              item.mediaListEntry?.completedAt.month - 1,
-              item.mediaListEntry.completedAt.day
-            ) <= new Date(endDateFilter)
-          : true)
-    )
-    .sort((a, b) => {
-      switch (mediaSort) {
-        case SortOptions.MINUTES_WATCHED:
-          if (a.duration === undefined || a.mediaListEntry?.progress === undefined) return 1;
-          else if (b.duration === undefined || b.mediaListEntry?.progress === undefined) return -1;
-          else
-            return b.duration * b.mediaListEntry.progress - a.duration * a.mediaListEntry.progress;
-        case SortOptions.SCORE:
-        default:
-          if (a.mediaListEntry?.score === undefined) return 1;
-          else if (b.mediaListEntry?.score === undefined) return -1;
-          else return b.mediaListEntry?.score - a.mediaListEntry?.score;
-      }
-    });
-
-  animeList = rawAnimeList
-    .filter(
-      (item, index, self) =>
-        self.findIndex((itemToCompare) => itemToCompare.id === item.id) === index &&
-        (includeMusic ? true : item.format !== 'MUSIC') &&
-        (includeRepeats
-          ? true
-          : item.startDate.year === selectedYear || item.endDate.year === selectedYear
-            ? true
-            : item.mediaListEntry?.repeat === 0) &&
-        (item.mediaListEntry?.startedAt.year === selectedYear ||
-          item.mediaListEntry?.completedAt.year === selectedYear ||
-          ((item.mediaListEntry?.createdAt
-            ? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() === selectedYear
-            : false) && item.mediaListEntry
-            ? item.mediaListEntry?.progress >= 1
-            : false) ||
-          (includeOngoingMediaFromPreviousYears
-            ? (item.mediaListEntry?.updatedAt
-                ? new Date(item.mediaListEntry?.updatedAt * 1000).getFullYear() === selectedYear
-                : false) && item.mediaListEntry
-              ? item.mediaListEntry?.status === 'CURRENT'
-              : false
-            : false)) &&
-        (includeMovies ? true : item.format !== 'MOVIE') &&
-        (includeSpecials ? true : item.format !== 'SPECIAL') &&
-        (includeOVAs ? true : item.format !== 'OVA')
-    )
-    .sort((a, b) => {
-      switch (mediaSort) {
-        case SortOptions.MINUTES_WATCHED:
-          if (a.duration === undefined || a.mediaListEntry?.progress === undefined) return 1;
-          else if (b.duration === undefined || b.mediaListEntry?.progress === undefined) return -1;
-          else
-            return b.duration * b.mediaListEntry.progress - a.duration * a.mediaListEntry.progress;
-        case SortOptions.SCORE:
-        default:
-          if (a.mediaListEntry?.score === undefined) return 1;
-          else if (b.mediaListEntry?.score === undefined) return -1;
-          else return b.mediaListEntry?.score - a.mediaListEntry?.score;
-      }
-    });
-
-  let rawMangaList = await mediaListCollection(
-    user,
-    $userIdentity,
-    Type.Manga,
-    $manga,
-    $lastPruneTimes.manga,
-    {
-      forcePrune: dateTicked ? false : true,
-      includeCompleted: true,
-      all: true
-    }
-  );
-  calculatedMangaList = rawMangaList
-    .filter(
-      (item, index, self) =>
-        self.findIndex((itemToCompare) => itemToCompare.id === item.id) === index &&
-        (includeRepeats ? true : item.mediaListEntry?.repeat === 0) &&
-        (item.mediaListEntry?.startedAt.year === selectedYear ||
-          item.mediaListEntry?.completedAt.year === selectedYear ||
-          ((item.mediaListEntry?.createdAt
-            ? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() === selectedYear
-            : false) && item.mediaListEntry
-            ? item.mediaListEntry?.progress >= 1
-            : false)) &&
-        (excludeUnratedUnwatched ? item.mediaListEntry?.score !== 0 : true) &&
-        (excludeUnratedUnwatched ? item.mediaListEntry?.progress !== 0 : true) &&
-        (startDateFilter && item.mediaListEntry?.startedAt
-          ? new Date(
-              item.mediaListEntry.startedAt.year,
-              item.mediaListEntry?.startedAt.month - 1,
-              item.mediaListEntry.startedAt.day
-            ) >= new Date(startDateFilter)
-          : true) &&
-        (endDateFilter && item.mediaListEntry?.startedAt
-          ? new Date(
-              item.mediaListEntry.completedAt.year,
-              item.mediaListEntry?.completedAt.month - 1,
-              item.mediaListEntry.completedAt.day
-            ) <= new Date(endDateFilter)
-          : true)
-    )
-    .sort((a, b) => {
-      if (a.mediaListEntry?.score === undefined) return 1;
-      else if (b.mediaListEntry?.score === undefined) return -1;
-      else return b.mediaListEntry?.score - a.mediaListEntry?.score;
-    });
-
-  mangaList = rawMangaList
-    .filter(
-      (item, index, self) =>
-        self.findIndex((itemToCompare) => itemToCompare.id === item.id) === index &&
-        (includeRepeats ? true : item.mediaListEntry?.repeat === 0) &&
-        (item.mediaListEntry?.startedAt.year === selectedYear ||
-          item.mediaListEntry?.completedAt.year === selectedYear ||
-          ((item.mediaListEntry?.createdAt
-            ? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() === selectedYear
-            : false) && item.mediaListEntry
-            ? item.mediaListEntry?.progress >= 1
-            : false) ||
-          (includeOngoingMediaFromPreviousYears
-            ? (item.mediaListEntry?.updatedAt
-                ? new Date(item.mediaListEntry?.updatedAt * 1000).getFullYear() === selectedYear
-                : false) && item.mediaListEntry
-              ? item.mediaListEntry?.status === 'CURRENT'
-              : false
-            : false))
-    )
-    .sort((a, b) => {
-      if (a.mediaListEntry?.score === undefined) return 1;
-      else if (b.mediaListEntry?.score === undefined) return -1;
-      else return b.mediaListEntry?.score - a.mediaListEntry?.score;
-    });
-
-  episodes = 0;
-  minutesWatched = 0;
-  chapters = 0;
-  dateTicked = false;
-
-  for (const media of calculatedAnimeList) {
-    episodes += media.mediaListEntry?.progress || 0;
-    minutesWatched += (media.mediaListEntry?.progress || 0) * media.duration || 0;
-  }
-
-  for (const media of calculatedMangaList) chapters += media.mediaListEntry?.progress || 0;
+	if ($userIdentity.id === -1) return;
+
+	let rawAnimeList = await mediaListCollection(
+		user,
+		$userIdentity,
+		Type.Anime,
+		$anime,
+		$lastPruneTimes.anime,
+		{
+			forcePrune: dateTicked ? false : true,
+			includeCompleted: true,
+			all: true,
+		},
+	);
+	calculatedAnimeList = rawAnimeList
+		.filter(
+			(item, index, self) =>
+				self.findIndex((itemToCompare) => itemToCompare.id === item.id) ===
+					index &&
+				(includeMusic ? true : item.format !== "MUSIC") &&
+				(includeRepeats
+					? true
+					: item.startDate.year === selectedYear ||
+							item.endDate.year === selectedYear
+						? true
+						: item.mediaListEntry?.repeat === 0) &&
+				(item.mediaListEntry?.startedAt.year === selectedYear ||
+					item.mediaListEntry?.completedAt.year === selectedYear ||
+					((item.mediaListEntry?.createdAt
+						? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() ===
+							selectedYear
+						: false) && item.mediaListEntry
+						? item.mediaListEntry?.progress >= 1
+						: false)) &&
+				(includeMovies ? true : item.format !== "MOVIE") &&
+				(includeSpecials ? true : item.format !== "SPECIAL") &&
+				(includeOVAs ? true : item.format !== "OVA") &&
+				(excludeUnratedUnwatched ? item.mediaListEntry?.score !== 0 : true) &&
+				(excludeUnratedUnwatched
+					? item.mediaListEntry?.progress !== 0
+					: true) &&
+				(startDateFilter && item.mediaListEntry?.startedAt
+					? new Date(
+							item.mediaListEntry.startedAt.year,
+							item.mediaListEntry?.startedAt.month - 1,
+							item.mediaListEntry.startedAt.day,
+						) >= new Date(startDateFilter)
+					: true) &&
+				(endDateFilter && item.mediaListEntry?.startedAt
+					? new Date(
+							item.mediaListEntry.completedAt.year,
+							item.mediaListEntry?.completedAt.month - 1,
+							item.mediaListEntry.completedAt.day,
+						) <= new Date(endDateFilter)
+					: true),
+		)
+		.sort((a, b) => {
+			switch (mediaSort) {
+				case SortOptions.MINUTES_WATCHED:
+					if (
+						a.duration === undefined ||
+						a.mediaListEntry?.progress === undefined
+					)
+						return 1;
+					else if (
+						b.duration === undefined ||
+						b.mediaListEntry?.progress === undefined
+					)
+						return -1;
+					else
+						return (
+							b.duration * b.mediaListEntry.progress -
+							a.duration * a.mediaListEntry.progress
+						);
+				case SortOptions.SCORE:
+				default:
+					if (a.mediaListEntry?.score === undefined) return 1;
+					else if (b.mediaListEntry?.score === undefined) return -1;
+					else return b.mediaListEntry?.score - a.mediaListEntry?.score;
+			}
+		});
+
+	animeList = rawAnimeList
+		.filter(
+			(item, index, self) =>
+				self.findIndex((itemToCompare) => itemToCompare.id === item.id) ===
+					index &&
+				(includeMusic ? true : item.format !== "MUSIC") &&
+				(includeRepeats
+					? true
+					: item.startDate.year === selectedYear ||
+							item.endDate.year === selectedYear
+						? true
+						: item.mediaListEntry?.repeat === 0) &&
+				(item.mediaListEntry?.startedAt.year === selectedYear ||
+					item.mediaListEntry?.completedAt.year === selectedYear ||
+					((item.mediaListEntry?.createdAt
+						? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() ===
+							selectedYear
+						: false) && item.mediaListEntry
+						? item.mediaListEntry?.progress >= 1
+						: false) ||
+					(includeOngoingMediaFromPreviousYears
+						? (item.mediaListEntry?.updatedAt
+								? new Date(
+										item.mediaListEntry?.updatedAt * 1000,
+									).getFullYear() === selectedYear
+								: false) && item.mediaListEntry
+							? item.mediaListEntry?.status === "CURRENT"
+							: false
+						: false)) &&
+				(includeMovies ? true : item.format !== "MOVIE") &&
+				(includeSpecials ? true : item.format !== "SPECIAL") &&
+				(includeOVAs ? true : item.format !== "OVA"),
+		)
+		.sort((a, b) => {
+			switch (mediaSort) {
+				case SortOptions.MINUTES_WATCHED:
+					if (
+						a.duration === undefined ||
+						a.mediaListEntry?.progress === undefined
+					)
+						return 1;
+					else if (
+						b.duration === undefined ||
+						b.mediaListEntry?.progress === undefined
+					)
+						return -1;
+					else
+						return (
+							b.duration * b.mediaListEntry.progress -
+							a.duration * a.mediaListEntry.progress
+						);
+				case SortOptions.SCORE:
+				default:
+					if (a.mediaListEntry?.score === undefined) return 1;
+					else if (b.mediaListEntry?.score === undefined) return -1;
+					else return b.mediaListEntry?.score - a.mediaListEntry?.score;
+			}
+		});
+
+	let rawMangaList = await mediaListCollection(
+		user,
+		$userIdentity,
+		Type.Manga,
+		$manga,
+		$lastPruneTimes.manga,
+		{
+			forcePrune: dateTicked ? false : true,
+			includeCompleted: true,
+			all: true,
+		},
+	);
+	calculatedMangaList = rawMangaList
+		.filter(
+			(item, index, self) =>
+				self.findIndex((itemToCompare) => itemToCompare.id === item.id) ===
+					index &&
+				(includeRepeats ? true : item.mediaListEntry?.repeat === 0) &&
+				(item.mediaListEntry?.startedAt.year === selectedYear ||
+					item.mediaListEntry?.completedAt.year === selectedYear ||
+					((item.mediaListEntry?.createdAt
+						? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() ===
+							selectedYear
+						: false) && item.mediaListEntry
+						? item.mediaListEntry?.progress >= 1
+						: false)) &&
+				(excludeUnratedUnwatched ? item.mediaListEntry?.score !== 0 : true) &&
+				(excludeUnratedUnwatched
+					? item.mediaListEntry?.progress !== 0
+					: true) &&
+				(startDateFilter && item.mediaListEntry?.startedAt
+					? new Date(
+							item.mediaListEntry.startedAt.year,
+							item.mediaListEntry?.startedAt.month - 1,
+							item.mediaListEntry.startedAt.day,
+						) >= new Date(startDateFilter)
+					: true) &&
+				(endDateFilter && item.mediaListEntry?.startedAt
+					? new Date(
+							item.mediaListEntry.completedAt.year,
+							item.mediaListEntry?.completedAt.month - 1,
+							item.mediaListEntry.completedAt.day,
+						) <= new Date(endDateFilter)
+					: true),
+		)
+		.sort((a, b) => {
+			if (a.mediaListEntry?.score === undefined) return 1;
+			else if (b.mediaListEntry?.score === undefined) return -1;
+			else return b.mediaListEntry?.score - a.mediaListEntry?.score;
+		});
+
+	mangaList = rawMangaList
+		.filter(
+			(item, index, self) =>
+				self.findIndex((itemToCompare) => itemToCompare.id === item.id) ===
+					index &&
+				(includeRepeats ? true : item.mediaListEntry?.repeat === 0) &&
+				(item.mediaListEntry?.startedAt.year === selectedYear ||
+					item.mediaListEntry?.completedAt.year === selectedYear ||
+					((item.mediaListEntry?.createdAt
+						? new Date(item.mediaListEntry?.createdAt * 1000).getFullYear() ===
+							selectedYear
+						: false) && item.mediaListEntry
+						? item.mediaListEntry?.progress >= 1
+						: false) ||
+					(includeOngoingMediaFromPreviousYears
+						? (item.mediaListEntry?.updatedAt
+								? new Date(
+										item.mediaListEntry?.updatedAt * 1000,
+									).getFullYear() === selectedYear
+								: false) && item.mediaListEntry
+							? item.mediaListEntry?.status === "CURRENT"
+							: false
+						: false)),
+		)
+		.sort((a, b) => {
+			if (a.mediaListEntry?.score === undefined) return 1;
+			else if (b.mediaListEntry?.score === undefined) return -1;
+			else return b.mediaListEntry?.score - a.mediaListEntry?.score;
+		});
+
+	episodes = 0;
+	minutesWatched = 0;
+	chapters = 0;
+	dateTicked = false;
+
+	for (const media of calculatedAnimeList) {
+		episodes += media.mediaListEntry?.progress || 0;
+		minutesWatched +=
+			(media.mediaListEntry?.progress || 0) * media.duration || 0;
+	}
+
+	for (const media of calculatedMangaList)
+		chapters += media.mediaListEntry?.progress || 0;
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -609,51 +687,60 @@ async function update() {
 // 	statistic.startYears.find((y: { startYear: number }) => y.startYear === 2023);
 
 const screenshot = async () => {
-  let element = document.querySelector('#wrapped') as HTMLElement;
-
-  if (element !== null) {
-    domToBlob(element, {
-      backgroundColor: transparency ? 'transparent' : lightTheme ? '#edf1f5' : '#0b1622',
-      quality: 1,
-      scale: 2,
-      fetch: {
-        requestInit: {
-          mode: 'cors'
-        },
-        bypassingCache: true
-      }
-    }).then((blob) => {
-      const downloadWrapper = document.createElement('a');
-      // const wrappedImageButton = document.getElementById(
-      // 	'wrapped-image-download'
-      // ) as HTMLAnchorElement;
-      const image = document.createElement('img');
-      const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
-
-      // downloadWrapper.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
-      downloadWrapper.href = object;
-      downloadWrapper.target = '_blank';
-      image.src = object;
-
-      downloadWrapper.appendChild(image);
-
-      // if (wrappedImageButton !== null) {
-      // 	wrappedImageButton.href = object;
-      // }
-
-      const wrappedFinal = document.getElementById('wrapped-final');
-
-      if (wrappedFinal !== null) {
-        wrappedFinal.innerHTML = '';
-
-        wrappedFinal.appendChild(downloadWrapper);
-
-        generated = true;
-      }
-
-      downloadWrapper.click();
-    });
-  }
+	let element = document.querySelector("#wrapped") as HTMLElement;
+
+	if (element !== null) {
+		domToBlob(element, {
+			backgroundColor: transparency
+				? "transparent"
+				: lightTheme
+					? "#edf1f5"
+					: "#0b1622",
+			quality: 1,
+			scale: 2,
+			fetch: {
+				requestInit: {
+					mode: "cors",
+				},
+				bypassingCache: true,
+			},
+		}).then((blob) => {
+			const downloadWrapper = document.createElement("a");
+			// const wrappedImageButton = document.getElementById(
+			// 	'wrapped-image-download'
+			// ) as HTMLAnchorElement;
+			const image = document.createElement("img");
+			const object = (
+				window.URL ||
+				window.webkitURL ||
+				window ||
+				{}
+			).createObjectURL(blob);
+
+			// downloadWrapper.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
+			downloadWrapper.href = object;
+			downloadWrapper.target = "_blank";
+			image.src = object;
+
+			downloadWrapper.appendChild(image);
+
+			// if (wrappedImageButton !== null) {
+			// 	wrappedImageButton.href = object;
+			// }
+
+			const wrappedFinal = document.getElementById("wrapped-final");
+
+			if (wrappedFinal !== null) {
+				wrappedFinal.innerHTML = "";
+
+				wrappedFinal.appendChild(downloadWrapper);
+
+				generated = true;
+			}
+
+			downloadWrapper.click();
+		});
+	}
 };
 
 // const abbreviate = (string: string, maxLength = 40, enabled = true) => {
@@ -669,38 +756,46 @@ const screenshot = async () => {
 // };
 
 const submitExcludedKeywords = () => {
-  if (excludedKeywordsInput.length <= 0 && excludedKeywords.length > 0) {
-    animeList = originalAnimeList;
-    mangaList = originalMangaList;
-    excludedKeywords = [];
-  } else if (excludedKeywordsInput.length >= 0 && excludedKeywords.length <= 0) {
-    originalAnimeList = animeList;
-    originalMangaList = mangaList;
-  }
-
-  if (excludedKeywordsInput.length > 0)
-    excludedKeywords = excludedKeywordsInput
-      .split(',')
-      .map((k) => k.trim())
-      .filter((k) => k.length > 0);
+	if (excludedKeywordsInput.length <= 0 && excludedKeywords.length > 0) {
+		animeList = originalAnimeList;
+		mangaList = originalMangaList;
+		excludedKeywords = [];
+	} else if (
+		excludedKeywordsInput.length >= 0 &&
+		excludedKeywords.length <= 0
+	) {
+		originalAnimeList = animeList;
+		originalMangaList = mangaList;
+	}
+
+	if (excludedKeywordsInput.length > 0)
+		excludedKeywords = excludedKeywordsInput
+			.split(",")
+			.map((k) => k.trim())
+			.filter((k) => k.length > 0);
 };
 
 function excludeKeywords(media: Media[]) {
-  if (excludedKeywords.length <= 0) return media;
-
-  return media.filter((m) => {
-    for (const keyword of excludedKeywords) {
-      if (m.title.english?.toLowerCase().includes(keyword.toLowerCase())) return false;
-      if (m.title.romaji?.toLowerCase().includes(keyword.toLowerCase())) return false;
-      if (m.title.native?.toLowerCase().includes(keyword.toLowerCase())) return false;
-    }
-
-    return true;
-  });
+	if (excludedKeywords.length <= 0) return media;
+
+	return media.filter((m) => {
+		for (const keyword of excludedKeywords) {
+			if (m.title.english?.toLowerCase().includes(keyword.toLowerCase()))
+				return false;
+			if (m.title.romaji?.toLowerCase().includes(keyword.toLowerCase()))
+				return false;
+			if (m.title.native?.toLowerCase().includes(keyword.toLowerCase()))
+				return false;
+		}
+
+		return true;
+	});
 }
 
 const pruneFullYear = async () => {
-  await database.activities.bulkDelete((await database.activities.toArray()).map((m) => m.page));
+	await database.activities.bulkDelete(
+		(await database.activities.toArray()).map((m) => m.page),
+	);
 };
 
 // const mergeArraySort = (a: any, b: any, mode: 'tags' | 'genres') => {
diff --git a/src/lib/Tools/Wrapped/Top/Activity.svelte b/src/lib/Tools/Wrapped/Top/Activity.svelte
index fdfd90e0..ce0b1b00 100644
--- a/src/lib/Tools/Wrapped/Top/Activity.svelte
+++ b/src/lib/Tools/Wrapped/Top/Activity.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import type { ActivityHistoryEntry } from '$lib/Data/AniList/activity';
-import identity from '$stores/identity';
-import type { Wrapped } from '$lib/Data/AniList/wrapped';
-import proxy from '$lib/Utility/proxy';
+import type { ActivityHistoryEntry } from "$lib/Data/AniList/activity";
+import identity from "$stores/identity";
+import type { Wrapped } from "$lib/Data/AniList/wrapped";
+import proxy from "$lib/Utility/proxy";
 
 export let wrapped: Wrapped;
 export let year: number;
diff --git a/src/lib/Tools/Wrapped/Top/Anime.svelte b/src/lib/Tools/Wrapped/Top/Anime.svelte
index 6caf4b8a..60ad9f52 100644
--- a/src/lib/Tools/Wrapped/Top/Anime.svelte
+++ b/src/lib/Tools/Wrapped/Top/Anime.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Media } from '$lib/Data/AniList/media';
+import type { Media } from "$lib/Data/AniList/media";
 
 export let minutesWatched: number;
 export let animeList: Media[] | undefined;
diff --git a/src/lib/Tools/Wrapped/Top/Manga.svelte b/src/lib/Tools/Wrapped/Top/Manga.svelte
index 9fa4ab00..2861b5e4 100644
--- a/src/lib/Tools/Wrapped/Top/Manga.svelte
+++ b/src/lib/Tools/Wrapped/Top/Manga.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Media } from '$lib/Data/AniList/media';
-import { estimatedDayReading } from '$lib/Media/Manga/time';
+import type { Media } from "$lib/Data/AniList/media";
+import { estimatedDayReading } from "$lib/Media/Manga/time";
 
 export let mangaList: Media[] | undefined;
 export let chapters: number;
diff --git a/src/lib/Tools/Wrapped/wrapped.css b/src/lib/Tools/Wrapped/wrapped.css
index 72ea09fc..e965f873 100644
--- a/src/lib/Tools/Wrapped/wrapped.css
+++ b/src/lib/Tools/Wrapped/wrapped.css
@@ -2,129 +2,129 @@
 @import url("https://proxy.due.moe/?q=https://fonts.googleapis.com/css?family=Overpass:400,600,700,800");
 
 .categories-grid {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 1.5em;
-  column-gap: 1.5em;
-  padding: 2%;
-  justify-content: center;
-  font-family:
-    Roboto,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
-  background-color: #0b1622;
+	display: flex;
+	flex-wrap: wrap;
+	row-gap: 1.5em;
+	column-gap: 1.5em;
+	padding: 2%;
+	justify-content: center;
+	font-family:
+		Roboto,
+		-apple-system,
+		BlinkMacSystemFont,
+		Segoe UI,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		Fira Sans,
+		Droid Sans,
+		Helvetica Neue,
+		sans-serif;
+	background-color: #0b1622;
 }
 
 .categories-grid b {
-  font-family:
-    Overpass,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
-  font-weight: 600;
+	font-family:
+		Overpass,
+		-apple-system,
+		BlinkMacSystemFont,
+		Segoe UI,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		Fira Sans,
+		Droid Sans,
+		Helvetica Neue,
+		sans-serif;
+	font-weight: 600;
 }
 
 .category-grid,
 .image-grid {
-  background-color: #151f2e;
-  border-radius: 4px;
-  color: rgb(159, 173, 189);
+	background-color: #151f2e;
+	border-radius: 4px;
+	color: rgb(159, 173, 189);
 }
 
 li::marker {
-  color: rgb(159, 173, 189) !important;
+	color: rgb(159, 173, 189) !important;
 }
 
 .pure-category,
 .avatar-grid {
-  padding: 1.5%;
+	padding: 1.5%;
 }
 
 .category-grid {
-  display: grid;
+	display: grid;
 }
 
 .image-grid {
-  display: flex;
-  column-gap: 1em;
-  flex-wrap: wrap;
+	display: flex;
+	column-gap: 1em;
+	flex-wrap: wrap;
 }
 
 .image-grid img {
-  width: 6em;
-  height: auto;
-  border-radius: 3px;
+	width: 6em;
+	height: auto;
+	border-radius: 3px;
 }
 
 .categories-grid a {
-  text-decoration: none;
-  color: unset;
+	text-decoration: none;
+	color: unset;
 }
 
 .transparent .categories-grid {
-  background-color: transparent !important;
+	background-color: transparent !important;
 }
 
 .light-theme .categories-grid {
-  background-color: #edf1f5;
+	background-color: #edf1f5;
 }
 
 .light-theme .category-grid {
-  background-color: #fafafa;
-  color: rgb(92, 114, 138);
+	background-color: #fafafa;
+	color: rgb(92, 114, 138);
 }
 
 .light-theme .image-grid {
-  background-color: #fafafa;
-  color: rgb(92, 114, 138);
+	background-color: #fafafa;
+	color: rgb(92, 114, 138);
 }
 
 ol {
-  margin: 0 !important;
+	margin: 0 !important;
 }
 
 #watermark {
-  color: rgb(61, 180, 242);
+	color: rgb(61, 180, 242);
 }
 
 #wrapped-final {
-  height: auto;
-  width: 50%;
+	height: auto;
+	width: 50%;
 }
 
 #list-container {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: start;
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	align-items: start;
 }
 
 #list-container > .card {
-  overflow-x: auto;
-  min-width: 0;
+	overflow-x: auto;
+	min-width: 0;
 }
 
 .list {
-  flex-grow: 1;
-  flex-basis: 1%;
-  min-width: 0;
+	flex-grow: 1;
+	flex-basis: 1%;
+	min-width: 0;
 }
 
 #wrapped {
-  overflow-y: scroll;
+	overflow-y: scroll;
 }