Static Administration tab bar; backup page UX improvements (v0.11.95)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-gateway",
-  "version": "0.11.88",
+  "version": "0.11.95",
   "private": true,
   "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
   "type": "module",

src/public/app.js

@@ -448,8 +448,8 @@ function openCreate() {
   if (state.view === "streaming") { $("#stream-form").reset(); delete $("#stream-form").dataset.editing; $("#stream-title").textContent = "Create a streaming host"; $("#stream-form .button.primary").textContent = "Create streaming host"; $("#stream-error").textContent = ""; return $("#stream-dialog").showModal(); }
   if (state.view === "redirects") { $("#redirect-form").reset(); delete $("#redirect-form").dataset.editing; $("#redirect-error").textContent = ""; return $("#redirect-dialog").showModal(); }
   if (state.view === "access") { $("#access-form").reset(); delete $("#access-form").dataset.editing; $("#access-error").textContent = ""; $("#access-form .access-create-guidance")?.remove(); const assignmentSummary = $("#access-assignment-summary"); assignmentSummary?.classList.add("hidden"); if (assignmentSummary) assignmentSummary.innerHTML = ""; window.renderCredentialEditor?.([]); return $("#access-dialog").showModal(); }
-  if (state.view === "proxies") { $("#proxy-form").reset(); $("#custom-certificate-fields").classList.remove("custom-certificate-visible"); $("#proxy-error").textContent = ""; return $("#proxy-dialog").showModal(); }
+  if (state.view === "proxies") { $("#proxy-form").reset(); $("#proxy-form").querySelectorAll("details").forEach(details => details.open = false); $("#custom-certificate-fields").classList.remove("custom-certificate-visible"); $("#proxy-error").textContent = ""; return $("#proxy-dialog").showModal(); }
-  $("#create-form").reset(); $("#create-error").textContent = ""; const used = new Set(state.sites.map(site => site.port)); let port = state.config.minPort; while (used.has(port)) port++; $("#create-form [name=port]").value = port; $("#create-dialog").showModal();
+  $("#create-form").reset(); $("#create-form").querySelectorAll("details").forEach(details => details.open = false); $("#create-error").textContent = ""; const used = new Set(state.sites.map(site => site.port)); let port = state.config.minPort; while (used.has(port)) port++; $("#create-form [name=port]").value = port; $("#create-dialog").showModal();
 }
 $("#open-create").addEventListener("click", openCreate);
 document.addEventListener("click", event => { if (event.target.closest(".create-trigger")) openCreate(); if (event.target.closest(".close-dialog")) event.target.closest("dialog").close(); if (!event.target.closest(".menu-wrap")) closeMenus(); });
@@ -463,7 +463,7 @@ function ensureHostedHealthFields() { [document.querySelector("#create-form deta
 setInterval(ensureHostedHealthFields, 300);
 function openSettings(kind, id) {
   if (kind === "hosted") kind = "site";
-  const item = (kind === "proxy" ? state.proxies : state.sites).find(value => value.id === id); if (!item) return; state.editing = { kind, id }; const form = $("#settings-form"); form.reset();
+  const item = (kind === "proxy" ? state.proxies : state.sites).find(value => value.id === id); if (!item) return; state.editing = { kind, id }; const form = $("#settings-form"); form.reset(); form.querySelectorAll("details").forEach(details => details.open = false);
   $("#settings-title").textContent = kind === "proxy" ? "Edit proxy host" : "Domain & TLS"; $("#settings-name-wrap").classList.toggle("hidden", kind !== "proxy"); $("#settings-target-wrap").classList.toggle("hidden", kind !== "proxy"); $("#settings-advanced").classList.toggle("hidden", kind !== "proxy"); $("#settings-hosted-advanced").classList.toggle("hidden", kind !== "site");
   form.elements.name.value = item.name || ""; form.elements.domain.value = item.domain || ""; form.elements.target.value = item.target || ""; form.elements.tls.value = item.tls || "automatic"; form.elements.hsts.checked = Boolean(item.hsts); if (form.elements.settingsAccessListId) form.elements.settingsAccessListId.value = item.accessListId || "";
   if (kind === "proxy") {

src/public/styles.css

@@ -52,7 +52,7 @@ main{padding-top:24px}.utility-bar{display:flex;align-items:center;justify-conte
 @media(max-width:600px){.icon-results{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-picker .dialog-actions{flex-wrap:wrap}.icon-picker .dialog-actions button:first-child{width:100%}}
 
 /* Administration, documentation, redirects, and progressive disclosure */
-.aside-utilities{margin-top:auto;padding:16px 0 14px;border-top:1px solid var(--line);display:grid;gap:4px}.aside-utilities button{width:100%;border:0;border-radius:10px;padding:11px 12px;text-align:left;background:transparent;color:var(--muted);cursor:pointer}.aside-utilities button:hover,.aside-utilities button.nav-active{background:var(--panel2);color:var(--text)}.aside-footer{margin-top:0}.admin-tabs{display:flex;gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:auto}.admin-tabs button{width:auto;white-space:nowrap;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.admin-tabs .tab-active{background:var(--panel2);color:var(--text)}.settings-panel{max-width:980px}.settings-panel>h2{margin:0 0 6px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.settings-form>label:has(textarea),.settings-form>.dialog-actions,.settings-form>.error{grid-column:1/-1}.settings-form.compact-grid{grid-template-columns:repeat(4,1fr)}.settings-form.compact-grid .check-control,.settings-form.compact-grid .dialog-actions{grid-column:auto}textarea{display:block;width:100%;min-height:110px;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#0b1525;color:var(--text);font:inherit;resize:vertical;outline:none}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,230,167,.1)}.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;min-height:150px}.callout{display:flex;gap:10px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:.78rem}.callout span{color:var(--muted)}.row-actions{display:flex!important;grid-auto-flow:column!important;justify-content:end;gap:7px}.row-actions .button{padding:8px 10px;font-size:.7rem;text-decoration:none}.backup-row{grid-template-columns:auto minmax(220px,1.5fr) 1fr .7fr auto}.padded{padding:22px}.redirect-card .site-icon{background:#163c35;color:var(--green)}.redirect-card .card-footer{gap:12px}.redirect-card .button{padding:7px 9px;font-size:.68rem}.chip{padding:5px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:.68rem}details{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:rgba(8,16,29,.28)}summary{padding:14px 16px;color:var(--text);font-weight:750;cursor:pointer}.details-body{padding:0 16px 16px;border-top:1px solid var(--line)}.subform{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px}.docs{display:grid;grid-template-columns:260px 1fr;gap:24px}.doc-search{position:sticky;top:20px;align-self:start;margin:0}.docs-content{display:grid;gap:14px}.docs article{padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.docs article h2{margin:0 0 10px}.docs article p,.docs article li{color:var(--muted);line-height:1.65}.docs article code{color:var(--green)}:root[data-theme="light"] textarea{background:#fff}:root[data-theme="light"] details{background:#f6f9fc}
+.aside-utilities{margin-top:auto;padding:16px 0 14px;border-top:1px solid var(--line);display:grid;gap:4px}.aside-utilities button{width:100%;border:0;border-radius:10px;padding:11px 12px;text-align:left;background:transparent;color:var(--muted);cursor:pointer}.aside-utilities button:hover,.aside-utilities button.nav-active{background:var(--panel2);color:var(--text)}.aside-footer{margin-top:0}.admin-tabs{display:flex;gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:auto}.admin-tabs button{width:auto;white-space:nowrap;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.admin-tabs .tab-active{background:var(--panel2);color:var(--text)}.settings-panel{max-width:980px}.settings-panel-wide{max-width:1280px}.default-site-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:24px;align-items:start}.default-site-preview{margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);position:sticky;top:20px;height:calc(100vh - 40px);display:flex;flex-direction:column;min-height:360px}.default-site-preview .eyebrow{margin:0;flex:none}.default-site-preview small{display:block;margin-top:10px;color:var(--muted);flex:none}.default-site-preview-frame-wrap{margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#08101d;flex:1;min-height:220px}.default-site-preview-frame-wrap iframe{width:100%;height:100%;border:0;background:#08101d;display:block}@media(max-width:860px){.default-site-layout{grid-template-columns:1fr}.default-site-preview{position:static;height:auto}.default-site-preview-frame-wrap{aspect-ratio:4/3}}.settings-panel>h2{margin:0 0 6px}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.settings-form>label:has(textarea),.settings-form>.dialog-actions,.settings-form>.error{grid-column:1/-1}.settings-form.compact-grid{grid-template-columns:repeat(4,1fr)}.settings-form.compact-grid .check-control,.settings-form.compact-grid .dialog-actions{grid-column:auto}textarea{display:block;width:100%;min-height:110px;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#0b1525;color:var(--text);font:inherit;resize:vertical;outline:none}textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(98,230,167,.1)}.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;min-height:150px}.callout{display:flex;gap:10px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:.78rem}.callout span{color:var(--muted)}.row-actions{display:flex!important;grid-auto-flow:column!important;justify-content:end;gap:7px}.row-actions .button{padding:8px 10px;font-size:.7rem;text-decoration:none}.backup-row{grid-template-columns:auto minmax(220px,1.5fr) 1fr .7fr auto}.padded{padding:22px}.redirect-card .site-icon{background:#163c35;color:var(--green)}.redirect-card .card-footer{gap:12px}.redirect-card .button{padding:7px 9px;font-size:.68rem}.chip{padding:5px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);font-size:.68rem}.chip.type-complete{background:rgba(98,230,167,.15);color:var(--green)}.chip.type-configuration{background:var(--panel2);color:var(--muted)}.chip.type-encrypted{background:rgba(94,158,255,.15);color:var(--blue)}.chip.type-unknown{background:rgba(255,113,133,.12);color:var(--danger)}.backup-summary{display:block;margin-top:6px}details{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:rgba(8,16,29,.28)}summary{padding:14px 16px;color:var(--text);font-weight:750;cursor:pointer}.details-body{padding:0 16px 16px;border-top:1px solid var(--line)}.subform{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px}.docs{display:grid;grid-template-columns:260px 1fr;gap:24px}.doc-search{position:sticky;top:20px;align-self:start;margin:0}.docs-content{display:grid;gap:14px}.docs article{padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.docs article h2{margin:0 0 10px}.docs article p,.docs article li{color:var(--muted);line-height:1.65}.docs article code{color:var(--green)}:root[data-theme="light"] textarea{background:#fff}:root[data-theme="light"] details{background:#f6f9fc}
 @media(max-width:900px){.settings-form.compact-grid{grid-template-columns:1fr 1fr}.settings-form .form-grid{grid-template-columns:1fr 1fr}.backup-row{grid-template-columns:auto 1fr}.backup-row>div{grid-column:2}.row-actions{justify-content:start}.docs{grid-template-columns:1fr}.doc-search{position:static}}@media(max-width:600px){.settings-form,.settings-form.compact-grid{grid-template-columns:1fr}.settings-form .form-grid{grid-template-columns:1fr}.settings-form>*{grid-column:1!important}.admin-tabs{margin-left:-5px;margin-right:-5px}}
 #custom-certificate-fields,.custom-certificate-fields{display:none;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px}.custom-certificate-visible{display:block!important}
 dialog{max-height:calc(100vh - 28px);overflow:auto}