1 files changed, 29 insertions, 7 deletions
diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte
index 4705f44..439d6b7 100644
--- a/frontend/src/lib/selection/Selectable.svelte
+++ b/frontend/src/lib/selection/Selectable.svelte
@@ -2,25 +2,47 @@
 	import type { Snippet } from 'svelte';
 	import { getSelectionContext } from './Selection.svelte';
 
+	interface SnippetProps {
+		onclick: (event: MouseEvent) => void;
+		onauxclick: (event: MouseEvent) => void;
+		selected: boolean;
+	}
+
 	interface Props {
 		id: number;
 		index: number;
-		edit?: ((id: number) => void) | undefined;
-		children?: Snippet<[{ onclick: (event: MouseEvent) => void; selected: boolean }]>;
+		onclick?: (id: number) => void;
+		onauxclick?: (id: number) => void;
+		children?: Snippet<[SnippetProps]>;
 	}
 
-	let { id, index, edit = undefined, children }: Props = $props();
+	let {
+		id,
+		index,
+		onclick: onclick = undefined,
+		onauxclick = undefined,
+		children
+	}: Props = $props();
+
 	let selection = getSelectionContext();
 
-	const onclick = (event: MouseEvent) => {
+	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>
 
-{@render children?.({ onclick, selected: selection.contains(id) })}
+{@render children?.({ onclick: click, onauxclick: auxclick, selected: selection.contains(id) })}