frontend: Migrate to Svelte 5

1 files changed, 43 insertions, 45 deletions

diff --git a/frontend/src/routes/artists/+page.svelte b/frontend/src/routes/artists/+page.svelte
index e07338c..c907470 100644
--- a/frontend/src/routes/artists/+page.svelte
+++ b/frontend/src/routes/artists/+page.svelte
@@ -3,10 +3,7 @@
 	import { artistsQuery, fetchArtist } from '$gql/Queries';
 	import type { Artist } from '$gql/graphql';
 	import { ArtistSortLabel } from '$lib/Enums';
-	import { BasicFilterContext, initFilterContext } from '$lib/Filter';
-	import { initPaginationContext } from '$lib/Pagination';
-	import { initSelectionContext } from '$lib/Selection';
-	import { initSortContext } from '$lib/Sort';
+	import { BasicFilterContext } from '$lib/Filter.svelte';
 	import { toastFinally } from '$lib/Toasts';
 	import AddButton from '$lib/components/AddButton.svelte';
 	import Cardlet from '$lib/components/Cardlet.svelte';
@@ -19,6 +16,7 @@
 	import EditArtist from '$lib/dialogs/EditArtist.svelte';
 	import Pagination from '$lib/pagination/Pagination.svelte';
 	import Selectable from '$lib/selection/Selectable.svelte';
+	import { initSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
 	import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte';
 	import Search from '$lib/toolbar/Search.svelte';
@@ -27,38 +25,32 @@
 	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
 	import Toolbar from '$lib/toolbar/Toolbar.svelte';
 	import { getContextClient } from '@urql/svelte';
-	import { openModal } from 'svelte-modals';
-	import type { PageData } from './$types';
+	import { modals } from 'svelte-modals';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	let pagination = $derived(data.pagination);
+	let sort = $derived(data.sort);
 
 	const client = getContextClient();
-	export let data: PageData;
+	let result = $derived(artistsQuery(client, { ...data }));
+	let artists = $derived($result.data?.artists);
 
-	$: result = artistsQuery(client, {
-		pagination: data.pagination,
-		filter: data.filter,
-		sort: data.sort
+	let selection = initSelectionContext<Artist>('Artist', (a) => a.name);
+	$effect(() => {
+		if (artists) {
+			selection.view = artists.edges;
+		}
 	});
 
-	$: artists = $result.data?.artists;
-
-	const selection = initSelectionContext<Artist>('Artist', (a) => a.name);
-	$: if (artists) {
-		$selection.view = artists.edges;
-		$pagination.total = artists.count;
-	}
-
-	const filter = initFilterContext<BasicFilterContext>();
-	$: $filter = new BasicFilterContext(data.filter);
-
-	const sort = initSortContext(data.sort, ArtistSortLabel);
-	$: $sort.update = data.sort;
-
-	const pagination = initPaginationContext();
-	$: $pagination.update = data.pagination;
+	let filter = $state(new BasicFilterContext(data.filter));
+	$effect(() => {
+		filter = new BasicFilterContext(data.filter);
+	});
 
 	const edit = (id: number) => {
 		fetchArtist(client, id)
-			.then((artist) => openModal(EditArtist, { artist }))
+			.then((artist) => modals.open(EditArtist, { artist }))
 			.catch(toastFinally);
 	};
 </script>
@@ -67,34 +59,40 @@
 
 <Column>
 	<Toolbar>
-		<SelectionControls slot="start">
-			<DeleteSelection mutation={deleteArtists} />
-		</SelectionControls>
-		<svelte:fragment slot="center">
-			<Search name="Artists" bind:field={$filter.include.controls.name.contains} />
-			<SelectSort />
-			<SelectItems />
-		</svelte:fragment>
-		<svelte:fragment slot="end">
-			<AddButton title="Add Artist" on:click={() => openModal(AddArtist)} />
-		</svelte:fragment>
+		{#snippet start()}
+			<SelectionControls>
+				<DeleteSelection mutation={deleteArtists} />
+			</SelectionControls>
+		{/snippet}
+		{#snippet center()}
+			<Search name="Artists" {filter} bind:field={filter.include.name.contains} />
+			<SelectSort {sort} labels={ArtistSortLabel} />
+			<SelectItems {pagination} />
+		{/snippet}
+		{#snippet end()}
+			<AddButton title="Add Artist" onclick={() => modals.open(AddArtist)} />
+		{/snippet}
 	</Toolbar>
 	{#if artists}
-		<Pagination />
+		<Pagination {pagination} total={artists.count} />
 		<main>
 			<Cardlets>
 				{#each artists.edges as { id, name }, index (id)}
-					<Selectable {index} {id} {edit} let:handle let:selected>
-						<Cardlet {name} on:click={handle} filter="artists" {id}>
-							<SelectionOverlay slot="overlay" position="right" centered {selected} />
-						</Cardlet>
+					<Selectable {index} {id} {edit}>
+						{#snippet children({ onclick, selected })}
+							<Cardlet {name} {onclick} filter="artists" {id}>
+								{#snippet overlay()}
+									<SelectionOverlay position="right" centered {selected} />
+								{/snippet}
+							</Cardlet>
+						{/snippet}
 					</Selectable>
 				{:else}
 					<Empty />
 				{/each}
 			</Cardlets>
 		</main>
-		<Pagination />
+		<Pagination {pagination} total={artists.count} />
 	{:else}
 		<Guard {result} />
 	{/if}