frontend: Migrate to Svelte 5

1 files changed, 32 insertions, 25 deletions

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}