From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/lib/gallery/Gallery.svelte     | 10 ++++--
 frontend/src/lib/gallery/GalleryPage.svelte | 51 ++++++++++++++---------------
 2 files changed, 33 insertions(+), 28 deletions(-)

(limited to 'frontend/src/lib/gallery')

diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte
index 964c677..0480026 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" tabindex="-1">
 	{#each pages as page, index}
-		<GalleryPage {page} {index} on:open on:cover />
+		<GalleryPage {page} {index} {open} {updateCover} />
 	{/each}
 </div>
 
diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte
index f40b889..3169d6d 100644
--- a/frontend/src/lib/gallery/GalleryPage.svelte
+++ b/frontend/src/lib/gallery/GalleryPage.svelte
@@ -1,56 +1,55 @@
 <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) {
 		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
@@ -58,8 +57,8 @@
 	role="button"
 	tabindex="0"
 	class="{span} focus-thick focus-blue relative overflow-hidden rounded"
-	on:click={press}
-	on:keydown={press}
+	onclick={press}
+	onkeydown={press}
 >
 	<SelectionOverlay position="top" {selected} />
 	<img
-- 
cgit v1.2.3-2-gb3c3