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/lib/toolbar/SelectItems.svelte | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

(limited to 'frontend/src/lib/toolbar/SelectItems.svelte')

diff --git a/frontend/src/lib/toolbar/SelectItems.svelte b/frontend/src/lib/toolbar/SelectItems.svelte
index 7ff339e..68a0652 100644
--- a/frontend/src/lib/toolbar/SelectItems.svelte
+++ b/frontend/src/lib/toolbar/SelectItems.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { getPaginationContext } from '$lib/Pagination';
+	import { page } from '$app/state';
+	import { navigate, type PaginationData } from '$lib/Navigation';
 
-	const pagination = getPaginationContext();
+	let { pagination }: { pagination: PaginationData } = $props();
 
-	$: values = new Set([24, 48, 72, 90, 120, 150, 180, $pagination.items].sort((a, b) => a - b));
+	let values = $derived(
+		new Set([24, 48, 72, 90, 120, 150, 180, pagination.items].sort((a, b) => a - b))
+	);
+
+	function onchange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+		navigate({ pagination: { items: +e.currentTarget.value } }, page.url.searchParams);
+	}
 </script>
 
-<select
-	class="btn-slate"
-	bind:value={$pagination.items}
-	on:change={() => $pagination.apply($page.url.searchParams)}
-	title="Limit displayed items to..."
->
+<select class="btn-slate" value={pagination.items} {onchange} title="Limit displayed items to...">
 	{#each values as value}
 		<option {value}>{value}</option>
 	{/each}
-- 
cgit v1.2.3-2-gb3c3