Merge main via the stage-display branch: data dir, installer, versioning
Adopts the new contract: the manifest declares "proddash": ">=1.2.0" (this module's admin device picker needs the optionsRoute select support this branch adds), module version 1.2.0, and the shell version bumps 1.1.0 → 1.2.0 for that admin capability. The optionsRoute paragraph merged into the guide's new schema section cleanly. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Waters Church
@@ -35,6 +35,18 @@ body { overflow: auto; }
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.admin-storage { margin-top: -6px; font-size: 12px; }
|
||||
.admin-storage code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 11.5px;
|
||||
color: var(--text);
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
padding: 1px 5px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
@@ -158,3 +170,68 @@ body { overflow: auto; }
|
||||
.layout-row .name { flex: 1; font-size: 13px; font-weight: 600; }
|
||||
.layout-row .meta { color: var(--muted); font-size: 11px; }
|
||||
.layouts-empty { color: var(--muted); font-size: 13px; }
|
||||
|
||||
/* ── version, update banner, catalog ───────────────────────────────── */
|
||||
|
||||
.admin-version {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-left: 4px;
|
||||
vertical-align: 2px;
|
||||
}
|
||||
|
||||
.update-card {
|
||||
border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
|
||||
background: color-mix(in srgb, var(--warn) 7%, var(--panel));
|
||||
margin-top: 18px;
|
||||
}
|
||||
.update-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.update-head strong { font-size: 14px; }
|
||||
.update-head .spacer { flex: 1; }
|
||||
.update-card .admin-copy { margin: 8px 0 0; }
|
||||
|
||||
.btn.small { padding: 4px 9px; font-size: 12px; }
|
||||
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
|
||||
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 14%, var(--bg)); }
|
||||
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
|
||||
a.btn { text-decoration: none; }
|
||||
|
||||
.module-source {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.module-update-slot:empty { display: none; }
|
||||
|
||||
.catalog-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.catalog-toolbar .admin-status { margin-top: 0; }
|
||||
|
||||
.catalog-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.catalog-main { flex: 1; min-width: 0; }
|
||||
.catalog-title { display: flex; align-items: center; gap: 8px; }
|
||||
.catalog-row .module-desc { margin: 4px 0 2px; }
|
||||
.catalog-row .module-health { margin-top: 2px; }
|
||||
|
||||
+254
-6
@@ -12,6 +12,19 @@ const modulesList = document.getElementById('modules-list');
|
||||
const layoutsSection = document.getElementById('layouts-section');
|
||||
const layoutsList = document.getElementById('layouts-list');
|
||||
const toastEl = document.getElementById('toast');
|
||||
const availableSection = document.getElementById('available-section');
|
||||
const availableList = document.getElementById('available-list');
|
||||
const catalogStatus = document.getElementById('catalog-status');
|
||||
const updateCard = document.getElementById('update-card');
|
||||
const updateTitle = document.getElementById('update-title');
|
||||
const updateCopy = document.getElementById('update-copy');
|
||||
const updateStatus = document.getElementById('update-status');
|
||||
const updateBtn = document.getElementById('update-btn');
|
||||
const updateChanges = document.getElementById('update-changes');
|
||||
const shellVersionEl = document.getElementById('shell-version');
|
||||
|
||||
/** The shell version the page loaded with — the update flow watches it change. */
|
||||
let shellVersion = '';
|
||||
|
||||
let toastTimer = null;
|
||||
function toast(msg, isError = false) {
|
||||
@@ -42,7 +55,9 @@ async function api(path, opts = {}) {
|
||||
function showLogin() {
|
||||
loginCard.hidden = false;
|
||||
modulesSection.hidden = true;
|
||||
availableSection.hidden = true;
|
||||
layoutsSection.hidden = true;
|
||||
updateCard.hidden = true;
|
||||
passcodeInput.focus();
|
||||
}
|
||||
|
||||
@@ -191,9 +206,43 @@ function buildModuleCard(mod) {
|
||||
version.className = 'module-version';
|
||||
version.textContent = mod.version ? 'v' + mod.version : '';
|
||||
|
||||
const source = document.createElement('span');
|
||||
source.className = 'module-source';
|
||||
source.textContent = mod.source === 'installed' ? 'installed' : 'bundled';
|
||||
source.title = mod.source === 'installed'
|
||||
? 'Installed from the repo into the data directory'
|
||||
: 'Ships with this copy of ProdDash';
|
||||
|
||||
const spacer = document.createElement('span');
|
||||
spacer.className = 'spacer';
|
||||
|
||||
// filled by the catalog when the repo has a newer version
|
||||
const updateSlot = document.createElement('span');
|
||||
updateSlot.className = 'module-update-slot';
|
||||
|
||||
const uninstall = document.createElement('button');
|
||||
uninstall.className = 'btn small danger';
|
||||
uninstall.textContent = 'Uninstall';
|
||||
uninstall.title = mod.source === 'installed'
|
||||
? 'Remove this module\'s files from the data directory'
|
||||
: 'Hide this bundled module from every dashboard (its folder stays with the app)';
|
||||
uninstall.addEventListener('click', async () => {
|
||||
const what = mod.source === 'installed'
|
||||
? `Uninstall ${mod.name}? Its files are removed from the data directory. Its settings are kept in case you install it again.`
|
||||
: `Uninstall ${mod.name}? It disappears from every dashboard and the picker. It ships with ProdDash, so it can be brought back from "Available modules" any time.`;
|
||||
if (!window.confirm(what)) return;
|
||||
uninstall.disabled = true;
|
||||
try {
|
||||
await api(`/api/admin/modules/${encodeURIComponent(mod.id)}`, { method: 'DELETE' });
|
||||
toast(`${mod.name} uninstalled`);
|
||||
await loadState();
|
||||
} catch (e) {
|
||||
uninstall.disabled = false;
|
||||
if (e.authRequired) showLogin();
|
||||
else toast(e.message, true);
|
||||
}
|
||||
});
|
||||
|
||||
const toggleLabel = document.createElement('label');
|
||||
toggleLabel.className = 'switch';
|
||||
const toggle = document.createElement('input');
|
||||
@@ -205,7 +254,7 @@ function buildModuleCard(mod) {
|
||||
toggleText.textContent = mod.enabled ? 'Enabled' : 'Disabled';
|
||||
toggleLabel.append(toggle, track, toggleText);
|
||||
|
||||
head.append(dot, name, version, spacer, toggleLabel);
|
||||
head.append(dot, name, version, source, spacer, updateSlot, toggleLabel, uninstall);
|
||||
card.appendChild(head);
|
||||
|
||||
const desc = document.createElement('div');
|
||||
@@ -220,11 +269,13 @@ function buildModuleCard(mod) {
|
||||
|
||||
const mountError = document.createElement('div');
|
||||
mountError.className = 'module-mount-error';
|
||||
mountError.hidden = !mod.mountError;
|
||||
mountError.textContent = mod.mountError ? `Failed to start: ${mod.mountError}` : '';
|
||||
mountError.hidden = !mod.mountError && !mod.incompatible;
|
||||
mountError.textContent = mod.incompatible
|
||||
? `Not loaded — ${mod.incompatible}. Update ProdDash from the banner above.`
|
||||
: (mod.mountError ? `Failed to start: ${mod.mountError}` : '');
|
||||
card.appendChild(mountError);
|
||||
|
||||
liveEls.set(mod.id, { dot, healthEl, toggle, toggleText, mountError });
|
||||
liveEls.set(mod.id, { dot, healthEl, toggle, toggleText, mountError, updateSlot });
|
||||
|
||||
toggle.addEventListener('change', async () => {
|
||||
try {
|
||||
@@ -310,8 +361,10 @@ async function refreshStatus() {
|
||||
els.dot.className = 'dot ' + healthClass(mod);
|
||||
els.healthEl.textContent = healthText(mod);
|
||||
els.healthEl.className = 'module-health ' + (healthClass(mod) === 'error' ? 'error' : '');
|
||||
els.mountError.hidden = !mod.mountError;
|
||||
els.mountError.textContent = mod.mountError ? `Failed to start: ${mod.mountError}` : '';
|
||||
if (!mod.incompatible) {
|
||||
els.mountError.hidden = !mod.mountError;
|
||||
els.mountError.textContent = mod.mountError ? `Failed to start: ${mod.mountError}` : '';
|
||||
}
|
||||
if (document.activeElement !== els.toggle) {
|
||||
els.toggle.checked = mod.enabled;
|
||||
els.toggleText.textContent = mod.enabled ? 'Enabled' : 'Disabled';
|
||||
@@ -403,14 +456,209 @@ async function loadState() {
|
||||
}
|
||||
loginCard.hidden = true;
|
||||
modulesSection.hidden = false;
|
||||
availableSection.hidden = false;
|
||||
shellVersion = String(state.version || '');
|
||||
shellVersionEl.textContent = shellVersion ? 'v' + shellVersion : '';
|
||||
const storageNote = document.getElementById('storage-note');
|
||||
if (state.dataDir) {
|
||||
document.getElementById('storage-path').textContent = state.dataDir;
|
||||
storageNote.hidden = false;
|
||||
}
|
||||
modulesList.innerHTML = '';
|
||||
liveEls.clear();
|
||||
for (const mod of state.modules || []) {
|
||||
modulesList.appendChild(buildModuleCard(mod));
|
||||
}
|
||||
loadLayouts();
|
||||
loadCatalog(false);
|
||||
}
|
||||
|
||||
/* ── the repo: available modules, module updates, shell update ──────── */
|
||||
|
||||
function fmtTime(ms) {
|
||||
return ms ? new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
|
||||
}
|
||||
|
||||
async function loadCatalog(refresh) {
|
||||
catalogStatus.className = 'admin-status';
|
||||
catalogStatus.textContent = refresh ? 'Checking the repo…' : 'Checking…';
|
||||
let cat;
|
||||
try {
|
||||
cat = await api('/api/admin/catalog' + (refresh ? '?refresh=1' : ''));
|
||||
} catch (e) {
|
||||
if (e.authRequired) return showLogin();
|
||||
catalogStatus.className = 'admin-status error';
|
||||
catalogStatus.textContent = e.message;
|
||||
return;
|
||||
}
|
||||
renderShell(cat.shell || {});
|
||||
renderAvailable(cat);
|
||||
}
|
||||
|
||||
function renderShell(shell) {
|
||||
const remote = shell.remote || {};
|
||||
if (remote.error) {
|
||||
catalogStatus.className = 'admin-status error';
|
||||
catalogStatus.textContent = `Couldn't reach ${shell.repo}: ${remote.error}`;
|
||||
} else {
|
||||
catalogStatus.className = 'admin-status';
|
||||
catalogStatus.textContent = `${shell.repo}@${shell.branch}` +
|
||||
(remote.version ? ` · latest ProdDash ${remote.version}` : '') +
|
||||
(remote.checkedAt ? ` · checked ${fmtTime(remote.checkedAt)}` : '');
|
||||
}
|
||||
if (!shell.updateAvailable) {
|
||||
updateCard.hidden = true;
|
||||
return;
|
||||
}
|
||||
updateCard.hidden = false;
|
||||
updateTitle.textContent = shell.versionBehind
|
||||
? `ProdDash ${remote.version} is available`
|
||||
: `New commits on ${shell.branch}`;
|
||||
const where = shell.local?.isGit
|
||||
? `a git checkout of ${shell.local.branch} at ${String(shell.local.sha || '').slice(0, 7)}; updating runs git pull`
|
||||
: 'not a git checkout; updating unpacks the repo archive over the app folder';
|
||||
updateCopy.textContent = `You're running ProdDash ${shell.version} (${where}). Settings and layouts live outside the app folder and are not touched.`;
|
||||
updateChanges.href = shell.changesUrl || '#';
|
||||
updateBtn.disabled = Boolean(shell.updateBlocker) || updateBtn.dataset.busy === '1';
|
||||
if (shell.updateBlocker) {
|
||||
updateStatus.className = 'admin-status error';
|
||||
updateStatus.textContent = `Can't update from here: ${shell.updateBlocker}.`;
|
||||
} else if (updateBtn.dataset.busy !== '1') {
|
||||
updateStatus.className = 'admin-status';
|
||||
updateStatus.textContent = 'Updating restarts ProdDash; open dashboards reconnect on their own.';
|
||||
}
|
||||
}
|
||||
|
||||
function renderAvailable(cat) {
|
||||
availableList.innerHTML = '';
|
||||
const updates = cat.updates || [];
|
||||
// newer versions of installed modules → a button on their card
|
||||
for (const els of liveEls.values()) els.updateSlot.innerHTML = '';
|
||||
for (const up of updates) {
|
||||
const els = liveEls.get(up.id);
|
||||
if (!els) continue;
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn small primary';
|
||||
btn.textContent = `Update to v${up.version}`;
|
||||
btn.disabled = !up.compatible;
|
||||
btn.title = up.compatible ? `Download v${up.version} from the repo` : up.reason;
|
||||
btn.addEventListener('click', () => installFromCatalog(up, btn));
|
||||
els.updateSlot.appendChild(btn);
|
||||
}
|
||||
const available = cat.available || [];
|
||||
if (!available.length) {
|
||||
const none = document.createElement('div');
|
||||
none.className = 'layouts-empty';
|
||||
none.textContent = cat.shell?.remote?.error
|
||||
? 'The repo could not be reached, and nothing bundled is waiting to be installed.'
|
||||
: 'Everything the repo offers is installed.';
|
||||
availableList.appendChild(none);
|
||||
return;
|
||||
}
|
||||
for (const item of available) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'catalog-row';
|
||||
const main = document.createElement('div');
|
||||
main.className = 'catalog-main';
|
||||
const title = document.createElement('div');
|
||||
title.className = 'catalog-title';
|
||||
const name = document.createElement('span');
|
||||
name.className = 'module-name';
|
||||
name.textContent = item.name;
|
||||
const version = document.createElement('span');
|
||||
version.className = 'module-version';
|
||||
version.textContent = item.version ? 'v' + item.version : '';
|
||||
const source = document.createElement('span');
|
||||
source.className = 'module-source';
|
||||
source.textContent = item.source === 'bundled' ? 'bundled' : 'repo';
|
||||
source.title = item.source === 'bundled' ? 'Ships with this copy of ProdDash — restoring it downloads nothing' : 'Downloaded from the repo';
|
||||
title.append(name, version, source);
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'module-desc';
|
||||
desc.textContent = item.description || '';
|
||||
const req = document.createElement('div');
|
||||
req.className = 'module-health' + (item.compatible ? '' : ' error');
|
||||
req.textContent = item.compatible
|
||||
? (item.requires ? `Requires ProdDash ${item.requires}` : '')
|
||||
: item.reason;
|
||||
main.append(title, desc, req);
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn small primary';
|
||||
btn.textContent = 'Install';
|
||||
btn.disabled = !item.compatible;
|
||||
btn.title = item.compatible ? '' : item.reason;
|
||||
btn.addEventListener('click', () => installFromCatalog(item, btn));
|
||||
row.append(main, btn);
|
||||
availableList.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
async function installFromCatalog(item, btn) {
|
||||
btn.disabled = true;
|
||||
const label = btn.textContent;
|
||||
btn.textContent = 'Installing…';
|
||||
try {
|
||||
const r = await api(`/api/admin/modules/${encodeURIComponent(item.id)}/install`, { method: 'POST', body: '{}' });
|
||||
toast(`${item.name} ${r.downloaded ? 'installed' : 'restored'}${r.version ? ' (v' + r.version + ')' : ''}`);
|
||||
await loadState();
|
||||
} catch (e) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = label;
|
||||
if (e.authRequired) showLogin();
|
||||
else toast(e.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('catalog-refresh').addEventListener('click', () => loadCatalog(true));
|
||||
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
|
||||
/** After the update the server exits and comes back; wait for it. */
|
||||
async function waitForRestart(before) {
|
||||
const started = Date.now();
|
||||
let sawDown = false;
|
||||
while (Date.now() - started < 90000) {
|
||||
await sleep(1500);
|
||||
try {
|
||||
const s = await api('/api/admin/state');
|
||||
if (sawDown || s.version !== before) {
|
||||
toast(`ProdDash ${s.version} is running`);
|
||||
await sleep(600);
|
||||
location.reload();
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.status === 401) { location.reload(); return; } // back up, passcode wanted again
|
||||
sawDown = true;
|
||||
}
|
||||
}
|
||||
updateStatus.className = 'admin-status error';
|
||||
updateStatus.textContent = 'ProdDash did not come back on its own — start it again on the server, then reload this page.';
|
||||
updateBtn.dataset.busy = '';
|
||||
updateBtn.disabled = false;
|
||||
}
|
||||
|
||||
updateBtn.addEventListener('click', async () => {
|
||||
if (!window.confirm('Update ProdDash now? The server restarts and every open dashboard reconnects a few seconds later.')) return;
|
||||
updateBtn.dataset.busy = '1';
|
||||
updateBtn.disabled = true;
|
||||
updateStatus.className = 'admin-status';
|
||||
updateStatus.textContent = 'Updating…';
|
||||
const before = shellVersion;
|
||||
try {
|
||||
const r = await api('/api/admin/update', { method: 'POST', body: '{}' });
|
||||
updateStatus.textContent = `Updated ${r.from} → ${r.to || 'latest commit'} via ${r.method}. Restarting…`;
|
||||
} catch (e) {
|
||||
updateStatus.className = 'admin-status error';
|
||||
updateStatus.textContent = e.message;
|
||||
updateBtn.dataset.busy = '';
|
||||
updateBtn.disabled = false;
|
||||
if (e.authRequired) showLogin();
|
||||
return;
|
||||
}
|
||||
await waitForRestart(before);
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
if (modulesSection.hidden) return;
|
||||
refreshStatus();
|
||||
|
||||
+27
-1
@@ -11,7 +11,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header id="topbar">
|
||||
<span id="brand">Prod<span class="accent">Dash</span> <span class="admin-tag">Admin</span></span>
|
||||
<span id="brand">Prod<span class="accent">Dash</span> <span class="admin-tag">Admin</span> <span class="admin-version" id="shell-version"></span></span>
|
||||
<span class="spacer"></span>
|
||||
<a class="tb-btn" href="/">← Dashboard</a>
|
||||
</header>
|
||||
@@ -27,14 +27,40 @@
|
||||
<div class="admin-status" id="login-status"></div>
|
||||
</section>
|
||||
|
||||
<section class="admin-card update-card" id="update-card" hidden>
|
||||
<div class="update-head">
|
||||
<span class="dot connecting"></span>
|
||||
<strong id="update-title">Update available</strong>
|
||||
<span class="spacer"></span>
|
||||
<a class="btn small" id="update-changes" href="#" target="_blank" rel="noopener">What changed</a>
|
||||
<button class="btn small primary" id="update-btn">Update now</button>
|
||||
</div>
|
||||
<p class="admin-copy" id="update-copy"></p>
|
||||
<div class="admin-status" id="update-status"></div>
|
||||
</section>
|
||||
|
||||
<section id="modules-section" hidden>
|
||||
<h1 class="admin-h1">Modules</h1>
|
||||
<p class="admin-copy">Server-wide settings, shared by every dashboard. Saving re-initialises the
|
||||
module immediately — open tiles reconnect on their own. Per-tile options (filters, text size)
|
||||
live in each tile's gear menu instead.</p>
|
||||
<p class="admin-copy admin-storage" id="storage-note" hidden>Saved on the server at
|
||||
<code id="storage-path"></code> — outside the app folder, so updating ProdDash keeps them.</p>
|
||||
<div id="modules-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="available-section" hidden>
|
||||
<h1 class="admin-h1">Available modules</h1>
|
||||
<p class="admin-copy">Modules in the ProdDash repo that aren't installed here. Installing downloads the module
|
||||
into the server's data directory — no restart, nothing written into the app folder. A module that needs a
|
||||
newer ProdDash can't be installed until the shell is updated.</p>
|
||||
<div class="catalog-toolbar">
|
||||
<button class="btn small" id="catalog-refresh">Check again</button>
|
||||
<span class="admin-status" id="catalog-status"></span>
|
||||
</div>
|
||||
<div id="available-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="layouts-section" hidden>
|
||||
<h1 class="admin-h1">Named layouts</h1>
|
||||
<p class="admin-copy">Layouts saved to the server from the dashboard's Layout menu. Loading one
|
||||
|
||||
+1
-1
@@ -42,7 +42,7 @@
|
||||
<div class="menu" id="layout-menu" hidden></div>
|
||||
</div>
|
||||
|
||||
<a class="tb-btn" href="/admin/" title="Configure modules (server-wide)">
|
||||
<a class="tb-btn" id="admin-link" href="/admin/" title="Configure modules (server-wide)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm8.4-2.1.1-1.4-.1-1.4 1.7-1.3-1.6-2.8-2 .7a7.9 7.9 0 0 0-2.4-1.4l-.3-2.1H11l-.3 2.1a7.9 7.9 0 0 0-2.4 1.4l-2-.7L4.7 9.3 6.4 10.6l-.1 1.4.1 1.4-1.7 1.3 1.6 2.8 2-.7a7.9 7.9 0 0 0 2.4 1.4l.3 2.1h2.8l.3-2.1a7.9 7.9 0 0 0 2.4-1.4l2 .7 1.6-2.8-1.7-1.3Z"/>
|
||||
</svg>
|
||||
|
||||
+149
-31
@@ -277,6 +277,11 @@ function buildTile(tile) {
|
||||
resizeLeft.className = 'tile-resize-left';
|
||||
resizeLeft.title = 'Drag to resize';
|
||||
|
||||
// pill on the bottom edge: moves that edge (trading rows with tiles below)
|
||||
const resizeBottom = document.createElement('div');
|
||||
resizeBottom.className = 'tile-resize-bottom';
|
||||
resizeBottom.title = 'Drag to adjust height';
|
||||
|
||||
// notch on the title bar's bottom edge: hides/shows the bar
|
||||
const notch = document.createElement('button');
|
||||
notch.className = 'tile-notch';
|
||||
@@ -288,7 +293,7 @@ function buildTile(tile) {
|
||||
saveLayout();
|
||||
});
|
||||
|
||||
el.append(head, body, resize, resizeLeft, notch);
|
||||
el.append(head, body, resize, resizeLeft, resizeBottom, notch);
|
||||
el.classList.toggle('head-hidden', Boolean(tile.headHidden));
|
||||
grid.appendChild(el);
|
||||
|
||||
@@ -299,6 +304,7 @@ function buildTile(tile) {
|
||||
wireDrag(tile, el, head);
|
||||
wireResize(tile, el, resize, false);
|
||||
wireResize(tile, el, resizeLeft, true);
|
||||
wireBottomResize(tile, el, resizeBottom);
|
||||
|
||||
mountModule(tile);
|
||||
return entry;
|
||||
@@ -429,6 +435,79 @@ function wireResize(tile, el, handle, fromLeft) {
|
||||
});
|
||||
}
|
||||
|
||||
/* ── drag the bottom edge: height only ──────────────────────────────── */
|
||||
|
||||
/* The pill on a tile's bottom edge moves that edge. When other tiles sit
|
||||
directly below it (sharing the edge), the drag trades rows with them —
|
||||
the column's total height stays the same, like the seam pill trades
|
||||
columns. With nothing directly below, it simply changes this tile's
|
||||
height. */
|
||||
|
||||
function tilesDirectlyBelow(tile) {
|
||||
return tiles.filter((t) => t !== tile
|
||||
&& t.y === tile.y + tile.h
|
||||
&& t.x < tile.x + tile.w && tile.x < t.x + t.w);
|
||||
}
|
||||
|
||||
function wireBottomResize(tile, el, handle) {
|
||||
handle.addEventListener('pointerdown', (ev) => {
|
||||
if (ev.button !== 0 && ev.pointerType === 'mouse') return;
|
||||
if (document.body.classList.contains('fullscreen')) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
closeSettingsPopovers();
|
||||
handle.setPointerCapture(ev.pointerId);
|
||||
const m = cellMetrics();
|
||||
const sy = ev.clientY;
|
||||
const startH = tile.h;
|
||||
const below = tilesDirectlyBelow(tile).map((t) => ({ t, bottom: t.y + t.h }));
|
||||
const group = [tile.id, ...below.map((b) => b.t.id)];
|
||||
const minH = minSizeOf(tile).h;
|
||||
// the edge can rise until this tile hits its minimum, and drop until the
|
||||
// shortest neighbour below hits its own
|
||||
const maxH = below.length
|
||||
? Math.min(...below.map((b) => b.bottom - minSizeOf(b.t).h)) - tile.y
|
||||
: Infinity;
|
||||
el.classList.add('resizing');
|
||||
grid.classList.add('no-dividers');
|
||||
let changed = false;
|
||||
|
||||
const onMove = (e) => {
|
||||
const dRows = Math.round((e.clientY - sy) / (m.ch + m.gap));
|
||||
const h = Math.max(minH, Math.min(maxH, startH + dRows));
|
||||
if (h === tile.h || h > maxH) return;
|
||||
const edge = tile.y + h;
|
||||
const candSelf = { x: tile.x, y: tile.y, w: tile.w, h };
|
||||
const candBelow = below.map((b) => ({ x: b.t.x, y: edge, w: b.t.w, h: b.bottom - edge }));
|
||||
if (!isFreeExcept(candSelf, group) || candBelow.some((c) => !isFreeExcept(c, group))) return;
|
||||
tile.h = h;
|
||||
applyRect(tile);
|
||||
notifyResize(tile);
|
||||
below.forEach((b, i) => {
|
||||
b.t.y = candBelow[i].y;
|
||||
b.t.h = candBelow[i].h;
|
||||
applyRect(b.t);
|
||||
notifyResize(b.t);
|
||||
});
|
||||
changed = true;
|
||||
};
|
||||
const onUp = () => {
|
||||
handle.removeEventListener('pointermove', onMove);
|
||||
handle.removeEventListener('pointerup', onUp);
|
||||
handle.removeEventListener('pointercancel', onUp);
|
||||
el.classList.remove('resizing');
|
||||
grid.classList.remove('no-dividers');
|
||||
if (changed) {
|
||||
saveLayout();
|
||||
rebuildDividers();
|
||||
}
|
||||
};
|
||||
handle.addEventListener('pointermove', onMove);
|
||||
handle.addEventListener('pointerup', onUp);
|
||||
handle.addEventListener('pointercancel', onUp);
|
||||
});
|
||||
}
|
||||
|
||||
function notifyResize(tile) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
try {
|
||||
@@ -1079,27 +1158,68 @@ try {
|
||||
/* ── fullscreen: auto-fit the layout to the screen ──────────────────── */
|
||||
|
||||
/* Fullscreen is a viewing mode. The occupied columns stretch proportionally
|
||||
to the full width; tiles whose bottom edge lands near the bottom of the
|
||||
viewport are stretched to end exactly at it; when nothing extends below
|
||||
the viewport, scrolling is disabled. All of it is visual-only — the saved
|
||||
to the full width, and every column runs to the bottom of the screen: the
|
||||
bottom-most tile of each column stretches to end exactly there. A small
|
||||
tile (the clock) is never stretched into a ribbon — with a tile above it,
|
||||
it drops to the bottom edge and the tile above grows into the gap; alone
|
||||
in its columns, it stays exactly as it is. When nothing extends below the
|
||||
viewport, scrolling is disabled. All of it is visual-only — the saved
|
||||
layout is untouched and everything reverts on exit. */
|
||||
|
||||
const fsBtn = document.getElementById('fs-btn');
|
||||
/** Rows this close to the viewport bottom count as "near" and get stretched. */
|
||||
const FS_NEAR_ROWS = 2;
|
||||
/** Tiles this short (the clock) are moved, never stretched, in fullscreen. */
|
||||
const FS_SMALL_ROWS = 2;
|
||||
let menuHiddenBeforeFs = false;
|
||||
|
||||
function fsSmallExempt(tile) {
|
||||
// A small tile (like the clock) alone in its columns must not become a
|
||||
// full-height ribbon.
|
||||
if (tile.h > 2) return false;
|
||||
return !tiles.some((t) => t !== tile && t.x < tile.x + tile.w && tile.x < t.x + t.w);
|
||||
function colsOverlap(a, b) {
|
||||
return a.x < b.x + b.w && b.x < a.x + a.w;
|
||||
}
|
||||
|
||||
function fsSmall(tile) {
|
||||
return tile.h <= FS_SMALL_ROWS;
|
||||
}
|
||||
|
||||
function fsAloneInColumns(tile) {
|
||||
return !tiles.some((t) => t !== tile && colsOverlap(t, tile));
|
||||
}
|
||||
|
||||
function fsBottomMost(tile) {
|
||||
return !tiles.some((t) => t !== tile
|
||||
&& t.x < tile.x + tile.w && tile.x < t.x + t.w
|
||||
&& t.y >= tile.y + tile.h);
|
||||
return !tiles.some((t) => t !== tile && colsOverlap(t, tile) && t.y >= tile.y + tile.h);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fullscreen row placement for every tile, given R rows on screen:
|
||||
* { id -> { y, h } }. Only bottom-most tiles change (stretch, or drop when
|
||||
* small), plus the tile directly above a dropped small one, which grows
|
||||
* into the space it left — stopping at anything else below it.
|
||||
*/
|
||||
function fullscreenRows(R) {
|
||||
const rows = new Map(tiles.map((t) => [t.id, { y: t.y, h: t.h }]));
|
||||
const dropped = [];
|
||||
for (const tile of tiles) {
|
||||
if (!fsBottomMost(tile)) continue;
|
||||
if (!fsSmall(tile)) {
|
||||
rows.get(tile.id).h = R - tile.y;
|
||||
} else if (!fsAloneInColumns(tile) && R - tile.h > tile.y) {
|
||||
rows.get(tile.id).y = R - tile.h;
|
||||
dropped.push(tile);
|
||||
}
|
||||
}
|
||||
for (const small of dropped) {
|
||||
const gapTop = rows.get(small.id).y;
|
||||
for (const above of tiles) {
|
||||
if (above === small || fsSmall(above) || !colsOverlap(above, small)) continue;
|
||||
if (above.y + above.h !== small.y) continue; // only a tile touching it
|
||||
let limit = gapTop;
|
||||
for (const other of tiles) {
|
||||
if (other === above || other === small || !colsOverlap(above, other)) continue;
|
||||
const oy = rows.get(other.id).y;
|
||||
if (oy >= above.y + above.h) limit = Math.min(limit, oy);
|
||||
}
|
||||
rows.get(above.id).h = Math.max(above.h, limit - above.y);
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
function applyFullscreenFit() {
|
||||
@@ -1128,16 +1248,14 @@ function applyFullscreenFit() {
|
||||
const cellH = (wrapH - (R - 1) * m.gap) / R;
|
||||
grid.style.gridAutoRows = cellH + 'px';
|
||||
|
||||
const rows = fullscreenRows(R);
|
||||
for (const tile of tiles) {
|
||||
applyRect(tile); // reset any previous stretch first
|
||||
const bottom = tile.y + tile.h;
|
||||
if (R - bottom <= FS_NEAR_ROWS && fsBottomMost(tile) && !fsSmallExempt(tile)) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
if (entry) {
|
||||
entry.el.style.gridRow = `${tile.y + 1} / span ${R - tile.y}`;
|
||||
try { entry.instance?.onResize?.(tile.w, R - tile.y); } catch { /* module's problem */ }
|
||||
}
|
||||
}
|
||||
const entry = tileEls.get(tile.id);
|
||||
if (!entry) continue;
|
||||
const r = rows.get(tile.id);
|
||||
entry.el.style.gridColumn = `${tile.x + 1} / span ${tile.w}`;
|
||||
entry.el.style.gridRow = `${r.y + 1} / span ${r.h}`;
|
||||
try { entry.instance?.onResize?.(tile.w, r.h); } catch { /* module's problem, not the shell's */ }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1174,14 +1292,14 @@ document.addEventListener('fullscreenchange', () => {
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (document.body.classList.contains('fullscreen')) applyFullscreenFit();
|
||||
});
|
||||
|
||||
// the menubar collapse animates, so the grid's final height arrives late
|
||||
topbar.addEventListener('transitionend', () => {
|
||||
if (document.body.classList.contains('fullscreen')) applyFullscreenFit();
|
||||
});
|
||||
// The grid area's size settles late: the browser animates into fullscreen,
|
||||
// then the menubar collapse animates. Re-fit whenever its size changes.
|
||||
let fsRefit = 0;
|
||||
new ResizeObserver(() => {
|
||||
if (!document.body.classList.contains('fullscreen')) return;
|
||||
cancelAnimationFrame(fsRefit);
|
||||
fsRefit = requestAnimationFrame(applyFullscreenFit);
|
||||
}).observe(gridwrap);
|
||||
|
||||
/* ── live updates from the admin page ───────────────────────────────── */
|
||||
|
||||
|
||||
+51
-12
@@ -54,25 +54,30 @@ body.menu-hidden #topbar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* the menubar's own show/hide tab, same as the tile notches */
|
||||
/* The menubar's own show/hide tab. It sits under the ProdDash brand at the
|
||||
left — not screen-centre, where a tile's own (centred) tab would land
|
||||
right under it once both bars are hidden — and wears the accent colour
|
||||
so it never reads as a tile tab. */
|
||||
#topbar-notch {
|
||||
position: fixed;
|
||||
top: var(--topbar-h, 46px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
/* straddles the bar's bottom edge — mostly on the bar, a short lip below
|
||||
it — so it never covers a top-row tile's status dot or title */
|
||||
top: calc(var(--topbar-h, 46px) - 8px);
|
||||
left: 12px;
|
||||
width: 54px;
|
||||
height: 14px;
|
||||
padding: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
cursor: pointer;
|
||||
z-index: 60;
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.15s ease, top 0.22s ease;
|
||||
opacity: 0.55;
|
||||
transition: opacity 0.15s ease, top 0.22s ease, height 0.22s ease;
|
||||
}
|
||||
#topbar-notch:hover { opacity: 1; }
|
||||
/* bar hidden: a slim tab at the very top edge, clear of a top-row tile's dot and title */
|
||||
body.menu-hidden #topbar-notch { top: 0; height: 10px; }
|
||||
#topbar-notch::after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -80,9 +85,8 @@ body.menu-hidden #topbar {
|
||||
height: 3px;
|
||||
margin: 4px auto 0;
|
||||
border-radius: 999px;
|
||||
background: var(--muted);
|
||||
background: var(--bg);
|
||||
}
|
||||
#topbar-notch:hover::after { background: var(--text); }
|
||||
|
||||
#brand {
|
||||
font-weight: 800;
|
||||
@@ -411,6 +415,39 @@ body.menu-hidden #topbar {
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
|
||||
/* bottom-edge pill: drag to move the tile's bottom edge (height only);
|
||||
sits between the two corner handles */
|
||||
.tile-resize-bottom {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 0;
|
||||
height: 10px;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
cursor: ns-resize;
|
||||
touch-action: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.tile-resize-bottom::after {
|
||||
content: "";
|
||||
width: 44px;
|
||||
max-width: 60%;
|
||||
height: 5px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 999px;
|
||||
background: var(--muted);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.tile:hover .tile-resize-bottom { opacity: 0.6; }
|
||||
.tile .tile-resize-bottom:hover,
|
||||
.tile.resizing .tile-resize-bottom { opacity: 1; }
|
||||
.tile .tile-resize-bottom:hover::after,
|
||||
.tile.resizing .tile-resize-bottom::after { background: var(--text); }
|
||||
|
||||
/* ── seam divider between adjacent tiles ───────────────────────────── */
|
||||
|
||||
/* When two tiles share a vertical edge, an invisible strip sits on the seam;
|
||||
@@ -452,7 +489,9 @@ body.menu-hidden #topbar {
|
||||
editing affordances (corner handles, seam pills) are parked. */
|
||||
body.fullscreen .tile-resize,
|
||||
body.fullscreen .tile-resize-left,
|
||||
body.fullscreen .tile-divider { display: none; }
|
||||
body.fullscreen .tile-resize-bottom,
|
||||
body.fullscreen .tile-divider,
|
||||
body.fullscreen #admin-link { display: none; }
|
||||
body.fullscreen #grid { padding-bottom: 0; }
|
||||
#gridwrap.no-scroll { overflow-y: hidden; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user