feat: fullscreen toggle for the tablet browser

4 files changed, 36 insertions, 2 deletions

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>
diff --git a/tests/test_frontend.py b/tests/test_frontend.py
index 8c8fdb8..d86468d 100644
--- a/tests/test_frontend.py
+++ b/tests/test_frontend.py
@@ -85,6 +85,7 @@ class Frontend(unittest.TestCase):
     def test_tabbed_shell(self):
         self.assertIn(b'id="tabs"', self.get("/")[1])
         self.assertIn(b'id="tab-body"', self.get("/")[1])
+        self.assertIn(b'id="fullscreen"', self.get("/")[1])
         app = self.get("/app.js")[1]
         for part in (b"deckit.tab", b"ensureTab", b"showTab"):
             self.assertIn(part, app)