frontend: Migrate to Svelte 5

1 files changed, 26 insertions, 9 deletions

diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index d209517..21181dc 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import type { ComicFragment, ImageFragment } from '$gql/graphql';
 
 	interface CardDetails {
@@ -24,12 +24,29 @@
 <script lang="ts">
 	import { src } from '$lib/Utils';
 	import Star from '$lib/icons/Star.svelte';
+	import type { Snippet } from 'svelte';
 
-	export let href: string;
-	export let details: CardDetails;
-	export let compact = false;
-	export let coverOnly = false;
-	export let ellipsis = true;
+	interface Props {
+		href: string;
+		details: CardDetails;
+		compact?: boolean;
+		coverOnly?: boolean;
+		ellipsis?: boolean;
+		overlay?: Snippet;
+		children?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		href,
+		details,
+		compact = false,
+		coverOnly = false,
+		ellipsis = true,
+		overlay,
+		children,
+		onclick
+	}: Props = $props();
 </script>
 
 <a
@@ -37,9 +54,9 @@
 	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30"
 	class:compact
 	class:grid-card-cover-only={coverOnly}
-	on:click
+	{onclick}
 >
-	<slot name="overlay" />
+	{@render overlay?.()}
 	{#if details.cover}
 		<img
 			class="h-full w-full object-cover object-[center_top]"
@@ -76,7 +93,7 @@
 			</header>
 
 			<section class="max-h-full grow overflow-auto border-t border-slate-800/80 pt-2 text-xs">
-				<slot />
+				{@render children?.()}
 			</section>
 		</article>
 	{/if}