From ddc62adc923b2668207c4c7a527ed221c9ba9393 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Mon, 9 Nov 2026 19:55:38 +0100
Subject: feat: fullscreen toggle for the tablet browser

---
 static/app.js     | 10 ++++++++++
 static/deck.css   | 22 +++++++++++++++++++++-
 static/index.html |  5 ++++-
 3 files changed, 35 insertions(+), 2 deletions(-)

(limited to 'static')

diff --git a/static/app.js b/static/app.js
index ce3ec62..d125d69 100644
--- a/static/app.js
+++ b/static/app.js
@@ -186,6 +186,16 @@ async function boot() {
   showTab(tabs[saved] ? saved : "Dashboard");
 }
 
+const fullscreenButton = document.getElementById("fullscreen");
+fullscreenButton?.addEventListener("click", async () => {
+  try {
+    if (document.fullscreenElement) await document.exitFullscreen();
+    else await document.documentElement.requestFullscreen();
+  } catch {
+    // the browser refused; nothing to do
+  }
+});
+
 document.addEventListener("visibilitychange", () => {
   if (document.visibilityState === "visible") refreshers.forEach((fn) => fn());
 });
diff --git a/static/deck.css b/static/deck.css
index 90500ba..5bd8a5d 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -16,7 +16,27 @@ body {
   overflow: hidden;
 }
 
-.tabs { flex: none; display: flex; gap: 6px; padding: 8px 14px 0; }
+.topbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px 0;
+}
+.tabs { flex: 1; display: flex; gap: 6px; min-width: 0; }
+.fs {
+  flex: none;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--udt-subtext0);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.fs:hover { background: var(--udt-surface1); color: var(--udt-text); }
 .tabs button {
   font: inherit;
   color: var(--udt-subtext0);
diff --git a/static/index.html b/static/index.html
index 24cdf77..958580f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -14,7 +14,10 @@
 <title>deck-it</title>
 </head>
 <body>
-<nav id="tabs" class="tabs"></nav>
+<header class="topbar">
+  <nav id="tabs" class="tabs"></nav>
+  <button id="fullscreen" class="fs" aria-label="Toggle fullscreen">⛶</button>
+</header>
 <div id="tab-body"></div>
 <script src="vendor/gridstack/gridstack-all.js"></script>
 <script type="module" src="app.js"></script>
-- 
cgit v1.2.3