refactor:(lib): Migrate another 25 components to Svelte 5 syntax

3 files changed, 33 insertions, 13 deletions

diff --git a/src/lib/Tools/Wrapped/ActivityHistory.svelte b/src/lib/Tools/Wrapped/ActivityHistory.svelte
index 3da401d4..98056673 100644
--- a/src/lib/Tools/Wrapped/ActivityHistory.svelte
+++ b/src/lib/Tools/Wrapped/ActivityHistory.svelte
@@ -3,10 +3,17 @@
   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';
+  let {
+    user,
+    activities,
+    year,
+    activityHistoryPosition
+  }: {
+    user: AniListAuthorisation;
+    activities: ActivityHistoryEntry[];
+    year: number;
+    activityHistoryPosition: 'TOP' | 'BELOW_TOP' | 'ORIGINAL';
+  } = $props();
 </script>
 
 <div
diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte
index 78b89e36..85b16ca8 100644
--- a/src/lib/Tools/Wrapped/MediaExtras.svelte
+++ b/src/lib/Tools/Wrapped/MediaExtras.svelte
@@ -2,10 +2,17 @@
   import type { TopMedia } from '$lib/Data/AniList/wrapped';
   import proxy from '$lib/Utility/proxy';
 
-  export let topMedia: TopMedia;
-  export let updateWidth: () => void;
-  export let highestRatedGenreTagPercentage: boolean;
-  export let genreTagTitle: string;
+  let {
+    topMedia,
+    updateWidth,
+    highestRatedGenreTagPercentage,
+    genreTagTitle
+  }: {
+    topMedia: TopMedia;
+    updateWidth: () => void;
+    highestRatedGenreTagPercentage: boolean;
+    genreTagTitle: string;
+  } = $props();
 </script>
 
 <div class="categories-grid" style="padding-top: 0;">
@@ -28,7 +35,7 @@
         <div>
           <b>{genreTagTitle} Genres</b>
           <ol>
-            {#each topMedia.genres as genre}
+            {#each topMedia.genres as genre (genre.genre)}
               <li>
                 <a href={`https://anilist.co/search/anime?genres=${genre.genre}`} target="_blank">
                   {genre.genre}{highestRatedGenreTagPercentage ? `: ${genre.averageScore}%` : ''}
@@ -59,7 +66,7 @@
         <div>
           <b>{genreTagTitle} Tags</b>
           <ol>
-            {#each topMedia.tags as tag}
+            {#each topMedia.tags as tag (tag.tag)}
               <li>
                 <a href={`https://anilist.co/search/anime?genres=${tag.tag}`} target="_blank">
                   {tag.tag}{highestRatedGenreTagPercentage ? `: ${tag.averageScore}%` : ''}
diff --git a/src/lib/Tools/Wrapped/Top/Anime.svelte b/src/lib/Tools/Wrapped/Top/Anime.svelte
index 08df7fd3..3b893641 100644
--- a/src/lib/Tools/Wrapped/Top/Anime.svelte
+++ b/src/lib/Tools/Wrapped/Top/Anime.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
   import type { Media } from '$lib/Data/AniList/media';
 
-  export let minutesWatched: number;
-  export let animeList: Media[] | undefined;
-  export let episodes: number;
+  let {
+    minutesWatched,
+    animeList,
+    episodes
+  }: {
+    minutesWatched: number;
+    animeList: Media[] | undefined;
+    episodes: number;
+  } = $props();
 </script>
 
 <div class="category-grid pure-category category top-category">