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/SelectionControls.svelte | 61 +++++++++++++----------
 1 file changed, 34 insertions(+), 27 deletions(-)

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

diff --git a/frontend/src/lib/toolbar/SelectionControls.svelte b/frontend/src/lib/toolbar/SelectionControls.svelte
index 4d309df..f0026c8 100644
--- a/frontend/src/lib/toolbar/SelectionControls.svelte
+++ b/frontend/src/lib/toolbar/SelectionControls.svelte
@@ -1,57 +1,64 @@
 <script lang="ts">
-	import { getSelectionContext } from '$lib/Selection';
+	import Badge from '$lib/components/Badge.svelte';
+	import { getSelectionContext } from '$lib/selection/Selection.svelte';
 	import { accelerator } from '$lib/Shortcuts';
 	import { fadeDefault, slideXFast } from '$lib/Transitions';
-	import Badge from '$lib/components/Badge.svelte';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, type Snippet } from 'svelte';
 	import { fade, slide } from 'svelte/transition';
 
-	const selection = getSelectionContext();
-
-	export let page = false;
-
-	const toggle = () => ($selection = $selection.toggle());
-	const all = () => ($selection = $selection.all());
-	const none = () => ($selection = $selection.none());
+	let { page = false, children }: { page?: boolean; children?: Snippet } = $props();
+	let selection = getSelectionContext();
 
-	onDestroy(() => ($selection = $selection.clear()));
+	onDestroy(selection.clear);
 </script>
 
 <div class="rounded-group flex">
 	<button
 		type="button"
 		class="btn-slate relative"
-		class:toggled={$selection.active}
-		title={`${$selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`}
-		on:click={toggle}
+		class:toggled={selection.active}
+		title={`${selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`}
+		onclick={selection.toggle}
 		use:accelerator={'s'}
 	>
-		{#if $selection.active}
+		{#if selection.active}
 			{#if page}
-				<span class="icon-base icon-[material-symbols--edit-document]" />
+				<span class="icon-base icon-[material-symbols--edit-document]"></span>
 			{:else}
-				<span class="icon-base icon-[material-symbols--remove-selection]" />
+				<span class="icon-base icon-[material-symbols--remove-selection]"></span>
 			{/if}
 		{:else if page}
-			<span class="icon-base icon-[material-symbols--edit-document-outline]" />
+			<span class="icon-base icon-[material-symbols--edit-document-outline]"></span>
 		{:else}
-			<span class="icon-base icon-[material-symbols--select]" />
+			<span class="icon-base icon-[material-symbols--select]"></span>
 		{/if}
-		<Badge number={$selection.size} />
+		<Badge number={selection.size} />
 	</button>
-	{#if $selection.active}
+	{#if selection.active}
 		<div class="rounded-group-end flex" transition:slide={slideXFast}>
-			<button type="button" class="btn-slate" title="Select all" on:click={all}>
-				<span class="icon-base icon-[material-symbols--select-all]" />
+			<button
+				type="button"
+				class="btn-slate"
+				title="Select all"
+				aria-label="Select all"
+				onclick={selection.all}
+			>
+				<span class="icon-base icon-[material-symbols--select-all]"></span>
 			</button>
-			<button type="button" class="btn-slate" title="Select none" on:click={none}>
-				<span class="icon-base icon-[material-symbols--deselect]" />
+			<button
+				type="button"
+				class="btn-slate"
+				title="Select none"
+				aria-label="Select all"
+				onclick={selection.none}
+			>
+				<span class="icon-base icon-[material-symbols--deselect]"></span>
 			</button>
 		</div>
 	{/if}
 </div>
-{#if $selection.size > 0}
+{#if selection.size > 0}
 	<div class="rounded-group flex" transition:fade={fadeDefault}>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}
-- 
cgit v1.2.3-2-gb3c3