frontend: Add fullscreen toggle in the readernext

3 files changed, 49 insertions, 6 deletions

diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte
index 2e7e851..0665698 100644
--- a/frontend/src/lib/reader/Reader.svelte
+++ b/frontend/src/lib/reader/Reader.svelte
@@ -6,10 +6,13 @@
 	import { fade, slide } from 'svelte/transition';
 	import CloseReaderButton from './components/CloseReaderButton.svelte';
 	import ReaderMenuButton from './components/ReaderMenuButton.svelte';
+	import ToggleFullscreenButton from './components/ToggleFullscreenButton.svelte';
 
 	let { sidebar, children }: { sidebar?: Snippet; children?: Snippet } = $props();
 
 	const reader = getReaderContext();
+
+	let dialog: HTMLDivElement | undefined = $state();
 </script>
 
 {#if reader.visible}
@@ -18,6 +21,7 @@
 		class="fixed top-0 right-0 bottom-0 left-0 z-10 flex h-full w-full bg-black"
 		transition:fade={fadeDefault}
 		use:trapFocus
+		bind:this={dialog}
 	>
 		{#if sidebar && reader.sidebar}
 			<aside class="w-[36rem] shrink-0 bg-slate-800" transition:slide={slideXDefault}>
@@ -27,11 +31,16 @@
 			</aside>
 		{/if}
 		<main class="relative flex grow">
-			<div class="absolute flex w-full p-1 text-lg [&>*:last-child]:ml-auto">
-				{#if sidebar}
-					<ReaderMenuButton />
-				{/if}
-				<CloseReaderButton />
+			<div class="absolute flex w-full p-1 text-lg">
+				<div class="flex flex-col gap-1">
+					{#if sidebar}
+						<ReaderMenuButton />
+					{/if}
+				</div>
+				<div class="ml-auto flex flex-col gap-1">
+					<CloseReaderButton />
+					<ToggleFullscreenButton {dialog} />
+				</div>
 			</div>
 
 			{@render children?.()}
diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
index da494e3..924342f 100644
--- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte
+++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte
@@ -9,7 +9,7 @@
 
 <button
 	type="button"
-	class="btn-transparent invisible xl:visible"
+	class="btn-transparent hidden xl:flex"
 	{title}
 	aria-label={title}
 	onclick={() => (reader.sidebar = !reader.sidebar)}
diff --git a/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte b/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte
new file mode 100644
index 0000000..9ad4ce6
--- /dev/null
+++ b/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { accelerator } from '$lib/Shortcuts';
+	import { toastFinally } from '$lib/Toasts';
+
+	let { dialog }: { dialog?: HTMLElement } = $props();
+
+	function onclick() {
+		if (isFullscreen) {
+			document.exitFullscreen().catch(toastFinally);
+		} else if (dialog?.requestFullscreen) {
+			dialog.requestFullscreen().catch(toastFinally);
+		}
+	}
+
+	let fullscreenElement: HTMLElement | null = $state(null);
+	let isFullscreen = $derived(fullscreenElement !== null);
+</script>
+
+<svelte:document bind:fullscreenElement />
+
+<button
+	type="button"
+	class="btn-transparent"
+	title="Toggle fullscreen"
+	aria-label="Toggle fullscreen"
+	{onclick}
+	use:accelerator={'f'}
+>
+	{#if isFullscreen}
+		<span class="icon-lg icon-[material-symbols--fullscreen-exit]"></span>
+	{:else}
+		<span class="icon-lg icon-[material-symbols--fullscreen]"></span>
+	{/if}
+</button>