2 files changed, 31 insertions, 13 deletions
diff --git a/src/lib/Hololive/Lives.svelte b/src/lib/Hololive/Lives.svelte
index 9e762df9..0f566df4 100644
--- a/src/lib/Hololive/Lives.svelte
+++ b/src/lib/Hololive/Lives.svelte
@@ -4,10 +4,19 @@
   import type { Live, ParseResult } from './hololive';
   import Stream from './Stream.svelte';
 
-  export let schedule: ParseResult;
-  export let pinnedStreams: string[];
-  export let getPinnedStreams: () => void;
-  export let filter: string | undefined;
+  interface Props {
+    schedule: ParseResult;
+    pinnedStreams: string[];
+    getPinnedStreams: () => void;
+    filter: string | undefined;
+  }
+
+  let {
+    schedule,
+    pinnedStreams,
+    getPinnedStreams,
+    filter
+  }: Props = $props();
 
   const pinStream = (streamer: string) =>
     fetch(root(`/api/preferences/pin?stream=${encodeURIComponent(streamer)}`), {
@@ -17,7 +26,7 @@
       }
     }).then(getPinnedStreams);
 
-  $: categorisedStreams = schedule.lives
+  let categorisedStreams = $derived(schedule.lives
     .filter((live) => (filter ? live.streamer === filter : true))
     .sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime())
     .sort((a, b) => {
@@ -55,7 +64,7 @@
         return acc;
       },
       { live: [], upcoming: [], ended: [] }
-    );
+    ));
 </script>
 
 {#if schedule.lives.length === 0}
@@ -68,7 +77,7 @@
   {/each}
 </div>
 
-<p />
+<p></p>
 
 <div class="container">
   {#each categorisedStreams.upcoming as live}
@@ -76,7 +85,7 @@
   {/each}
 </div>
 
-<p />
+<p></p>
 
 <div class="container">
   {#each categorisedStreams.ended as live}
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
index 12681acb..9f2b5e7b 100644
--- a/src/lib/Hololive/Stream.svelte
+++ b/src/lib/Hololive/Stream.svelte
@@ -5,10 +5,19 @@
   import locale from '$stores/locale';
   import Icon from '@iconify/svelte';
 
-  export let live: any;
-  export let pinStream: (streamer: string) => void;
-  export let pinnedStreams: string[];
-  export let icon: string;
+  interface Props {
+    live: any;
+    pinStream: (streamer: string) => void;
+    pinnedStreams: string[];
+    icon: string;
+  }
+
+  let {
+    live,
+    pinStream,
+    pinnedStreams,
+    icon
+  }: Props = $props();
 </script>
 
 <div class="stream card">
@@ -16,7 +25,7 @@
     <div class="pin-icon">
       <a
         href={'#'}
-        on:click={(e) => {
+        onclick={(e) => {
           e.preventDefault();
           pinStream(live.streamer);
         }}