frontend: Migrate to Svelte 5

1 files changed, 12 insertions, 9 deletions

diff --git a/frontend/src/lib/tabs/AddOverlay.svelte b/frontend/src/lib/tabs/AddOverlay.svelte
index b1c98bf..329b259 100644
--- a/frontend/src/lib/tabs/AddOverlay.svelte
+++ b/frontend/src/lib/tabs/AddOverlay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { updateComics } from '$gql/Mutations';
 	import { UpdateMode } from '$gql/graphql';
-	import { getSelectionContext } from '$lib/Selection';
+	import { updateComics } from '$gql/Mutations';
+	import { getSelectionContext } from '$lib/selection/Selection.svelte';
 	import { toastFinally } from '$lib/Toasts';
 	import { fadeDefault } from '$lib/Transitions';
 	import { getContextClient } from '@urql/svelte';
@@ -10,27 +10,30 @@
 	const client = getContextClient();
 	const selection = getSelectionContext();
 
-	export let id: number;
+	let { id }: { id: number } = $props();
+
+	function onclick(event: MouseEvent) {
+		event.preventDefault();
 
-	function addPages() {
 		updateComics(client, {
 			ids: id,
-			input: { pages: { ids: $selection.ids, options: { mode: UpdateMode.Add } } }
+			input: { pages: { ids: selection.ids, options: { mode: UpdateMode.Add } } }
 		})
-			.then(() => ($selection = $selection.none()))
+			.then(() => selection.none())
 			.catch(toastFinally);
 	}
 </script>
 
-{#if $selection.size > 0}
+{#if selection.size > 0}
 	<div class="absolute left-1 top-1" transition:fade={fadeDefault}>
 		<button
 			type="button"
 			class="btn-blue rounded-full shadow-sm shadow-black"
 			title="Add to this comic"
-			on:click|preventDefault={addPages}
+			aria-label="Add to this comic"
+			{onclick}
 		>
-			<span class="icon-base icon-[material-symbols--note-add]" />
+			<span class="icon-base icon-[material-symbols--note-add]"></span>
 		</button>
 	</div>
 {/if}