From d19d36982585f52e336fc1caaedc2f45ec8a75ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 27 Sep 2025 13:32:16 +0200
Subject: [PATCH] chore: finalize migration to svelte 5

---
 src/lib/BackgroundGrid.svelte           | 14 ++++++++++----
 src/lib/TestCard.svelte                 |  9 ++++-----
 src/routes/(pages)/+layout.svelte       |  2 +-
 src/routes/(pages)/+page.svelte         | 15 +--------------
 src/routes/(pages)/camera/+page.svelte  |  8 +++-----
 src/routes/(pages)/gamepad/+page.svelte | 10 ++++------
 6 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte
index 97b9fb0..921ebb7 100644
--- a/src/lib/BackgroundGrid.svelte
+++ b/src/lib/BackgroundGrid.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import _ from 'lodash';
-	import { createEventDispatcher, onMount } from 'svelte';
-	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
 
 	const START_COUNT = 27;
 	const MAX_COUNT = 33;
@@ -19,9 +18,16 @@
 	interface Props {
 		transparent?: boolean;
 		subdued?: boolean;
+		onchange?: (detail: {
+			horizontalCount: number;
+			verticalCount: number;
+			blockSize: number;
+			horizontalMargin: number;
+			verticalMargin: number;
+		}) => void;
 	}
 
-	let { transparent = false, subdued = false }: Props = $props();
+	let { transparent = false, subdued = false, onchange }: Props = $props();
 
 	function updateCounts() {
 		const gridWidth = window.innerWidth - MARGIN_SIZE;
@@ -56,7 +62,7 @@
 		horizontalMargin = (window.innerWidth - blockSize * horizontalCount) / 2;
 		verticalMargin = (window.innerHeight - blockSize * verticalCount) / 2;
 		cornerBlocks = shorterCount > 8 ? 3 : Math.max(1, Math.floor(shorterCount / 4));
-		dispatch('change', {
+		onchange?.({
 			horizontalCount,
 			verticalCount,
 			blockSize,
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index 33c4201..12c681e 100644
--- a/src/lib/TestCard.svelte
+++ b/src/lib/TestCard.svelte
@@ -5,14 +5,13 @@
 	import ColorGradient from '$lib/ColorGradient.svelte';
 	import BrightnessGradient from '$lib/BrightnessGradient.svelte';
 	import Clock from '$lib/Clock.svelte';
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher<{ focus: void }>();
 
 	interface Props {
 		bg?: boolean;
+		onfocus?: () => void;
 	}
 
-	let { bg = false }: Props = $props();
+	let { bg = false, onfocus }: Props = $props();
 
 	let sizes = $state({
 		blockSize: 64,
@@ -44,9 +43,9 @@
          --column-width: {columnWidth};
          --column-height: {columnHeight};
          --left-column: {leftColumn};"
-	ondblclick={() => dispatch('focus') && document.body.requestFullscreen()}
+	ondblclick={() => onfocus?.() && document.body.requestFullscreen()}
 >
-	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
+	<BackgroundGrid onchange={(detail) => (sizes = detail)} subdued={bg} />
 
 	<div class="axes">
 		<Axes />
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte
index ab64f8c..8506ea2 100644
--- a/src/routes/(pages)/+layout.svelte
+++ b/src/routes/(pages)/+layout.svelte
@@ -10,7 +10,7 @@
 	let { children }: Props = $props();
 </script>
 
-<TestCard bg on:focus={() => goto('/card')} />
+<TestCard bg onfocus={() => goto('/card')} />
 <main class:sub={!page.data.root}>
 	<a href=".." class="button button-back"><i class="ti ti-arrow-back"></i>{m.common_back()}</a>
 	{@render children?.()}
diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte
index b7fb0f1..c360209 100644
--- a/src/routes/(pages)/+page.svelte
+++ b/src/routes/(pages)/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { version } from '../../../package.json';
 	import type { Snapshot } from '@sveltejs/kit';
 	import { fade } from 'svelte/transition';
@@ -139,7 +137,7 @@
 			);
 		});
 	}
-	run(() => {
+	$effect(() => {
 		doSearch(search);
 	});
 
@@ -337,17 +335,6 @@
 			opacity: 0.8;
 		}
 
-		& a {
-			text-align: center;
-			text-decoration: none;
-			white-space: nowrap;
-
-			&.disabled {
-				pointer-events: none;
-				opacity: 0.5;
-			}
-		}
-
 		& .ti {
 			display: block;
 			font-size: 3rem;
diff --git a/src/routes/(pages)/camera/+page.svelte b/src/routes/(pages)/camera/+page.svelte
index 002eb0a..56b1aac 100644
--- a/src/routes/(pages)/camera/+page.svelte
+++ b/src/routes/(pages)/camera/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import debug from 'debug';
@@ -20,10 +18,10 @@
 	let snapshot: string | undefined = $state();
 	let flipped = $state(false);
 
-	run(() => {
+	$effect(() => {
 		dbg('devices %O', devices);
 	});
-	run(() => {
+	$effect(() => {
 		dbg('currentDevice %s', currentDevice);
 	});
 
@@ -54,7 +52,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if (currentDevice) {
 			navigator.mediaDevices
 				.getUserMedia({
diff --git a/src/routes/(pages)/gamepad/+page.svelte b/src/routes/(pages)/gamepad/+page.svelte
index 45717cb..8eeb5de 100644
--- a/src/routes/(pages)/gamepad/+page.svelte
+++ b/src/routes/(pages)/gamepad/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import debug from 'debug';
@@ -60,20 +58,20 @@
 		requestAnimationFrame(update);
 	}
 
-	run(() => {
+	$effect(() => {
 		if (currentGamepad) {
 			update();
 		}
 	});
 
-	run(() => {
+	$effect(() => {
 		dbg('Gamepads %O', gamepads);
 	});
-	run(() => {
+	$effect(() => {
 		dbg('Current gamepad %s', currentGamepad);
 	});
 
-	run(() => {
+	$effect(() => {
 		currentGamepad?.vibrationActuator?.playEffect('dual-rumble', {
 			duration: 1000
 		});