frontend: Migrate to Svelte 5

4 files changed, 26 insertions, 15 deletions

diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
index 85dbe39..ffbc8c4 100644
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ b/frontend/src/lib/pills/AssociationPill.svelte
@@ -3,12 +3,13 @@
 
 	type Association = 'artist' | 'circle' | 'world' | 'character';
 
-	export let name: string;
-	export let type: Association;
+	let { name, type }: { name: string; type: Association } = $props();
 </script>
 
 <Pill {name}>
-	<span class={`${type} icon-xs`} slot="icon" />
+	{#snippet icon()}
+		<span class={`${type} icon-xs`}></span>
+	{/snippet}
 </Pill>
 
 <style lang="postcss">
diff --git a/frontend/src/lib/pills/ComicPills.svelte b/frontend/src/lib/pills/ComicPills.svelte
index 671bbf2..45c42fd 100644
--- a/frontend/src/lib/pills/ComicPills.svelte
+++ b/frontend/src/lib/pills/ComicPills.svelte
@@ -3,7 +3,7 @@
 	import AssociationPill from '$lib/pills/AssociationPill.svelte';
 	import TagPill from '$lib/pills/TagPill.svelte';
 
-	export let comic: ComicFragment;
+	let { comic }: { comic: ComicFragment } = $props();
 </script>
 
 <div class="flex flex-col gap-1">
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index 7aa9670..24d617d 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -1,15 +1,22 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
 </script>
 
 <script lang="ts">
-	export let name: string;
-	export let tooltip: string | null | undefined = undefined;
-	export let colour: PillColour = 'zinc';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		name: string;
+		tooltip?: string | null;
+		colour?: PillColour;
+		icon?: Snippet;
+	}
+
+	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
 </script>
 
 <div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}>
-	<slot name="icon" />
+	{@render icon?.()}
 	<span>{name}</span>
 </div>
 
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte
index 60221bd..92d2a0b 100644
--- a/frontend/src/lib/pills/TagPill.svelte
+++ b/frontend/src/lib/pills/TagPill.svelte
@@ -3,11 +3,10 @@
 	import Location from '$lib/icons/Location.svelte';
 	import Male from '$lib/icons/Male.svelte';
 	import Transgender from '$lib/icons/Transgender.svelte';
-	import { SvelteComponent } from 'svelte';
+	import type { Component } from 'svelte';
 	import Pill, { type PillColour } from './Pill.svelte';
 
-	export let name: string;
-	export let description: string | undefined | null = undefined;
+	let { name, description }: { name: string; description?: string | null } = $props();
 
 	let [namespace, tag] = name.split(':');
 
@@ -20,7 +19,7 @@
 		rest: 'zinc'
 	};
 
-	const icons: Record<string, typeof SvelteComponent<Record<string, unknown>>> = {
+	const icons: Record<string, Component> = {
 		female: Female,
 		male: Male,
 		trans: Transgender,
@@ -28,7 +27,7 @@
 	};
 
 	const colour = styles[namespace] ?? styles.rest;
-	const icon = icons[namespace];
+	const Icon = icons[namespace];
 
 	function formatTooltip() {
 		return [name, description].filter((v) => v).join('\n\n');
@@ -36,5 +35,9 @@
 </script>
 
 <Pill name={tag} tooltip={formatTooltip()} {colour}>
-	<svelte:component this={icon} slot="icon" />
+	{#snippet icon()}
+		{#if Icon}
+			<Icon />
+		{/if}
+	{/snippet}
 </Pill>