frontend: Migrate to Svelte 5

1 files changed, 33 insertions, 25 deletions

diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte
index fdcb057..0e59df6 100644
--- a/frontend/src/lib/toolbar/SelectSort.svelte
+++ b/frontend/src/lib/toolbar/SelectSort.svelte
@@ -1,60 +1,68 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { SortDirection } from '$gql/graphql';
-
-	import { getSortContext } from '$lib/Sort';
+	import { navigate, type SortData } from '$lib/Navigation';
 	import { slideXFast } from '$lib/Transitions';
 	import { getRandomInt } from '$lib/Utils';
 	import { slide } from 'svelte/transition';
 
-	const sort = getSortContext();
+	let { sort, labels }: { sort: SortData<string>; labels: Record<string, string> } = $props();
+
+	function apply(sort: SortData<string>) {
+		navigate({ sort }, page.url.searchParams);
+	}
 
 	function toggle() {
-		if ($sort.direction === SortDirection.Ascending) {
-			$sort.direction = SortDirection.Descending;
+		if (sort.direction === SortDirection.Ascending) {
+			apply({ ...sort, direction: SortDirection.Descending });
 		} else {
-			$sort.direction = SortDirection.Ascending;
+			apply({ ...sort, direction: SortDirection.Ascending });
 		}
+	}
 
-		apply();
+	function newSeed() {
+		return getRandomInt(0, 1000000000);
 	}
 
-	function apply() {
-		if ($sort.on === 'RANDOM' && $sort.seed === undefined) {
-			$sort.seed = getRandomInt(0, 1000000000);
-		}
-		$sort.apply($page.url.searchParams);
+	function shuffle() {
+		apply({ ...sort, seed: newSeed() });
 	}
 
-	function reshuffle() {
-		$sort.seed = undefined;
-		apply();
+	function onchange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+		let seed: number | undefined = undefined;
+
+		if (e.currentTarget.value === 'RANDOM') {
+			seed = newSeed();
+		}
+
+		apply({ ...sort, on: e.currentTarget.value, seed });
 	}
 </script>
 
 <div class="rounded-group flex flex-row">
-	<select class="btn-slate" bind:value={$sort.on} on:change={apply} title="Sort on...">
-		{#each Object.entries($sort.labels) as [value, label]}
+	<select class="btn-slate" value={sort.on} {onchange} title="Sort on...">
+		{#each Object.entries(labels) as [value, label]}
 			<option {value}>{label}</option>
 		{/each}
 	</select>
-	<button type="button" class="btn-slate" title="Toggle sort direction" on:click={toggle}>
-		{#if $sort.direction === SortDirection.Ascending}
-			<span class="icon-base icon-[material-symbols--sort] -scale-y-100" />
+	<button type="button" class="btn-slate" title="Toggle sort direction" onclick={toggle}>
+		{#if sort.direction === SortDirection.Ascending}
+			<span class="icon-base icon-[material-symbols--sort] -scale-y-100"></span>
 		{:else}
-			<span class="icon-base icon-[material-symbols--sort]" />
+			<span class="icon-base icon-[material-symbols--sort]"></span>
 		{/if}
 	</button>
-	{#if $sort.on === 'RANDOM'}
+	{#if sort.on === 'RANDOM'}
 		<button
 			type="button"
 			class="btn-slate"
 			title="Reshuffle"
-			on:click={reshuffle}
+			aria-label="Reshuffle"
+			onclick={shuffle}
 			transition:slide={slideXFast}
 		>
 			<div class="flex">
-				<span class="icon-base icon-[material-symbols--shuffle]" />
+				<span class="icon-base icon-[material-symbols--shuffle]"></span>
 			</div>
 		</button>
 	{/if}