3 files changed, 36 insertions, 25 deletions

diff --git a/frontend/src/lib/Navigation.ts b/frontend/src/lib/Navigation.ts
index f3bc413..4dcb998 100644
--- a/frontend/src/lib/Navigation.ts
+++ b/frontend/src/lib/Navigation.ts
@@ -1,5 +1,5 @@
 import { goto as svelteGoto } from '$app/navigation';
-import { SortDirection } from '$gql/graphql';
+import { SortDirection, type ComicFilter } from '$gql/graphql';
 import JsonURL from '@jsonurl/jsonurl';
 import { toastError } from './Toasts';
 import type { Key } from './Utils';
@@ -120,3 +120,7 @@ export function navigate(params: NavigationParameters<object>, current?: URLSear
 export function href<T>(base: string, params: NavigationParameters<T>) {
 	return `/${base}/?${parametersFrom(params).toString()}`;
 }
+
+export function quickComicFilter(id: number | string, filter: keyof ComicFilter) {
+	window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } }));
+}
diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte
index d249cc8..d0c0509 100644
--- a/frontend/src/lib/components/Cardlet.svelte
+++ b/frontend/src/lib/components/Cardlet.svelte
@@ -1,30 +1,15 @@
 <script lang="ts">
-	import type { ComicFilter } from '$gql/graphql';
-	import { href } from '$lib/Navigation';
 	import type { Snippet } from 'svelte';
 
 	interface Props {
 		name: string;
 		title?: string | null;
-		filter?: keyof ComicFilter;
-		id?: number | string;
 		overlay?: Snippet;
 		onclick: (event: MouseEvent) => void;
+		onauxclick?: (event: MouseEvent) => void;
 	}
 
-	let {
-		name,
-		title = undefined,
-		filter = undefined,
-		id = undefined,
-		overlay,
-		onclick
-	}: Props = $props();
-
-	const onauxclick = (e: MouseEvent) => {
-		if (filter === undefined || id === undefined || e.button !== 1) return;
-		window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } }));
-	};
+	let { name, title = undefined, overlay, onclick, onauxclick = undefined }: Props = $props();
 </script>
 
 <button
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) })}