Shell 1.13.0: the Layouts menu lists the tiles a layout holds but the board is not showing, with a ✕ to remove each
A tile whose module stopped offering its picker entry — Slack's Send message and Quick replies since the Send Message module took them over — kept its place in the layout and drew nothing, as designed, but still held its grid cells with no control anywhere to let them go: a dead area the operator could not place anything in. The Layouts menu now has a Not shown section, present only while the layout holds such a tile. One row per tile: its title (or the module's name plus the variant, or the module id when it is not installed), why in a few words — "not offered right now", "module disabled", "module needs a newer ProdDash", "module not installed" — and a drawn ✕ with a tooltip that removes it, saves the layout and frees the cells, leaving the menu open as the Grid Size stepper and Alerts do. The section repaints while the menu is open whenever tiles become offered or stop being, and only when the list changed. A tile that merely waits for its module keeps its place as before. GET /api/modules also returns `inactive` — the installed modules that are not running, id, name and reason only — so a dashboard can tell a disabled module from one that is not installed. The toast after loading a named layout now says the Layouts menu can remove the tiles it did not show. README and the module guide updated. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
c9e03398a6
commit
7481d1d9e2
+93
-4
@@ -188,6 +188,10 @@ function menuItem(label, onClick, { sub = '', danger = false, disabled = false,
|
||||
/* ── module registry ────────────────────────────────────────────────── */
|
||||
|
||||
let registry = new Map(); // module id -> manifest from GET /api/modules
|
||||
/* The installed modules that are not running — disabled, or needing a newer
|
||||
shell — id -> { id, name, reason }, from the same GET. Read for one thing:
|
||||
to say why a tile one of them left in the layout is not drawn. */
|
||||
let inactiveModules = new Map();
|
||||
|
||||
/** fetch that gives up after `ms`. A request the browser has queued behind
|
||||
held connections would otherwise pend forever, and so would anything
|
||||
@@ -208,6 +212,7 @@ async function loadRegistry() {
|
||||
if (!res.ok) throw new Error('modules ' + res.status);
|
||||
const body = await res.json();
|
||||
registry = new Map((body.modules || []).map((m) => [m.id, m]));
|
||||
inactiveModules = new Map((body.inactive || []).map((m) => [m.id, m]));
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
@@ -487,7 +492,9 @@ const GEAR_SVG = '<svg viewBox="0 0 90 90" fill="currentColor" aria-hidden="true
|
||||
registry offers them again: a Service timer waits for PCO Plan, a
|
||||
transcript for its channel. Never the module's default in their place —
|
||||
a wall of "All timers" where five different timers were is worse than
|
||||
five gaps that fill themselves in. */
|
||||
five gaps that fill themselves in. For the one that is not coming back
|
||||
(a module stopped offering that kind of tile) the Layouts menu lists them
|
||||
under Not shown, each with a ✕ — the only way to let its cells go. */
|
||||
|
||||
function tileIsOffered(tile) {
|
||||
const man = registry.get(tile.module);
|
||||
@@ -521,6 +528,7 @@ function reconcileOfferedTiles() {
|
||||
if (changed) rebuildDividers();
|
||||
scheduleOfferedRecheck();
|
||||
refreshEmptyState(); // the registry may have gone from nothing to something
|
||||
repaintUnshown(); // a Not shown row goes the moment its tile is drawn again
|
||||
}
|
||||
|
||||
/* A module's entry list can change without anyone saving admin config: PCO
|
||||
@@ -540,10 +548,90 @@ function scheduleOfferedRecheck() {
|
||||
}, OFFERED_RECHECK_MS);
|
||||
}
|
||||
|
||||
/** The tiles a layout holds that the board is not showing, each with what
|
||||
to call it and, in a few words, why it is not drawn. */
|
||||
function unshownTiles() {
|
||||
return tiles.filter((t) => !tileEls.has(t.id)).map((tile) => {
|
||||
const man = registry.get(tile.module);
|
||||
if (man) {
|
||||
const title = tile.title || (tile.variant ? `${man.name} · ${tile.variant}` : man.name);
|
||||
return { tile, title, reason: 'not offered right now' };
|
||||
}
|
||||
const off = inactiveModules.get(tile.module);
|
||||
if (off) {
|
||||
const reason = off.reason === 'incompatible' ? 'module needs a newer ProdDash' : 'module disabled';
|
||||
return { tile, title: tile.title || off.name || tile.module, reason };
|
||||
}
|
||||
return { tile, title: tile.title || tile.module, reason: 'module not installed' };
|
||||
});
|
||||
}
|
||||
|
||||
/** The tiles a layout holds that the board is not showing, by name. */
|
||||
function unshownTileNames() {
|
||||
return tiles.filter((t) => !tileEls.has(t.id))
|
||||
.map((t) => t.title || registry.get(t.module)?.name || t.module);
|
||||
return unshownTiles().map((u) => u.title);
|
||||
}
|
||||
|
||||
/* Repaints the Layouts menu's Not shown section while the menu is open —
|
||||
set by unshownSection(), called whenever tiles become offered or stop
|
||||
being, so the list never lags the board behind it. */
|
||||
let repaintUnshown = () => {};
|
||||
|
||||
/** The Layouts menu's Not shown section: one row per tile the layout holds
|
||||
that the board is not drawing — its name, why in a word or two, and a ✕
|
||||
that removes it — present only while there is one. A tile that waits for
|
||||
its module (a Service timer before PCO Plan is up) is listed but can stay;
|
||||
this exists for the one that will never be back, which would otherwise
|
||||
hold its cells with no control anywhere to let them go. */
|
||||
function unshownSection() {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'menu-unshown';
|
||||
const signature = (list) => list.map((u) => `${u.tile.id}|${u.reason}`).join('\n');
|
||||
let painted = '';
|
||||
const paint = () => {
|
||||
wrap.innerHTML = '';
|
||||
const list = unshownTiles();
|
||||
painted = signature(list);
|
||||
wrap.hidden = !list.length;
|
||||
if (!list.length) return;
|
||||
const divider = document.createElement('div');
|
||||
divider.className = 'menu-divider';
|
||||
const title = document.createElement('div');
|
||||
title.className = 'menu-title';
|
||||
title.textContent = 'Not shown';
|
||||
wrap.append(divider, title);
|
||||
for (const { tile, title: name, reason } of list) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'menu-item menu-unshown-row';
|
||||
const label = document.createElement('span');
|
||||
label.textContent = name;
|
||||
const sub = document.createElement('span');
|
||||
sub.className = 'sub';
|
||||
sub.textContent = reason;
|
||||
label.appendChild(sub);
|
||||
const remove = document.createElement('button');
|
||||
remove.type = 'button';
|
||||
remove.className = 'menu-x';
|
||||
remove.setAttribute('data-tip', 'Remove');
|
||||
remove.setAttribute('aria-label', `Remove ${name}`);
|
||||
remove.innerHTML = CLOSE_SVG;
|
||||
remove.addEventListener('click', (e) => {
|
||||
// The row goes with the tile, so the click must not reach the
|
||||
// document as one from outside the menu — the menu stays open
|
||||
// to show the next row (or none), as the stepper and Alerts do.
|
||||
e.stopPropagation();
|
||||
removeTile(tile.id); // saves the layout and frees the cells, as a drawn tile's ✕ does
|
||||
paint();
|
||||
});
|
||||
row.append(label, remove);
|
||||
wrap.appendChild(row);
|
||||
}
|
||||
};
|
||||
paint();
|
||||
// Only when something changed: the registry is re-read every few seconds
|
||||
// while a tile is folded away, and rows rebuilt under the pointer for
|
||||
// nothing would lose the tooltip (and the click) the operator was on.
|
||||
repaintUnshown = () => { if (wrap.isConnected && signature(unshownTiles()) !== painted) paint(); };
|
||||
return wrap;
|
||||
}
|
||||
|
||||
function buildTile(tile) {
|
||||
@@ -2253,6 +2341,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
|
||||
// how one is arranged.
|
||||
menu.appendChild(gridStepper());
|
||||
menu.appendChild(alertsFold());
|
||||
menu.appendChild(unshownSection()); // only while a tile the layout holds is not drawn
|
||||
const stepperDivider = document.createElement('div');
|
||||
stepperDivider.className = 'menu-divider';
|
||||
menu.appendChild(stepperDivider);
|
||||
@@ -2344,7 +2433,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
|
||||
const count = `${tiles.length} tile${tiles.length === 1 ? '' : 's'}`;
|
||||
const gridNote = COLS !== gridBefore ? ` on a ${COLS}-column grid` : '';
|
||||
const note = unshown.length
|
||||
? `, ${unshown.length} not shown — ${unshown.join(', ')} ${unshown.length === 1 ? 'isn’t' : 'aren’t'} offered right now`
|
||||
? `, ${unshown.length} not shown — ${unshown.join(', ')} ${unshown.length === 1 ? 'isn’t' : 'aren’t'} offered right now; the Layouts menu can remove ${unshown.length === 1 ? 'it' : 'them'}`
|
||||
: '';
|
||||
toast(`Loaded “${l.name}”: ${count}${gridNote}${note}`, false, {
|
||||
ms: unshown.length ? 10000 : 7000,
|
||||
|
||||
Reference in New Issue
Block a user