From b854a9922a87da986945950d4054795086ce5f1a Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Mon, 8 Jun 2026 19:46:59 -0400
Subject: [PATCH] feat(App): implement fullscreen toggle functionality with
 event listeners

---
 src/app/App.tsx | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 0693cdb..fe1d560 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText, AppWindow, Folder, Edit, Eye, Database, Upload, Download, Code2, LayoutList, Image, ChevronLeft, Loader2, Check, AlertCircle, RefreshCw, Terminal, Link, Printer } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText, AppWindow, Folder, Edit, Eye, Database, Upload, Download, Code2, LayoutList, Image, ChevronLeft, Loader2, Check, AlertCircle, RefreshCw, Terminal, Link, Printer, Maximize2, Minimize2 } from 'lucide-react';
 import { Toaster } from 'sonner';
 import StatusPage from './components/StatusPage';
 import DevicesPage from './components/DevicesPage';
@@ -47,6 +47,25 @@ export default function App() {
   const [showSearch, setShowSearch] = useState(false);
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const [devicesOpenId, setDevicesOpenId] = useState<string | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', onChange);
+    document.addEventListener('webkitfullscreenchange', onChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', onChange);
+      document.removeEventListener('webkitfullscreenchange', onChange);
+    };
+  }, []);
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      (document.documentElement.requestFullscreen?.() ?? (document.documentElement as any).webkitRequestFullscreen?.());
+    } else {
+      (document.exitFullscreen?.() ?? (document as any).webkitExitFullscreen?.());
+    }
+  };
 
   const pages = {
     status: <StatusPage config={config} setConfig={setConfig} />,
@@ -192,6 +211,13 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
             <img src={logoSvg} alt="Meatloaf" className="h-full max-h-[56px] w-auto object-contain" />
           </div>
           <div className="flex items-center gap-3">
+            <button
+              onClick={toggleFullscreen}
+              className="p-2 hover:bg-[#5e5e5e] rounded-lg"
+              aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+            >
+              {isFullscreen ? <Minimize2 className="w-5 h-5 text-white" /> : <Maximize2 className="w-5 h-5 text-white" />}
+            </button>
             <button
               onClick={() => setShowSearch(true)}
               className="p-2 hover:bg-[#5e5e5e] rounded-lg"