From e8f1971d63692d373551e34b255631f62b61dc42 Mon Sep 17 00:00:00 2001 From: grabbit Date: Wed, 18 Feb 2026 19:31:54 +0800 Subject: [PATCH] Add auto-refresh toggle for web UI tabs with localStorage persistence Periodic client-side refresh for Shares/Config tabs using Alpine.js setInterval, with toggle and configurable interval (2-30s) in header. Dashboard (SSE) and Logs (own polling) are excluded. Shares tab preserves row expansion state across refreshes via ?expand= param. Adds [x-cloak] CSS rule and conditional x-cloak on detail rows to prevent flash during content swaps. Co-Authored-By: Claude Opus 4.6 --- static/style.css | 28 ++++++++++++++++++++ templates/web/layout.html | 47 +++++++++++++++++++++++++++++++++- templates/web/tabs/shares.html | 2 +- 3 files changed, 75 insertions(+), 2 deletions(-) diff --git a/static/style.css b/static/style.css index 3455da7..6bc4d83 100644 --- a/static/style.css +++ b/static/style.css @@ -15,6 +15,7 @@ } * { box-sizing: border-box; margin: 0; padding: 0; } +[x-cloak] { display: none !important; } body { background: var(--bg); @@ -571,6 +572,33 @@ textarea:focus { color: var(--text); } +/* ─── Auto-refresh controls ───────────────────────────── */ + +.auto-refresh-controls { + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 0.8em; + color: var(--text-muted); +} +.auto-refresh-controls .label-text { + user-select: none; +} +.interval-select { + background: var(--surface); + color: var(--text-muted); + border: 1px solid var(--border); + border-radius: 4px; + padding: 2px 6px; + font-size: 1em; + font-family: var(--font); +} +.interval-select:focus { outline: none; border-color: var(--accent); } +.interval-select:disabled { opacity: 0.4; cursor: not-allowed; } +.toggle-sm .slider { width: 28px; height: 16px; } +.toggle-sm .slider::after { width: 12px; height: 12px; } +.toggle-sm input:checked + .slider::after { transform: translateX(12px); } + /* ─── Responsive ───────────────────────────────────────── */ @media (max-width: 768px) { diff --git a/templates/web/layout.html b/templates/web/layout.html index a0401b9..f3743d3 100644 --- a/templates/web/layout.html +++ b/templates/web/layout.html @@ -9,13 +9,58 @@ - +

Warpgate

Uptime: {{ uptime }}  |  Config: {{ config_path }}
+
+ Auto-refresh + + +