feat: center the tabs and swipe to switch them

1 files changed, 25 insertions, 7 deletions

diff --git a/static/app.js b/static/app.js
index d125d69..296166a 100644
--- a/static/app.js
+++ b/static/app.js
@@ -186,15 +186,33 @@ 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
+function stepTab(dir) {
+  const names = [...tabBar.children].map((button) => button.textContent);
+  const at = names.findIndex((name) => !tabs[name]?.section.hidden);
+  const next = at + dir;
+  if (at !== -1 && next >= 0 && next < names.length) showTab(names[next]);
+}
+
+// Swipe the content sideways to change tab; gestures on sliders and buttons
+// (including the card drag handles) are theirs, not the shell's.
+let swipe = null;
+tabBody.addEventListener("pointerdown", (e) => {
+  if (e.pointerType === "mouse" && e.buttons !== 1) return;
+  if (e.target.closest("input, select, textarea, button")) {
+    swipe = null;
+    return;
   }
+  swipe = { x: e.clientX, y: e.clientY };
+});
+tabBody.addEventListener("pointerup", (e) => {
+  if (!swipe) return;
+  const dx = e.clientX - swipe.x;
+  const dy = e.clientY - swipe.y;
+  swipe = null;
+  if (Math.abs(dx) < 70 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+  stepTab(dx < 0 ? 1 : -1);
 });
+tabBody.addEventListener("pointercancel", () => { swipe = null; });
 
 document.addEventListener("visibilitychange", () => {
   if (document.visibilityState === "visible") refreshers.forEach((fn) => fn());