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

---
 .../src/lib/reader/components/CloseReaderButton.svelte    | 15 +++++++++------
 frontend/src/lib/reader/components/PageIndicator.svelte   |  4 ++--
 .../src/lib/reader/components/ReaderMenuButton.svelte     | 11 +++++++----
 3 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'frontend/src/lib/reader/components')

diff --git a/frontend/src/lib/reader/components/CloseReaderButton.svelte b/frontend/src/lib/reader/components/CloseReaderButton.svelte
index 0c88323..f3eb4ba 100644
--- a/frontend/src/lib/reader/components/CloseReaderButton.svelte
+++ b/frontend/src/lib/reader/components/CloseReaderButton.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
-	import { getReaderContext } from '$lib/Reader';
 	import { accelerator } from '$lib/Shortcuts';
+	import { getReaderContext } from '../Reader.svelte';
 
 	const reader = getReaderContext();
+
+	function onclick() {
+		reader.visible = false;
+		reader.sidebar = false;
+	}
 </script>
 
 <button
 	type="button"
 	class="btn floating"
 	title="Close reader"
-	on:click={() => {
-		$reader.visible = false;
-		$reader.sidebar = false;
-	}}
+	aria-label="Close reader"
+	{onclick}
 	use:accelerator={'Escape'}
 >
-	<span class="icon-lg icon-[material-symbols--close]" />
+	<span class="icon-lg icon-[material-symbols--close]"></span>
 </button>
diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte
index f79fc00..35190b3 100644
--- a/frontend/src/lib/reader/components/PageIndicator.svelte
+++ b/frontend/src/lib/reader/components/PageIndicator.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { getReaderContext } from '$lib/Reader';
+	import { getReaderContext } from '../Reader.svelte';
 
 	const reader = getReaderContext();
 </script>
 
 <div class="floating !p-2">
-	{$reader.page + 1}/{$reader.pages.length}
+	{reader.page + 1}/{reader.pages.length}
 </div>
diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
index aa20206..58648e8 100644
--- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte
+++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-	import { getReaderContext } from '$lib/Reader';
 	import { accelerator } from '$lib/Shortcuts';
+	import { getReaderContext } from '../Reader.svelte';
 
 	const reader = getReaderContext();
+
+	let title = $derived(`${reader.sidebar ? 'Hide' : 'Show'} menu`);
 </script>
 
 <button
 	type="button"
 	class="btn floating invisible xl:visible"
-	title={`${$reader.sidebar ? 'Hide' : 'Show'} menu`}
-	on:click={() => ($reader.sidebar = !$reader.sidebar)}
+	{title}
+	aria-label={title}
+	onclick={() => (reader.sidebar = !reader.sidebar)}
 	use:accelerator={'z'}
 >
-	<span class="icon-lg icon-[material-symbols--dock-to-right]" />
+	<span class="icon-lg icon-[material-symbols--dock-to-right]"></span>
 </button>
-- 
cgit v1.2.3-2-gb3c3