frontend: Add fullscreen toggle in the reader

1 files changed, 14 insertions, 5 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?.()}