feat: update to svelte 5svelte-5

13 files changed, 311 insertions, 189 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 08583d7c..8b105df5 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -14,26 +14,41 @@
   import subsPlease from '$stores/subsPlease';
   import identity from '$stores/identity';
 
-  export let endTime: number;
-  export let cleanMedia: (
+  interface Props {
+    endTime: number;
+    cleanMedia: (
     media: Media[],
     displayUnresolved: boolean,
     subsPlease: SubsPlease | null,
     plannedOnly?: boolean
   ) => Media[];
-  export let animeLists: Promise<Media[]>;
-  export let user: AniListAuthorisation;
-  export let title: any;
-  export let completed = false;
-  export let plannedOnly = false;
-  export let upcoming = false;
-  export let notYetReleased = false;
-  export let dummy = false;
+    animeLists: Promise<Media[]>;
+    user: AniListAuthorisation;
+    title: any;
+    completed?: boolean;
+    plannedOnly?: boolean;
+    upcoming?: boolean;
+    notYetReleased?: boolean;
+    dummy?: boolean;
+  }
 
-  let lastUpdatedMedia = -1;
-  let previousAnimeList: Media[];
-  let pendingUpdate: number | null = null;
-  let lastListSize = 8;
+  let {
+    endTime,
+    cleanMedia,
+    animeLists = $bindable(),
+    user,
+    title,
+    completed = false,
+    plannedOnly = false,
+    upcoming = false,
+    notYetReleased = false,
+    dummy = false
+  }: Props = $props();
+
+  let lastUpdatedMedia = $state(-1);
+  let previousAnimeList: Media[] = $state();
+  let pendingUpdate: number | null = $state(null);
+  let lastListSize = $state(8);
 
   onMount(() => {
     if (browser) {
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 0220a366..b088964e 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -16,18 +16,35 @@
   import CleanGrid from '$lib/List/CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
 
-  export let media: Media[];
-  export let title: any;
-  export let animeLists: Promise<Media[]>;
-  export let user: AniListAuthorisation;
-  export let endTime: number;
-  export let lastUpdatedMedia: number;
-  export let completed = false;
-  export let previousAnimeList: Media[];
-  export let pendingUpdate: number | null;
-  export let upcoming = false;
-  export let notYetReleased = false;
-  export let dummy = false;
+  interface Props {
+    media: Media[];
+    title: any;
+    animeLists: Promise<Media[]>;
+    user: AniListAuthorisation;
+    endTime: number;
+    lastUpdatedMedia: number;
+    completed?: boolean;
+    previousAnimeList: Media[];
+    pendingUpdate: number | null;
+    upcoming?: boolean;
+    notYetReleased?: boolean;
+    dummy?: boolean;
+  }
+
+  let {
+    media = $bindable(),
+    title,
+    animeLists = $bindable(),
+    user,
+    endTime,
+    lastUpdatedMedia = $bindable(),
+    completed = false,
+    previousAnimeList = $bindable(),
+    pendingUpdate = $bindable(),
+    upcoming = false,
+    notYetReleased = false,
+    dummy = false
+  }: Props = $props();
 
   let keyCacher: NodeJS.Timeout;
   let totalEpisodeDueCount = media
@@ -109,60 +126,64 @@
 />
 
 {#if media.length === 0}
-  No anime to display. <button on:click={() => (animeLists = cleanCache(user, $identity))}>
+  No anime to display. <button onclick={() => (animeLists = cleanCache(user, $identity))}>
     Force refresh
   </button>
 {/if}
 
 {#if $settings.displayCoverModeAnime}
   <CleanGrid {media} {dummy} type="anime" {upcoming} {notYetReleased}>
-    <div slot="title" let:title={anime} let:progress>
-      {#if !upcoming && !notYetReleased}
-        {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-        <button
-          class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
-          style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-          on:click={() => increment(anime, progress)}>+</button
-        >
-        {#if !completed || dummy}
-          [{anime.nextAiringEpisode?.episode === -1
-            ? '?'
-            : (anime.nextAiringEpisode?.episode || 1) - 1}]
-          <br />
-          <AiringTime originalAnime={anime} />
+    {#snippet title({ title: anime, progress })}
+        <div   >
+        {#if !upcoming && !notYetReleased}
+          {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+          <button
+            class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+            style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+            onclick={() => increment(anime, progress)}>+</button
+          >
+          {#if !completed || dummy}
+            [{anime.nextAiringEpisode?.episode === -1
+              ? '?'
+              : (anime.nextAiringEpisode?.episode || 1) - 1}]
+            <br />
+            <AiringTime originalAnime={anime} />
+          {/if}
+        {:else}
+          <AiringTime originalAnime={anime} upcoming={true} />
         {/if}
-      {:else}
-        <AiringTime originalAnime={anime} upcoming={true} />
-      {/if}
-    </div>
+      </div>
+      {/snippet}
   </CleanGrid>
 {:else}
   <CleanList {media} type="anime" {upcoming} {notYetReleased} {lastUpdatedMedia}>
-    <span slot="information" let:title={anime} let:progress>
-      {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
-        <span class="opaque">|</span>
-      {/if}
-      {#if !upcoming || notYetReleased}
-        <!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-        {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-        <button
-          class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
-          style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-          on:click={() => increment(anime, progress)}>+</button
-        >
-        {#if !completed}
-          [{anime.nextAiringEpisode?.episode === -1
-            ? '?'
-            : (anime.nextAiringEpisode?.episode || 1) - 1}]
+    {#snippet information({ title: anime, progress })}
+        <span   >
+        {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
+          <span class="opaque">|</span>
+        {/if}
+        {#if !upcoming || notYetReleased}
+          <!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+          {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+          <button
+            class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+            style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+            onclick={() => increment(anime, progress)}>+</button
+          >
+          {#if !completed}
+            [{anime.nextAiringEpisode?.episode === -1
+              ? '?'
+              : (anime.nextAiringEpisode?.episode || 1) - 1}]
+            <span class:countdown={$settings.displayCountdownRightAligned}>
+              <AiringTime originalAnime={anime} />
+            </span>
+          {/if}
+        {:else}
           <span class:countdown={$settings.displayCountdownRightAligned}>
-            <AiringTime originalAnime={anime} />
+            <AiringTime originalAnime={anime} upcoming={true} />
           </span>
         {/if}
-      {:else}
-        <span class:countdown={$settings.displayCountdownRightAligned}>
-          <AiringTime originalAnime={anime} upcoming={true} />
-        </span>
-      {/if}
-    </span>
+      </span>
+      {/snippet}
   </CleanList>
 {/if}
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 76ec7207..a8cb6fd1 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -11,18 +11,22 @@
   import identity from '$stores/identity';
   import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
 
-  export let user: AniListAuthorisation = {
+  interface Props {
+    user?: AniListAuthorisation;
+    dummy?: boolean;
+  }
+
+  let { user = {
     accessToken: '',
     refreshToken: '',
     expiresIn: 0,
     tokenType: ''
-  };
-  export let dummy = false;
+  }, dummy = false }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
-  let animeLists: Promise<Media[]>;
+  let animeLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
+  let endTime: number = $state();
 
   onMount(async () => {
     startTime = performance.now();
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index 1453baeb..bbae319a 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -12,12 +12,16 @@
   import locale from '$stores/locale';
   import identity from '$stores/identity';
 
-  export let user: AniListAuthorisation;
+  interface Props {
+    user: AniListAuthorisation;
+  }
+
+  let { user }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
-  let animeLists: Promise<Media[]>;
+  let animeLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
+  let endTime: number = $state();
 
   const keyCacher = setInterval(() => {
     startTime = performance.now();
diff --git a/src/lib/List/Anime/DueIndexColumn.svelte b/src/lib/List/Anime/DueIndexColumn.svelte
index 61f2a178..0f20a2a1 100644
--- a/src/lib/List/Anime/DueIndexColumn.svelte
+++ b/src/lib/List/Anime/DueIndexColumn.svelte
@@ -6,8 +6,12 @@
   import ListTitle from '../ListTitle.svelte';
   import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
 
-  export let userIdentity: { id: number };
-  export let user: AniListAuthorisation;
+  interface Props {
+    userIdentity: { id: number };
+    user: AniListAuthorisation;
+  }
+
+  let { userIdentity, user }: Props = $props();
 </script>
 
 <details open={!$settings.displayAnimeCollapsed} class="list list-due">
diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte
index 1f701d79..2c9baab5 100644
--- a/src/lib/List/Anime/PlaceholderList.svelte
+++ b/src/lib/List/Anime/PlaceholderList.svelte
@@ -4,8 +4,12 @@
   import ListTitle from '../ListTitle.svelte';
   import type { Title } from '../mediaTitle';
 
-  export let title: Title;
-  export let count = 8;
+  interface Props {
+    title: Title;
+    count?: number;
+  }
+
+  let { title, count = 8 }: Props = $props();
 </script>
 
 <ListTitle {title} />
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index 7b01af86..4957cd45 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { mediaListCollection, Type, type Media } from '$lib/Data/AniList/media';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import { onMount } from 'svelte';
@@ -13,12 +15,16 @@
   import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
   import revalidateAnime from '$stores/revalidateAnime';
 
-  export let user: AniListAuthorisation;
+  interface Props {
+    user: AniListAuthorisation;
+  }
+
+  let { user }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
-  let animeLists: Promise<Media[]>;
+  let animeLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
+  let endTime: number = $state();
 
   onMount(async () => {
     startTime = performance.now();
@@ -74,7 +80,7 @@
     return upcomingAnime;
   };
 
-  $: {
+  run(() => {
     if ($revalidateAnime) {
       $revalidateAnime = false;
       $lastPruneTimes.anime = -1;
@@ -83,7 +89,7 @@
         notificationType: 'Upcoming Episodes'
       });
     }
-  }
+  });
 </script>
 
 <AnimeList
@@ -96,7 +102,7 @@
 />
 
 {#if $settings.displayPlannedAnime}
-  <p />
+  <p></p>
 
   <AnimeList
     {endTime}
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index ec93a685..774303aa 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -7,11 +7,13 @@
   import { mediaTitle } from './mediaTitle';
   import './covers.css';
 
-  export let media: Media[];
-  export let dummy = false;
-  export let type: 'anime' | 'manga';
-  export let upcoming = false;
-  export let notYetReleased = false;
+  let {
+    media = [] as Media[],
+    dummy = false,
+    type = 'anime' as 'anime' | 'manga',
+    upcoming = false,
+    notYetReleased = false
+  } = $props();
 
   let uniqueID = new Date().getTime();
 </script>
diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
index 47811932..46946973 100644
--- a/src/lib/List/CleanList.svelte
+++ b/src/lib/List/CleanList.svelte
@@ -5,11 +5,23 @@
   import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
   import settings from '$stores/settings';
 
-  export let media: Media[];
-  export let type: 'anime' | 'manga';
-  export let upcoming = false;
-  export let notYetReleased = false;
-  export let lastUpdatedMedia: number;
+  interface Props {
+    media: Media[];
+    type: 'anime' | 'manga';
+    upcoming?: boolean;
+    notYetReleased?: boolean;
+    lastUpdatedMedia: number;
+    information?: import('svelte').Snippet<[any]>;
+  }
+
+  let {
+    media,
+    type,
+    upcoming = false,
+    notYetReleased = false,
+    lastUpdatedMedia,
+    information
+  }: Props = $props();
 </script>
 
 <ul>
@@ -32,7 +44,7 @@
               href={$settings.displayCopyMediaTitleNotLink
                 ? '#'
                 : outboundLink(title, type, $settings.displayOutboundLinksTo)}
-              on:click={(e) => {
+              onclick={(e) => {
                 if ($settings.displayCopyMediaTitleNotLink) {
                   e.preventDefault();
 
@@ -54,7 +66,7 @@
             [<a href={`https://anilist.co/${type}/${title.id}/social`} target="_blank">S</a>]
           {/if}
 
-          <slot name="information" {progress} {title} />
+          {@render information?.({ progress, title, })}
         </span>
       </li>
     {/if}
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index 21013b52..cccc5731 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -2,15 +2,28 @@
   import tooltip from '$lib/Tooltip/tooltip';
   import type { Title } from './mediaTitle';
 
-  export let time: number | undefined = undefined;
-  export let count = -1337;
-  export let title: Title = {
+  interface Props {
+    time?: number | undefined;
+    count?: any;
+    title?: Title;
+    progress?: undefined | number;
+    hideTime?: boolean;
+    hideCount?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    time = undefined,
+    count = -1337,
+    title = {
     title: 'Media List',
     hint: 'This is a media list.'
-  };
-  export let progress: undefined | number = undefined;
-  export let hideTime = false;
-  export let hideCount = false;
+  },
+    progress = undefined,
+    hideTime = false,
+    hideCount = false,
+    children
+  }: Props = $props();
 </script>
 
 <summary>
@@ -23,7 +36,7 @@
   {#if !hideTime}
     <small class="opaque">{time ? time.toFixed(3) : '...'}s</small>
   {/if}
-  <slot />
+  {@render children?.()}
   {#if progress !== undefined}
     <button class="badge unclickable-button button-badge badge-info">
       {progress.toFixed(0)}%
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index dfaa187c..ec1a3d83 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -14,22 +14,37 @@
   import CleanGrid from '../CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
 
-  export let media: Media[];
-  export let cleanCache: () => void;
-  export let endTime: number;
-  export let lastUpdatedMedia: number;
-  export let updateMedia: (
+  interface Props {
+    media: Media[];
+    cleanCache: () => void;
+    endTime: number;
+    lastUpdatedMedia: number;
+    updateMedia: (
     id: number,
     progress: number | undefined,
     media: Media[]
   ) => Promise<void>;
-  export let pendingUpdate: number | null;
-  export let due: boolean;
-  export let rateLimited: boolean;
-  export let authorised: boolean;
-  export let dummy = false;
+    pendingUpdate: number | null;
+    due: boolean;
+    rateLimited: boolean;
+    authorised: boolean;
+    dummy?: boolean;
+  }
 
-  let serviceStatusResponse: Promise<Response>;
+  let {
+    media,
+    cleanCache,
+    endTime,
+    lastUpdatedMedia,
+    updateMedia,
+    pendingUpdate,
+    due,
+    rateLimited,
+    authorised,
+    dummy = false
+  }: Props = $props();
+
+  let serviceStatusResponse: Promise<Response> = $state();
 
   onMount(() => {
     serviceStatusResponse = fetch(proxy('https://api.mangadex.org/ping'));
@@ -58,7 +73,7 @@
       <button
         class="small-button"
         title="Force a full refresh"
-        on:click={cleanCache}
+        onclick={cleanCache}
         data-umami-event="Force Refresh Manga">Refresh</button
       >
     {/if}
@@ -90,18 +105,18 @@
 
 {#if media.length === 0 && !rateLimited}
   {#if rateLimited}
-    <p />
+    <p></p>
   {/if}
 
   <p>
-    No manga to display. <button on:click={cleanCache} data-umami-event="Force Refresh No Manga"
+    No manga to display. <button onclick={cleanCache} data-umami-event="Force Refresh No Manga"
       >Force refresh</button
     >
   </p>
 
   <span>
     Don't read manga? <button
-      on:click={() => ($settings.disableManga = true)}
+      onclick={() => ($settings.disableManga = true)}
       data-umami-event="Disable No Manga">Hide the manga panel</button
     >
     You can re-enable it later in the <a href={root('/settings')}>Settings</a>.
@@ -110,57 +125,61 @@
 
 {#if $settings.displayCoverModeManga || dummy}
   <CleanGrid {media} {dummy} type="manga">
-    <div slot="title" let:title={manga} let:progress>
-      {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-        <span class="opaque">/{manga.chapters || '?'}</span>
-      {/if}
-      <button
-        class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-        style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-        on:click={() => increment(manga)}
-      >
-        +
-      </button>
-      {#if due || Math.floor(manga.episodes) < manga.chapters}
-        [{manga.episodes || '?'}]
-        {#await volumeCount(manga) then volumes}
-          {@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+    {#snippet title({ title: manga, progress })}
+        <div   >
+        {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+          <span class="opaque">/{manga.chapters || '?'}</span>
+        {/if}
+        <button
+          class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+          style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+          onclick={() => increment(manga)}
+        >
+          +
+        </button>
+        {#if due || Math.floor(manga.episodes) < manga.chapters}
+          [{manga.episodes || '?'}]
+          {#await volumeCount(manga) then volumes}
+            {@const volumeProgress = manga.mediaListEntry?.progressVolumes}
 
-          {#if volumes !== null && (volumeProgress || 0) < volumes}
-            <span style="color: lightcoral;">
-              Vol. {volumeProgress} &#8594; {volumes}
-            </span>
-          {/if}
-        {/await}
-      {/if}
-    </div>
+            {#if volumes !== null && (volumeProgress || 0) < volumes}
+              <span style="color: lightcoral;">
+                Vol. {volumeProgress} &#8594; {volumes}
+              </span>
+            {/if}
+          {/await}
+        {/if}
+      </div>
+      {/snippet}
   </CleanGrid>
 {:else}
   <CleanList {media} type="manga" {lastUpdatedMedia}>
-    <span slot="information" let:title={manga} let:progress>
-      <span class="opaque">|</span>
-      {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-        <span class="opaque">/{manga.chapters || '?'}</span>
-      {/if}
-      <button
-        class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-        style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-        on:click={() => increment(manga)}
-      >
-        +
-      </button>
-      {#if due || Math.floor(manga.episodes) < manga.chapters}
-        [{manga.episodes || '?'}]
-        {#await volumeCount(manga) then volumes}
-          {@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+    {#snippet information({ title: manga, progress })}
+        <span   >
+        <span class="opaque">|</span>
+        {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+          <span class="opaque">/{manga.chapters || '?'}</span>
+        {/if}
+        <button
+          class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+          style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+          onclick={() => increment(manga)}
+        >
+          +
+        </button>
+        {#if due || Math.floor(manga.episodes) < manga.chapters}
+          [{manga.episodes || '?'}]
+          {#await volumeCount(manga) then volumes}
+            {@const volumeProgress = manga.mediaListEntry?.progressVolumes}
 
-          {#if volumes !== null && (volumeProgress || 0) < volumes}
-            <span style="color: lightcoral;">
-              Vol. {volumeProgress} &#8594; {volumes}
-            </span>
-          {/if}
-        {/await}
-      {/if}
-    </span>
+            {#if volumes !== null && (volumeProgress || 0) < volumes}
+              <span style="color: lightcoral;">
+                Vol. {volumeProgress} &#8594; {volumes}
+              </span>
+            {/if}
+          {/await}
+        {/if}
+      </span>
+      {/snippet}
   </CleanList>
 {/if}
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index 1303419f..107ff47d 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -21,28 +21,37 @@
   import { browser } from '$app/environment';
   import identity from '$stores/identity';
 
-  export let user: AniListAuthorisation = {
+  interface Props {
+    user?: AniListAuthorisation;
+    displayUnresolved: boolean;
+    due: boolean;
+    dummy?: any;
+  }
+
+  let {
+    user = {
     accessToken: '',
     refreshToken: '',
     expiresIn: 0,
     tokenType: ''
-  };
-  export let displayUnresolved: boolean;
-  export let due: boolean;
-  export let dummy = $settings.debugDummyLists || false;
+  },
+    displayUnresolved,
+    due,
+    dummy = $settings.debugDummyLists || false
+  }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
   const authorised = authorisedJson.includes($identity.id);
-  let mangaLists: Promise<Media[]>;
+  let mangaLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
-  let lastUpdatedMedia = -1;
-  let previousMangaList: Media[];
-  let pendingUpdate: number | null = null;
-  let progress = 0;
-  let rateLimited = false;
-  let forceFlag = false;
-  let lastListSize = 5;
+  let endTime: number = $state();
+  let lastUpdatedMedia = $state(-1);
+  let previousMangaList: Media[] = $state();
+  let pendingUpdate: number | null = $state(null);
+  let progress = $state(0);
+  let rateLimited = $state(false);
+  let forceFlag = $state(false);
+  let lastListSize = $state(5);
 
   const keyCacher = setInterval(() => {
     startTime = performance.now();
@@ -270,7 +279,7 @@
           <button
             data-umami-event="Force Refresh Manga"
             title="Force a full refresh"
-            on:click={() => {
+            onclick={() => {
               cleanCache();
 
               forceFlag = true;
@@ -317,7 +326,7 @@
             <button
               data-umami-event="Force Refresh Manga"
               title="Force a full refresh"
-              on:click={() => {
+              onclick={() => {
                 cleanCache();
 
                 forceFlag = true;
@@ -349,7 +358,7 @@
           <button
             data-umami-event="Force Refresh Manga"
             title="Force a full refresh"
-            on:click={() => {
+            onclick={() => {
               cleanCache();
 
               forceFlag = true;
diff --git a/src/lib/List/MediaTitleDisplay.svelte b/src/lib/List/MediaTitleDisplay.svelte
index 6a886704..0fd7cf17 100644
--- a/src/lib/List/MediaTitleDisplay.svelte
+++ b/src/lib/List/MediaTitleDisplay.svelte
@@ -6,10 +6,19 @@
   import LZString from 'lz-string';
   import * as wanakana from 'wanakana';
 
-  export let title: MediaTitle;
-  export let abbreviate = false;
-  export let abbreviateTo = 20;
-  export let tooltip = false;
+  interface Props {
+    title: MediaTitle;
+    abbreviate?: boolean;
+    abbreviateTo?: number;
+    tooltip?: boolean;
+  }
+
+  let {
+    title,
+    abbreviate = false,
+    abbreviateTo = 20,
+    tooltip = false
+  }: Props = $props();
 
   const compressToBase64 = (string: string) => LZString.compressToBase64(string);
 </script>