From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/routes/worlds/+page.svelte | 91 ++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 47 deletions(-)

(limited to 'frontend/src/routes/worlds/+page.svelte')

diff --git a/frontend/src/routes/worlds/+page.svelte b/frontend/src/routes/worlds/+page.svelte
index e0366e9..f223a61 100644
--- a/frontend/src/routes/worlds/+page.svelte
+++ b/frontend/src/routes/worlds/+page.svelte
@@ -3,10 +3,7 @@
 	import { fetchWorld, worldsQuery } from '$gql/Queries';
 	import type { World } from '$gql/graphql';
 	import { WorldSortLabel } 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 EditWorld from '$lib/dialogs/EditWorld.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,75 +25,74 @@
 	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';
 
-	const client = getContextClient();
+	let { data }: PageProps = $props();
+	let pagination = $derived(data.pagination);
+	let sort = $derived(data.sort);
 
-	export let data: PageData;
+	const client = getContextClient();
+	let result = $derived(worldsQuery(client, { ...data }));
+	let worlds = $derived($result.data?.worlds);
 
-	$: result = worldsQuery(client, {
-		pagination: data.pagination,
-		filter: data.filter,
-		sort: data.sort
+	let selection = initSelectionContext<World>('World', (a) => a.name);
+	$effect(() => {
+		if (worlds) {
+			selection.view = worlds.edges;
+		}
 	});
 
-	$: worlds = $result.data?.worlds;
-
-	const selection = initSelectionContext<World>('World', (w) => w.name);
-	$: if (worlds) {
-		$selection.view = worlds.edges;
-		$pagination.total = worlds.count;
-	}
-
-	const filter = initFilterContext<BasicFilterContext>();
-	$: $filter = new BasicFilterContext(data.filter);
-
-	const sort = initSortContext(data.sort, WorldSortLabel);
-	$: $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) => {
 		fetchWorld(client, id)
-			.then((world) => openModal(EditWorld, { world }))
+			.then((world) => modals.open(EditWorld, { world }))
 			.catch(toastFinally);
 	};
 </script>
 
-<Head section="Worlds" />
+<Head section="worlds" />
 
 <Column>
 	<Toolbar>
-		<SelectionControls slot="start">
-			<DeleteSelection mutation={deleteWorlds} />
-		</SelectionControls>
-		<svelte:fragment slot="center">
-			<Search name="Worlds" bind:field={$filter.include.controls.name.contains} />
-			<SelectSort />
-			<SelectItems />
-		</svelte:fragment>
-		<svelte:fragment slot="end">
-			<AddButton title="Add World" on:click={() => openModal(AddWorld)} />
-		</svelte:fragment>
+		{#snippet start()}
+			<SelectionControls>
+				<DeleteSelection mutation={deleteWorlds} />
+			</SelectionControls>
+		{/snippet}
+		{#snippet center()}
+			<Search name="Worlds" {filter} bind:field={filter.include.name.contains} />
+			<SelectSort {sort} labels={WorldSortLabel} />
+			<SelectItems {pagination} />
+		{/snippet}
+		{#snippet end()}
+			<AddButton title="Add World" onclick={() => modals.open(AddWorld)} />
+		{/snippet}
 	</Toolbar>
 	{#if worlds}
-		<Pagination />
+		<Pagination {pagination} total={worlds.count} />
 		<main>
 			<Cardlets>
 				{#each worlds.edges as { id, name }, index (id)}
-					<Selectable {index} {id} {edit} let:handle let:selected>
-						<Cardlet {name} on:click={handle} filter="worlds" {id}>
-							<SelectionOverlay slot="overlay" position="right" centered {selected} />
-						</Cardlet>
+					<Selectable {index} {id} {edit}>
+						{#snippet children({ onclick, selected })}
+							<Cardlet {name} {onclick} filter="worlds" {id}>
+								{#snippet overlay()}
+									<SelectionOverlay position="right" centered {selected} />
+								{/snippet}
+							</Cardlet>
+						{/snippet}
 					</Selectable>
 				{:else}
 					<Empty />
 				{/each}
 			</Cardlets>
 		</main>
-		<Pagination />
+		<Pagination {pagination} total={worlds.count} />
 	{:else}
 		<Guard {result} />
 	{/if}
-- 
cgit v1.2.3-2-gb3c3

