frontend: Migrate to Svelte 5

1 files changed, 21 insertions, 8 deletions

diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte
index 04d8599..d249cc8 100644
--- a/frontend/src/lib/components/Cardlet.svelte
+++ b/frontend/src/lib/components/Cardlet.svelte
@@ -1,14 +1,27 @@
 <script lang="ts">
 	import type { ComicFilter } from '$gql/graphql';
 	import { href } from '$lib/Navigation';
+	import type { Snippet } from 'svelte';
 
-	export let name: string;
-	export let title: string | null | undefined = undefined;
+	interface Props {
+		name: string;
+		title?: string | null;
+		filter?: keyof ComicFilter;
+		id?: number | string;
+		overlay?: Snippet;
+		onclick: (event: MouseEvent) => void;
+	}
 
-	export let filter: keyof ComicFilter | undefined = undefined;
-	export let id: number | string | undefined = undefined;
+	let {
+		name,
+		title = undefined,
+		filter = undefined,
+		id = undefined,
+		overlay,
+		onclick
+	}: Props = $props();
 
-	const handleAux = (e: MouseEvent) => {
+	const onauxclick = (e: MouseEvent) => {
 		if (filter === undefined || id === undefined || e.button !== 1) return;
 		window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } }));
 	};
@@ -18,10 +31,10 @@
 	type="button"
 	class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20"
 	{title}
-	on:click
-	on:auxclick={handleAux}
+	{onclick}
+	{onauxclick}
 >
-	<slot name="overlay" />
+	{@render overlay?.()}
 	<article class="group h-full grow items-center gap-2 p-2 text-xs">
 		<h2 class="ellipsis-nowrap text-sm font-medium">{name}</h2>
 	</article>