frontend: Migrate to Svelte 5

1 files changed, 12 insertions, 10 deletions

diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte
index 80efaed..83a492b 100644
--- a/frontend/src/lib/tabs/ArchiveEdit.svelte
+++ b/frontend/src/lib/tabs/ArchiveEdit.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { addComic, updateArchives } from '$gql/Mutations';
 	import { type FullArchiveFragment } from '$gql/graphql';
-	import { getSelectionContext } from '$lib/Selection';
 	import { toastFinally } from '$lib/Toasts';
 	import AddButton from '$lib/components/AddButton.svelte';
 	import Card, { comicCard } from '$lib/components/Card.svelte';
 	import OrganizedButton from '$lib/components/OrganizedButton.svelte';
 	import ComicPills from '$lib/pills/ComicPills.svelte';
+	import { getSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
 	import { getContextClient } from '@urql/svelte';
 	import AddOverlay from './AddOverlay.svelte';
@@ -14,23 +14,23 @@
 	const client = getContextClient();
 	const selection = getSelectionContext();
 
-	export let archive: FullArchiveFragment;
+	let { archive }: { archive: FullArchiveFragment } = $props();
 
 	function addNew() {
 		addComic(client, {
 			input: {
 				archive: { id: archive.id },
 				title: archive.name,
-				pages: { ids: $selection.ids },
-				cover: { id: archive.pages[$selection.indices.toSorted((a, b) => a - b)[0]].id }
+				pages: { ids: selection.ids },
+				cover: { id: archive.pages[selection.indices.toSorted((a, b) => a - b)[0]].id }
 			}
 		})
 			.then((mutatation) => {
 				const data = mutatation.addComic;
 				if (data.__typename === 'AddComicSuccess' && !data.archivePagesRemaining) {
-					$selection = $selection.clear();
+					selection.clear();
 				} else {
-					$selection = $selection.none();
+					selection.none();
 				}
 			})
 			.catch(toastFinally);
@@ -46,10 +46,10 @@
 <div class="flex flex-col gap-4">
 	<div class="flex gap-2 text-sm">
 		<SelectionControls page>
-			<AddButton title="Add Comic from selected" on:click={addNew} />
+			<AddButton title="Add Comic from selected" onclick={addNew} />
 		</SelectionControls>
-		<div class="grow" />
-		<OrganizedButton organized={archive.organized} on:click={toggleOrganized} />
+		<div class="grow"></div>
+		<OrganizedButton organized={archive.organized} onclick={toggleOrganized} />
 	</div>
 
 	{#if archive.comics.length > 0}
@@ -58,7 +58,9 @@
 			<div class="flex shrink-0 flex-col gap-4">
 				{#each archive.comics as comic}
 					<Card compact {...comicCard(comic)}>
-						<AddOverlay slot="overlay" id={comic.id} />
+						{#snippet overlay()}
+							<AddOverlay id={comic.id} />
+						{/snippet}
 						<ComicPills {comic} />
 					</Card>
 				{/each}