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/pagination/Pagination.svelte | 57 +++++++++++++++------------
 frontend/src/lib/pagination/Target.svelte     | 23 +++++++----
 2 files changed, 47 insertions(+), 33 deletions(-)

(limited to 'frontend/src/lib/pagination')

diff --git a/frontend/src/lib/pagination/Pagination.svelte b/frontend/src/lib/pagination/Pagination.svelte
index 51612f4..fc2935c 100644
--- a/frontend/src/lib/pagination/Pagination.svelte
+++ b/frontend/src/lib/pagination/Pagination.svelte
@@ -1,45 +1,52 @@
 <script lang="ts">
-	import { getPaginationContext } from '$lib/Pagination';
+	import type { PaginationData } from '$lib/Navigation';
 	import Target from './Target.svelte';
 
-	const pagination = getPaginationContext();
-	export let context = 2;
+	interface Props {
+		context?: number;
+		pagination: PaginationData;
+		total: number;
+	}
 
-	$: totalPages = Math.ceil($pagination.total / $pagination.items);
-	$: rightBoundary = $pagination.page - context;
-	$: leftBoundary = $pagination.page + context;
+	let { context = 2, pagination, total }: Props = $props();
 
-	$: shiftRight = leftBoundary - totalPages;
-	$: shiftLeft = 1 - rightBoundary;
+	let totalPages = $derived(Math.ceil(total / pagination.items));
+	let rightBoundary = $derived(pagination.page - context);
+	let leftBoundary = $derived(pagination.page + context);
 
-	$: containedLeft = leftBoundary <= totalPages;
-	$: containedRight = rightBoundary > 0;
+	let shiftRight = $derived(leftBoundary - totalPages);
+	let shiftLeft = $derived(1 - rightBoundary);
 
-	$: start = Math.max(1, containedLeft ? rightBoundary : rightBoundary - shiftRight);
-	$: end = Math.min(totalPages, containedRight ? leftBoundary : leftBoundary + shiftLeft);
+	let containedLeft = $derived(leftBoundary <= totalPages);
+	let containedRight = $derived(rightBoundary > 0);
 
-	$: leftmost = $pagination.page <= 1;
-	$: rightmost = $pagination.page >= totalPages;
+	let start = $derived(Math.max(1, containedLeft ? rightBoundary : rightBoundary - shiftRight));
+	let end = $derived(
+		Math.min(totalPages, containedRight ? leftBoundary : leftBoundary + shiftLeft)
+	);
+
+	let leftmost = $derived(pagination.page <= 1);
+	let rightmost = $derived(pagination.page >= totalPages);
 </script>
 
 {#if totalPages > 1}
 	<div class="flex justify-center gap-2">
-		<Target disabled={leftmost} page={1}>
-			<span class="icon-base icon-[material-symbols--keyboard-double-arrow-left]" />
+		<Target disabled={leftmost} target={1}>
+			<span class="icon-base icon-[material-symbols--keyboard-double-arrow-left]"></span>
 		</Target>
-		<Target disabled={leftmost} page={$pagination.page - 1}>
-			<span class="icon-base icon-[material-symbols--keyboard-arrow-left]" />
+		<Target disabled={leftmost} target={pagination.page - 1}>
+			<span class="icon-base icon-[material-symbols--keyboard-arrow-left]"></span>
 		</Target>
-		{#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as page}
-			<Target active={$pagination.page === page} {page}>
-				<p>{page.toString()}</p>
+		{#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as target}
+			<Target active={pagination.page === target} {target}>
+				<p>{target.toString()}</p>
 			</Target>
 		{/each}
-		<Target disabled={rightmost} page={$pagination.page + 1}>
-			<span class="icon-base icon-[material-symbols--keyboard-arrow-right]" />
+		<Target disabled={rightmost} target={pagination.page + 1}>
+			<span class="icon-base icon-[material-symbols--keyboard-arrow-right]"></span>
 		</Target>
-		<Target disabled={rightmost} page={totalPages}>
-			<span class="icon-base icon-[material-symbols--keyboard-double-arrow-right]" />
+		<Target disabled={rightmost} target={totalPages}>
+			<span class="icon-base icon-[material-symbols--keyboard-double-arrow-right]"></span>
 		</Target>
 	</div>
 {/if}
diff --git a/frontend/src/lib/pagination/Target.svelte b/frontend/src/lib/pagination/Target.svelte
index 9044bb9..6cbacbb 100644
--- a/frontend/src/lib/pagination/Target.svelte
+++ b/frontend/src/lib/pagination/Target.svelte
@@ -1,21 +1,28 @@
 <script lang="ts">
-	import { page as pageStore } from '$app/stores';
+	import { page } from '$app/state';
 	import { navigate } from '$lib/Navigation';
+	import type { Snippet } from 'svelte';
 
-	export let active = false;
+	interface Props {
+		active?: boolean;
+		disabled?: boolean;
+		target: number;
+		children?: Snippet;
+	}
 
-	export let disabled = false;
-	export let page: number;
+	let { active = false, disabled = false, target, children }: Props = $props();
+
+	function onclick() {
+		navigate({ pagination: { page: target } }, page.url.searchParams);
+	}
 </script>
 
 <button
-	on:click={() => {
-		navigate({ pagination: { page: page } }, $pageStore.url.searchParams);
-	}}
+	{onclick}
 	class:bg-slate-700={active}
 	class:bg-slate-800={!active}
 	class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base hover:text-white disabled:text-slate-600"
 	{disabled}
 >
-	<slot />
+	{@render children?.()}
 </button>
-- 
cgit v1.2.3-2-gb3c3