refactor(MediaRoulette): Use Svelte 5 syntax

1 files changed, 15 insertions, 13 deletions

diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index d4323476..4b498d4f 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -5,17 +5,21 @@
   import settings from '$stores/settings';
   import { mediaTitle } from './mediaTitle';
 
-  export let media: Media[];
-  export let type: 'anime' | 'manga';
-  export let onClose: () => void;
-  export let spinDuration = 2;
-
-  let isSpinning = false;
-  let selectedIndex = 0;
-  let displayIndex = 0;
-  let spinTimeout: ReturnType<typeof setTimeout> | null = null;
-  let showResult = false;
-  let isClosing = false;
+  interface Props {
+    media: Media[];
+    type: 'anime' | 'manga';
+    onClose: () => void;
+    spinDuration?: number;
+  }
+
+  let { media, type, onClose, spinDuration = 2 }: Props = $props();
+  let isSpinning = $state(false);
+  let selectedIndex = $state(0);
+  let displayIndex = $state(0);
+  let spinTimeout: ReturnType<typeof setTimeout> | null = $state(null);
+  let showResult = $state(false);
+  let isClosing = $state(false);
+  let currentMedia = $derived(media[displayIndex]);
 
   const startRoulette = () => {
     if (media.length === 0 || isSpinning) return;
@@ -73,8 +77,6 @@
     setTimeout(() => onClose(), 200);
   };
 
-  $: currentMedia = media[displayIndex];
-
   const handleOverlayClick = (e: MouseEvent) => {
     if (e.target === e.currentTarget) handleClose();
   };