From db01879419758d8b748fd177ed0292dda3be41f4 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 17 Aug 2024 21:29:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AC=20Adds=20fullscreen=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/statusbar.svelte | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/app/src/routes/statusbar.svelte b/app/src/routes/statusbar.svelte
index a624c04..95f4bc2 100644
--- a/app/src/routes/statusbar.svelte
+++ b/app/src/routes/statusbar.svelte
@@ -12,6 +12,8 @@
 	import UpdateIndicator from '$lib/components/UpdateIndicator.svelte';
     import MdiWeatherSunny from '~icons/mdi/weather-sunny';
     import MdiMoonAndStars from '~icons/mdi/moon-and-stars';
+    import MdiFullscreen from '~icons/mdi/fullscreen';
+    import MdiFullscreenExit from '~icons/mdi/fullscreen-exit';
 	import { api } from '$lib/api';
 	import { mode, modes } from '$lib/stores';
 
@@ -35,6 +37,17 @@
     const deactivate = async () => {
         mode.set(modes.indexOf('deactivated'));
     }
+
+    let isFullscreen = false;
+
+    function toggleFullScreen() {
+        isFullscreen = !isFullscreen
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen();
+        } else if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+    }
 </script>
 
 <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
@@ -48,6 +61,12 @@
 	<div class="indicator flex-none">
 		<UpdateIndicator />
 	</div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="flex-none" on:click={toggleFullScreen}>
+        <svelte:component this={isFullscreen ? MdiFullscreenExit : MdiFullscreen} class="h-7 w-7"/>
+    </div>
+
     <div class="flex-none">
         <label class="swap swap-rotate">
             <input type="checkbox" value="light" class="theme-controller"/>