2 files changed, 37 insertions, 32 deletions

diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte
index c3b6386..f94747a 100644
--- a/frontend/src/lib/gallery/Gallery.svelte
+++ b/frontend/src/lib/gallery/Gallery.svelte
@@ -2,12 +2,18 @@
 	import type { PageFragment } from '$gql/graphql';
 	import GalleryPage from './GalleryPage.svelte';
 
-	export let pages: PageFragment[];
+	interface Props {
+		pages: PageFragment[];
+		open: (page: number) => void;
+		updateCover: (page: number) => void;
+	}
+
+	let { pages, open, updateCover }: Props = $props();
 </script>
 
-<div class="max-h-full gap-2 overflow-auto p-1 pr-3">
-	{#each pages as page, index}
-		<GalleryPage {page} {index} on:open on:cover />
+<div class="max-h-full gap-2 overflow-auto p-1 pr-3" tabindex="-1">
+	{#each pages as page, index (page.id)}
+		<GalleryPage {page} {index} {open} {updateCover} />
 	{/each}
 </div>
 
diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte
index 449321c..13bbfc8 100644
--- a/frontend/src/lib/gallery/GalleryPage.svelte
+++ b/frontend/src/lib/gallery/GalleryPage.svelte
@@ -1,65 +1,64 @@
 <script lang="ts">
 	import type { PageFragment } from '$gql/graphql';
-	import { getSelectionContext } from '$lib/Selection';
+	import { getSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
 	import { src } from '$lib/Utils';
-	import { createEventDispatcher } from 'svelte';
 
-	export let page: PageFragment;
-	export let index: number;
-
-	const selection = getSelectionContext<PageFragment>();
+	interface Props {
+		page: PageFragment;
+		index: number;
+		open: (page: number) => void;
+		updateCover: (page: number) => void;
+	}
 
-	let span: 'single' | 'double' | 'triple';
+	let { page, index, open, updateCover }: Props = $props();
 
-	$: page.image.aspectRatio, updateSpan();
+	const selection = getSelectionContext<PageFragment>();
 
-	function updateSpan() {
+	let span: 'single' | 'double' | 'triple' = $derived.by(() => {
 		const aspectRatio = page.image.aspectRatio;
 
 		if (aspectRatio <= 1) {
-			span = 'single';
+			return 'single';
 		} else if (aspectRatio > 1 && aspectRatio <= 2) {
-			span = 'double';
-		} else if (aspectRatio > 2) {
-			span = 'triple';
+			return 'double';
+		} else {
+			return 'triple';
 		}
-	}
-
-	const dispatch = createEventDispatcher<{ open: number; cover: number }>();
+	});
 
-	function press(event: MouseEvent | KeyboardEvent) {
+	function onclick(event: MouseEvent | KeyboardEvent) {
 		if (event instanceof KeyboardEvent && event.key !== 'Enter') {
 			return;
 		}
 
-		if ($selection.active) {
+		if (selection.active) {
 			if (event.ctrlKey) {
-				dispatch('open', index);
+				open(index);
 			} else if (selectable) {
-				$selection = $selection.update(index, event.shiftKey);
+				selection.update(index, event.shiftKey);
 			}
 		} else if (event.ctrlKey) {
-			dispatch('cover', page.id);
+			updateCover(page.id);
 		} else {
-			dispatch('open', index);
+			open(index);
 		}
 
 		event.preventDefault();
 	}
 
-	$: selectable = $selection.selectable(page);
-	$: dim = $selection.active && !selectable;
-	$: selected = $selection.contains(page.id);
+	let selectable = $derived(selection.selectable(page));
+	let dim = $derived(selection.active && !selectable);
+	let selected = $derived(selection.contains(page.id));
 </script>
 
 <div
 	class:dim
 	role="button"
 	tabindex="0"
-	class="{span} relative overflow-hidden rounded"
-	on:click={press}
-	on:keydown={press}
+	class="{span} relative overflow-hidden rounded-sm focus-visible:outline-4 focus-visible:outline-blue-600"
+	{onclick}
+	onkeydown={onclick}
 >
 	<SelectionOverlay position="top" {selected} />
 	<img