From 84916f24d22cc32b5f51bbc7794b37848469edc8 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Tue, 10 Nov 2026 10:40:37 +0100
Subject: feat: fold dashboard cards and a reload button

Each Dashboard card gets a fold button in its title bar. Folded, it
shrinks to one grid row ending at the title bar and cannot be resized;
its height is kept in localStorage (deckit.folded) and restored on
unfold. The grid floats, so nothing moved into the rows a folded card
gave back: cards below it in its columns are pulled up as far as the
space is free, on fold and again once every card has mounted, since a
card restored folded from storage never folds at runtime. Unfolding
needs no mirror; the grid pushes down whatever the regrown card hits.

The installed web app has no browser chrome and so no pull-to-refresh,
which left no way to load new page code on the tablet. A reload button
sits at the top right; JS and CSS are served no-store, so it always
fetches the current code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/deck.css | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

(limited to 'static/deck.css')

diff --git a/static/deck.css b/static/deck.css
index f0a9fdc..8a318ef 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -37,10 +37,28 @@ body {
 
 .topbar {
   flex: none;
+  position: relative;
   display: flex;
   justify-content: center;
   padding: 8px 14px 0;
 }
+/* The installed web app has no browser chrome, so no pull-to-refresh. */
+.reload {
+  position: absolute;
+  right: 14px;
+  top: 8px;
+  min-width: 44px;
+  min-height: 40px;
+  font: inherit;
+  font-size: 1.286rem;
+  line-height: 1;
+  color: var(--udt-subtext0);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.reload:active { background: var(--udt-surface0); border-color: var(--udt-surface1); }
 .tabs { display: flex; gap: 6px; }
 .tabs button {
   font: inherit;
@@ -143,6 +161,21 @@ body {
   touch-action: none;
 }
 .panel-drag:hover { color: var(--udt-subtext0); background: var(--udt-surface1); }
+.panel-fold {
+  font: inherit;
+  min-width: 36px;
+  min-height: 32px;
+  color: var(--udt-overlay0);
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.panel-fold:hover { color: var(--udt-subtext0); background: var(--udt-surface1); }
+/* Folded: the card ends at its title bar instead of filling its grid row. */
+.grid-stack > .grid-stack-item > .grid-stack-item-content.panel.folded { bottom: auto; }
+.panel.folded .panel-body { display: none; }
+.panel.folded .panel-head { border-bottom: 0; }
 .panel-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
 
 .section-label {
-- 
cgit v1.2.3