1 files changed, 36 insertions, 12 deletions
diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte
index 48b6ac7..439d6b7 100644
--- a/frontend/src/lib/selection/Selectable.svelte
+++ b/frontend/src/lib/selection/Selectable.svelte
@@ -1,24 +1,48 @@
 <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 SnippetProps {
+		onclick: (event: MouseEvent) => void;
+		onauxclick: (event: MouseEvent) => void;
+		selected: boolean;
+	}
 
-	export let edit: ((id: number) => void) | undefined = undefined;
+	interface Props {
+		id: number;
+		index: number;
+		onclick?: (id: number) => void;
+		onauxclick?: (id: number) => void;
+		children?: Snippet<[SnippetProps]>;
+	}
 
-	const selection = getSelectionContext();
+	let {
+		id,
+		index,
+		onclick: onclick = undefined,
+		onauxclick = undefined,
+		children
+	}: Props = $props();
 
-	$: selected = $selection.contains(id);
+	let selection = getSelectionContext();
 
-	const handle = (event: MouseEvent) => {
-		if ($selection.active) {
-			$selection = $selection.update(index, event.shiftKey);
+	const click = (event: MouseEvent) => {
+		if (selection.active) {
+			selection.update(index, event.shiftKey);
 			event.preventDefault();
-		} else if (edit) {
-			edit(id);
+		} else if (event.ctrlKey && onauxclick) {
+			onauxclick(id);
+		} else if (onclick) {
+			onclick(id);
 			event.preventDefault();
 		}
 	};
+
+	const auxclick = (event: MouseEvent) => {
+		if (event.button === 1 && onauxclick) {
+			onauxclick(id);
+		}
+	};
 </script>
 
-<slot {handle} {selected} />
+{@render children?.({ onclick: click, onauxclick: auxclick, selected: selection.contains(id) })}