frontend: Migrate to Svelte 5

1 files changed, 14 insertions, 12 deletions

diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte
index 48b6ac7..4705f44 100644
--- a/frontend/src/lib/selection/Selectable.svelte
+++ b/frontend/src/lib/selection/Selectable.svelte
@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { getSelectionContext } from '$lib/Selection';
+	import type { Snippet } from 'svelte';
+	import { getSelectionContext } from './Selection.svelte';
 
-	export let id: number;
-	export let index: number;
+	interface Props {
+		id: number;
+		index: number;
+		edit?: ((id: number) => void) | undefined;
+		children?: Snippet<[{ onclick: (event: MouseEvent) => void; selected: boolean }]>;
+	}
 
-	export let edit: ((id: number) => void) | undefined = undefined;
+	let { id, index, edit = undefined, children }: Props = $props();
+	let selection = getSelectionContext();
 
-	const selection = getSelectionContext();
-
-	$: selected = $selection.contains(id);
-
-	const handle = (event: MouseEvent) => {
-		if ($selection.active) {
-			$selection = $selection.update(index, event.shiftKey);
+	const onclick = (event: MouseEvent) => {
+		if (selection.active) {
+			selection.update(index, event.shiftKey);
 			event.preventDefault();
 		} else if (edit) {
 			edit(id);
@@ -21,4 +23,4 @@
 	};
 </script>
 
-<slot {handle} {selected} />
+{@render children?.({ onclick, selected: selection.contains(id) })}