Shell: server, dashboard grid with drag/resize/remove, localStorage layouts
Milestone 1 of SPEC.md. Zero-dependency Node server serving public/; 12-column tile grid with add (placeholder tile), drag to move, drag to resize, remove; collision-free placement; layout autosaves to this browser's localStorage and survives reload. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
This commit is contained in:
Claude
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ProdDash</title>
|
||||
<meta name="theme-color" content="#0b0e12">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="topbar">
|
||||
<span id="brand">Prod<span class="accent">Dash</span></span>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<div class="dropdown" id="add-dd">
|
||||
<button class="tb-btn" id="add-btn" title="Add a module tile">＋ Add tile ▾</button>
|
||||
<div class="menu" id="add-menu" hidden></div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown" id="layout-dd">
|
||||
<button class="tb-btn" id="layout-btn" title="Save, load or reset layouts">Layout ▾</button>
|
||||
<div class="menu" id="layout-menu" hidden></div>
|
||||
</div>
|
||||
|
||||
<a class="tb-btn" 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>
|
||||
Admin
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main id="gridwrap">
|
||||
<div id="grid">
|
||||
<div id="empty-state">No tiles yet — use “＋ Add tile” to build this dashboard.<br>
|
||||
Every browser keeps its own layout.</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="modal-backdrop" hidden>
|
||||
<div id="modal" role="dialog" aria-modal="true"></div>
|
||||
</div>
|
||||
|
||||
<div id="toast" hidden></div>
|
||||
|
||||
<script type="module" src="/shell.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+605
@@ -0,0 +1,605 @@
|
||||
/* ProdDash shell client.
|
||||
|
||||
Owns the tile grid: adding, dragging, resizing and removing module tiles,
|
||||
plus layout persistence. The layout (tiles, positions, sizes, per-instance
|
||||
settings) autosaves to this browser's localStorage — every browser is fully
|
||||
independent. Modules render inside tile bodies and never touch the shell. */
|
||||
|
||||
const COLS = 12;
|
||||
const LS_LAYOUT = 'proddash:layout';
|
||||
|
||||
const grid = document.getElementById('grid');
|
||||
const gridwrap = document.getElementById('gridwrap');
|
||||
const emptyEl = document.getElementById('empty-state');
|
||||
const toastEl = document.getElementById('toast');
|
||||
|
||||
/* ── tiny helpers ───────────────────────────────────────────────────── */
|
||||
|
||||
let toastTimer = null;
|
||||
function toast(msg, isError = false) {
|
||||
toastEl.textContent = msg;
|
||||
toastEl.classList.toggle('error', isError);
|
||||
toastEl.hidden = false;
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => { toastEl.hidden = true; }, 3200);
|
||||
}
|
||||
|
||||
const modalBackdrop = document.getElementById('modal-backdrop');
|
||||
const modalEl = document.getElementById('modal');
|
||||
|
||||
/** Minimal prompt dialog; resolves with the string or null on cancel. */
|
||||
function promptModal({ title, placeholder = '', value = '', okLabel = 'Save' }) {
|
||||
return new Promise((resolve) => {
|
||||
modalEl.innerHTML = '';
|
||||
const h = document.createElement('h2');
|
||||
h.textContent = title;
|
||||
const field = document.createElement('div');
|
||||
field.className = 'field';
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.placeholder = placeholder;
|
||||
input.value = value;
|
||||
field.appendChild(input);
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'actions';
|
||||
const cancel = document.createElement('button');
|
||||
cancel.className = 'btn';
|
||||
cancel.textContent = 'Cancel';
|
||||
const ok = document.createElement('button');
|
||||
ok.className = 'btn primary';
|
||||
ok.textContent = okLabel;
|
||||
actions.append(cancel, ok);
|
||||
modalEl.append(h, field, actions);
|
||||
modalBackdrop.hidden = false;
|
||||
input.focus();
|
||||
const done = (result) => {
|
||||
modalBackdrop.hidden = true;
|
||||
modalEl.innerHTML = '';
|
||||
resolve(result);
|
||||
};
|
||||
cancel.addEventListener('click', () => done(null));
|
||||
ok.addEventListener('click', () => done(input.value.trim() || null));
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') done(input.value.trim() || null);
|
||||
if (e.key === 'Escape') done(null);
|
||||
});
|
||||
modalBackdrop.addEventListener('click', (e) => {
|
||||
if (e.target === modalBackdrop) done(null);
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
/* ── dropdown menus ─────────────────────────────────────────────────── */
|
||||
|
||||
function wireDropdown(btnId, menuId, rebuild) {
|
||||
const btn = document.getElementById(btnId);
|
||||
const menu = document.getElementById(menuId);
|
||||
btn.addEventListener('click', async () => {
|
||||
if (menu.hidden) await rebuild(menu);
|
||||
menu.hidden = !menu.hidden;
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!menu.hidden && !e.target.closest('#' + btnId) && !e.target.closest('#' + menuId)) {
|
||||
menu.hidden = true;
|
||||
}
|
||||
});
|
||||
return menu;
|
||||
}
|
||||
|
||||
function menuItem(label, onClick, { sub = '', danger = false } = {}) {
|
||||
const item = document.createElement('button');
|
||||
item.className = 'menu-item' + (danger ? ' danger' : '');
|
||||
const span = document.createElement('span');
|
||||
span.textContent = label;
|
||||
if (sub) {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'sub';
|
||||
s.textContent = sub;
|
||||
span.appendChild(s);
|
||||
}
|
||||
item.appendChild(span);
|
||||
item.addEventListener('click', onClick);
|
||||
return item;
|
||||
}
|
||||
|
||||
/* ── module registry ────────────────────────────────────────────────── */
|
||||
|
||||
/* Filled from GET /api/modules once the module system is up (milestone 2).
|
||||
Until then — or if the fetch fails — the shell offers a built-in
|
||||
placeholder tile so the grid itself is usable and testable. */
|
||||
|
||||
const PLACEHOLDER_MANIFEST = {
|
||||
id: '__placeholder',
|
||||
name: 'Placeholder',
|
||||
description: 'An empty tile for trying out the grid',
|
||||
defaultSize: { w: 3, h: 2 },
|
||||
minSize: { w: 1, h: 1 },
|
||||
builtin: true,
|
||||
};
|
||||
|
||||
let registry = new Map(); // module id -> manifest
|
||||
|
||||
async function loadRegistry() {
|
||||
registry = new Map();
|
||||
try {
|
||||
const res = await fetch('/api/modules');
|
||||
if (!res.ok) throw new Error('modules ' + res.status);
|
||||
const body = await res.json();
|
||||
for (const m of body.modules || []) registry.set(m.id, m);
|
||||
} catch {
|
||||
/* no module API yet (or server just restarted) — placeholder only */
|
||||
}
|
||||
if (!registry.size) registry.set(PLACEHOLDER_MANIFEST.id, PLACEHOLDER_MANIFEST);
|
||||
}
|
||||
|
||||
/* ── layout state ───────────────────────────────────────────────────── */
|
||||
|
||||
/** @type {{id:string,module:string,x:number,y:number,w:number,h:number,settings:object}[]} */
|
||||
let tiles = [];
|
||||
const tileEls = new Map(); // tile id -> { el, body, dot, titleEl, instance }
|
||||
|
||||
function saveLayout() {
|
||||
try {
|
||||
localStorage.setItem(LS_LAYOUT, JSON.stringify({ v: 1, tiles }));
|
||||
} catch { /* private mode / full — layout just won't persist */ }
|
||||
}
|
||||
|
||||
function loadLayoutFromStorage() {
|
||||
try {
|
||||
const raw = JSON.parse(localStorage.getItem(LS_LAYOUT) || 'null');
|
||||
if (raw && Array.isArray(raw.tiles)) return raw.tiles;
|
||||
} catch { /* corrupted — start fresh */ }
|
||||
return [];
|
||||
}
|
||||
|
||||
function sanitizeTile(t) {
|
||||
const w = Math.max(1, Math.min(COLS, Number(t.w) || 3));
|
||||
return {
|
||||
id: String(t.id || newId()),
|
||||
module: String(t.module || ''),
|
||||
x: Math.max(0, Math.min(COLS - w, Number(t.x) || 0)),
|
||||
y: Math.max(0, Number(t.y) || 0),
|
||||
w,
|
||||
h: Math.max(1, Number(t.h) || 2),
|
||||
settings: (t.settings && typeof t.settings === 'object') ? t.settings : {},
|
||||
};
|
||||
}
|
||||
|
||||
function newId() {
|
||||
return 't' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
|
||||
}
|
||||
|
||||
/* ── grid geometry & collision ──────────────────────────────────────── */
|
||||
|
||||
function cellMetrics() {
|
||||
const style = getComputedStyle(grid);
|
||||
const gap = parseFloat(style.columnGap) || 10;
|
||||
const cw = (grid.clientWidth - gap * (COLS - 1)) / COLS;
|
||||
const ch = parseFloat(style.gridAutoRows) || 72;
|
||||
return { cw, ch, gap };
|
||||
}
|
||||
|
||||
function overlaps(a, b) {
|
||||
return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
|
||||
}
|
||||
|
||||
function isFree(rect, excludeId) {
|
||||
if (rect.x < 0 || rect.y < 0 || rect.x + rect.w > COLS) return false;
|
||||
return !tiles.some((t) => t.id !== excludeId && overlaps(rect, t));
|
||||
}
|
||||
|
||||
/** First free spot scanning top-to-bottom, left-to-right. */
|
||||
function findSpot(w, h) {
|
||||
for (let y = 0; y < 200; y += 1) {
|
||||
for (let x = 0; x <= COLS - w; x += 1) {
|
||||
if (isFree({ x, y, w, h })) return { x, y };
|
||||
}
|
||||
}
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
function applyRect(tile) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
if (!entry) return;
|
||||
entry.el.style.gridColumn = `${tile.x + 1} / span ${tile.w}`;
|
||||
entry.el.style.gridRow = `${tile.y + 1} / span ${tile.h}`;
|
||||
}
|
||||
|
||||
function minSizeOf(tile) {
|
||||
const man = registry.get(tile.module);
|
||||
return {
|
||||
w: Math.max(1, man?.minSize?.w || 1),
|
||||
h: Math.max(1, man?.minSize?.h || 1),
|
||||
};
|
||||
}
|
||||
|
||||
/* ── tile DOM ───────────────────────────────────────────────────────── */
|
||||
|
||||
const GEAR_SVG = '<svg 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>';
|
||||
|
||||
function buildTile(tile) {
|
||||
const man = registry.get(tile.module);
|
||||
|
||||
const el = document.createElement('section');
|
||||
el.className = 'tile';
|
||||
el.dataset.tileId = tile.id;
|
||||
if (man) el.dataset.module = man.id;
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'tile-head';
|
||||
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'dot';
|
||||
dot.title = '';
|
||||
|
||||
const title = document.createElement('span');
|
||||
title.className = 'tile-title';
|
||||
title.textContent = man ? man.name : tile.module + ' (not installed)';
|
||||
|
||||
head.append(dot, title);
|
||||
|
||||
const hasSettings = man && man.instanceSchema && Object.keys(man.instanceSchema).length;
|
||||
if (hasSettings) {
|
||||
const gear = document.createElement('button');
|
||||
gear.className = 'tile-btn';
|
||||
gear.title = 'Tile settings (this tile only)';
|
||||
gear.innerHTML = GEAR_SVG;
|
||||
gear.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
toggleSettingsPopover(tile, el);
|
||||
});
|
||||
head.appendChild(gear);
|
||||
}
|
||||
|
||||
const close = document.createElement('button');
|
||||
close.className = 'tile-btn close';
|
||||
close.title = 'Remove this tile';
|
||||
close.textContent = '✕';
|
||||
close.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
removeTile(tile.id);
|
||||
});
|
||||
head.appendChild(close);
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'tile-body';
|
||||
|
||||
const resize = document.createElement('div');
|
||||
resize.className = 'tile-resize';
|
||||
resize.title = 'Drag to resize';
|
||||
|
||||
el.append(head, body, resize);
|
||||
grid.appendChild(el);
|
||||
|
||||
const entry = { el, body, dot, titleEl: title, instance: null };
|
||||
tileEls.set(tile.id, entry);
|
||||
applyRect(tile);
|
||||
|
||||
wireDrag(tile, el, head);
|
||||
wireResize(tile, el, resize);
|
||||
|
||||
mountModule(tile);
|
||||
return entry;
|
||||
}
|
||||
|
||||
function refreshEmptyState() {
|
||||
emptyEl.hidden = tiles.length > 0;
|
||||
}
|
||||
|
||||
/* ── drag to move ───────────────────────────────────────────────────── */
|
||||
|
||||
function wireDrag(tile, el, handle) {
|
||||
handle.addEventListener('pointerdown', (ev) => {
|
||||
if (ev.target.closest('.tile-btn')) return;
|
||||
if (ev.button !== 0 && ev.pointerType === 'mouse') return;
|
||||
ev.preventDefault();
|
||||
closeSettingsPopovers();
|
||||
handle.setPointerCapture(ev.pointerId);
|
||||
const m = cellMetrics();
|
||||
const sx = ev.clientX;
|
||||
const sy = ev.clientY;
|
||||
const startX = tile.x;
|
||||
const startY = tile.y;
|
||||
let moved = false;
|
||||
|
||||
const onMove = (e) => {
|
||||
const dCols = Math.round((e.clientX - sx) / (m.cw + m.gap));
|
||||
const dRows = Math.round((e.clientY - sy) / (m.ch + m.gap));
|
||||
if (!moved && (dCols || dRows)) {
|
||||
moved = true;
|
||||
el.classList.add('dragging');
|
||||
}
|
||||
const cand = {
|
||||
x: Math.max(0, Math.min(COLS - tile.w, startX + dCols)),
|
||||
y: Math.max(0, startY + dRows),
|
||||
w: tile.w,
|
||||
h: tile.h,
|
||||
};
|
||||
if ((cand.x !== tile.x || cand.y !== tile.y) && isFree(cand, tile.id)) {
|
||||
tile.x = cand.x;
|
||||
tile.y = cand.y;
|
||||
applyRect(tile);
|
||||
}
|
||||
};
|
||||
const onUp = () => {
|
||||
handle.removeEventListener('pointermove', onMove);
|
||||
handle.removeEventListener('pointerup', onUp);
|
||||
handle.removeEventListener('pointercancel', onUp);
|
||||
el.classList.remove('dragging');
|
||||
if (moved) saveLayout();
|
||||
};
|
||||
handle.addEventListener('pointermove', onMove);
|
||||
handle.addEventListener('pointerup', onUp);
|
||||
handle.addEventListener('pointercancel', onUp);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── drag to resize ─────────────────────────────────────────────────── */
|
||||
|
||||
function wireResize(tile, el, handle) {
|
||||
handle.addEventListener('pointerdown', (ev) => {
|
||||
if (ev.button !== 0 && ev.pointerType === 'mouse') return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
handle.setPointerCapture(ev.pointerId);
|
||||
const m = cellMetrics();
|
||||
const sx = ev.clientX;
|
||||
const sy = ev.clientY;
|
||||
const startW = tile.w;
|
||||
const startH = tile.h;
|
||||
const min = minSizeOf(tile);
|
||||
el.classList.add('resizing');
|
||||
let changed = false;
|
||||
|
||||
const onMove = (e) => {
|
||||
const dCols = Math.round((e.clientX - sx) / (m.cw + m.gap));
|
||||
const dRows = Math.round((e.clientY - sy) / (m.ch + m.gap));
|
||||
const cand = {
|
||||
x: tile.x,
|
||||
y: tile.y,
|
||||
w: Math.max(min.w, Math.min(COLS - tile.x, startW + dCols)),
|
||||
h: Math.max(min.h, startH + dRows),
|
||||
};
|
||||
if ((cand.w !== tile.w || cand.h !== tile.h) && isFree(cand, tile.id)) {
|
||||
tile.w = cand.w;
|
||||
tile.h = cand.h;
|
||||
applyRect(tile);
|
||||
changed = true;
|
||||
notifyResize(tile);
|
||||
}
|
||||
};
|
||||
const onUp = () => {
|
||||
handle.removeEventListener('pointermove', onMove);
|
||||
handle.removeEventListener('pointerup', onUp);
|
||||
handle.removeEventListener('pointercancel', onUp);
|
||||
el.classList.remove('resizing');
|
||||
if (changed) saveLayout();
|
||||
};
|
||||
handle.addEventListener('pointermove', onMove);
|
||||
handle.addEventListener('pointerup', onUp);
|
||||
handle.addEventListener('pointercancel', onUp);
|
||||
});
|
||||
}
|
||||
|
||||
function notifyResize(tile) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
try {
|
||||
entry?.instance?.onResize?.(tile.w, tile.h);
|
||||
} catch { /* module's problem, not the shell's */ }
|
||||
}
|
||||
|
||||
/* ── add / remove tiles ─────────────────────────────────────────────── */
|
||||
|
||||
function addTile(moduleId) {
|
||||
const man = registry.get(moduleId);
|
||||
const size = {
|
||||
w: Math.max(1, Math.min(COLS, man?.defaultSize?.w || 4)),
|
||||
h: Math.max(1, man?.defaultSize?.h || 3),
|
||||
};
|
||||
const spot = findSpot(size.w, size.h);
|
||||
const settings = {};
|
||||
for (const [key, spec] of Object.entries(man?.instanceSchema || {})) {
|
||||
if (spec && 'default' in spec) settings[key] = spec.default;
|
||||
}
|
||||
const tile = { id: newId(), module: moduleId, ...spot, ...size, settings };
|
||||
tiles.push(tile);
|
||||
buildTile(tile);
|
||||
refreshEmptyState();
|
||||
saveLayout();
|
||||
}
|
||||
|
||||
function removeTile(id) {
|
||||
const idx = tiles.findIndex((t) => t.id === id);
|
||||
if (idx < 0) return;
|
||||
unmountModule(tiles[idx]);
|
||||
tiles.splice(idx, 1);
|
||||
const entry = tileEls.get(id);
|
||||
if (entry) {
|
||||
entry.el.remove();
|
||||
tileEls.delete(id);
|
||||
}
|
||||
refreshEmptyState();
|
||||
saveLayout();
|
||||
}
|
||||
|
||||
function clearAllTiles() {
|
||||
for (const tile of tiles) {
|
||||
unmountModule(tile);
|
||||
tileEls.get(tile.id)?.el.remove();
|
||||
}
|
||||
tiles = [];
|
||||
tileEls.clear();
|
||||
refreshEmptyState();
|
||||
}
|
||||
|
||||
/* ── module mounting ────────────────────────────────────────────────── */
|
||||
|
||||
/* Milestone 2 turns this into the real module loader (dynamic import of each
|
||||
module's client.js plus the moduleApi). For now only the built-in
|
||||
placeholder renders. */
|
||||
|
||||
function mountModule(tile) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
if (!entry) return;
|
||||
const man = registry.get(tile.module);
|
||||
if (!man) {
|
||||
entry.body.innerHTML = '<div class="tile-msg">Module “' + tile.module + '” is not installed.</div>';
|
||||
entry.dot.className = 'dot error';
|
||||
return;
|
||||
}
|
||||
if (man.builtin) {
|
||||
const msg = document.createElement('div');
|
||||
msg.className = 'tile-msg';
|
||||
msg.textContent = 'Placeholder tile — drag me by the header, resize me by the corner.';
|
||||
entry.body.appendChild(msg);
|
||||
entry.dot.className = 'dot ok';
|
||||
}
|
||||
}
|
||||
|
||||
function unmountModule(tile) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
try {
|
||||
entry?.instance?.stop?.();
|
||||
} catch { /* stopping is best-effort */ }
|
||||
if (entry) entry.instance = null;
|
||||
}
|
||||
|
||||
/* ── per-tile settings popover ──────────────────────────────────────── */
|
||||
|
||||
function closeSettingsPopovers() {
|
||||
document.querySelectorAll('.tile-settings').forEach((p) => p.remove());
|
||||
}
|
||||
|
||||
function toggleSettingsPopover(tile, el) {
|
||||
const existing = el.querySelector('.tile-settings');
|
||||
closeSettingsPopovers();
|
||||
if (existing) return;
|
||||
const man = registry.get(tile.module);
|
||||
if (!man || !man.instanceSchema) return;
|
||||
|
||||
const pop = document.createElement('div');
|
||||
pop.className = 'tile-settings';
|
||||
const inputs = new Map();
|
||||
|
||||
for (const [key, spec] of Object.entries(man.instanceSchema)) {
|
||||
const type = spec?.type || 'string';
|
||||
const label = spec?.label || key;
|
||||
const current = key in (tile.settings || {}) ? tile.settings[key] : spec?.default;
|
||||
|
||||
const field = document.createElement('label');
|
||||
field.className = 'field' + (type === 'boolean' ? ' check' : '');
|
||||
|
||||
if (type === 'boolean') {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.checked = Boolean(current);
|
||||
field.append(input, document.createTextNode(label));
|
||||
inputs.set(key, () => input.checked);
|
||||
} else if (type === 'select' && Array.isArray(spec.options)) {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = label;
|
||||
const select = document.createElement('select');
|
||||
for (const opt of spec.options) {
|
||||
const o = document.createElement('option');
|
||||
o.value = String(typeof opt === 'object' ? opt.value : opt);
|
||||
o.textContent = String(typeof opt === 'object' ? (opt.label ?? opt.value) : opt);
|
||||
select.appendChild(o);
|
||||
}
|
||||
select.value = String(current ?? '');
|
||||
field.append(span, select);
|
||||
inputs.set(key, () => select.value);
|
||||
} else {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = label;
|
||||
const input = document.createElement('input');
|
||||
input.type = type === 'number' ? 'number' : (type === 'password' ? 'password' : 'text');
|
||||
input.value = current === undefined || current === null ? '' : String(current);
|
||||
field.append(span, input);
|
||||
inputs.set(key, () => (type === 'number' ? Number(input.value) : input.value));
|
||||
}
|
||||
pop.appendChild(field);
|
||||
}
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'actions';
|
||||
actions.style.display = 'flex';
|
||||
actions.style.justifyContent = 'flex-end';
|
||||
actions.style.gap = '8px';
|
||||
const cancel = document.createElement('button');
|
||||
cancel.className = 'btn';
|
||||
cancel.textContent = 'Cancel';
|
||||
cancel.addEventListener('click', () => pop.remove());
|
||||
const apply = document.createElement('button');
|
||||
apply.className = 'btn primary';
|
||||
apply.textContent = 'Apply';
|
||||
apply.addEventListener('click', () => {
|
||||
for (const [key, read] of inputs) tile.settings[key] = read();
|
||||
pop.remove();
|
||||
saveLayout();
|
||||
remountTile(tile);
|
||||
});
|
||||
actions.append(cancel, apply);
|
||||
pop.appendChild(actions);
|
||||
|
||||
pop.addEventListener('pointerdown', (e) => e.stopPropagation());
|
||||
el.appendChild(pop);
|
||||
}
|
||||
|
||||
/** Tear a tile's module down and start it again (settings changed). */
|
||||
function remountTile(tile) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
if (!entry) return;
|
||||
unmountModule(tile);
|
||||
entry.body.innerHTML = '';
|
||||
entry.dot.className = 'dot';
|
||||
mountModule(tile);
|
||||
}
|
||||
|
||||
/* ── layout apply / reset ───────────────────────────────────────────── */
|
||||
|
||||
function renderLayout(list) {
|
||||
clearAllTiles();
|
||||
tiles = list.map(sanitizeTile);
|
||||
for (const tile of tiles) buildTile(tile);
|
||||
refreshEmptyState();
|
||||
}
|
||||
|
||||
/* ── menus ──────────────────────────────────────────────────────────── */
|
||||
|
||||
wireDropdown('add-btn', 'add-menu', async (menu) => {
|
||||
await loadRegistry();
|
||||
menu.innerHTML = '';
|
||||
const manifests = [...registry.values()];
|
||||
if (!manifests.length) {
|
||||
const note = document.createElement('div');
|
||||
note.className = 'menu-note';
|
||||
note.textContent = 'No modules are enabled. Enable some in Admin.';
|
||||
menu.appendChild(note);
|
||||
return;
|
||||
}
|
||||
for (const man of manifests) {
|
||||
menu.appendChild(menuItem(man.name, () => {
|
||||
menu.hidden = true;
|
||||
addTile(man.id);
|
||||
}, { sub: man.description || '' }));
|
||||
}
|
||||
});
|
||||
|
||||
wireDropdown('layout-btn', 'layout-menu', async (menu) => {
|
||||
menu.innerHTML = '';
|
||||
menu.appendChild(menuItem('Reset layout', () => {
|
||||
menu.hidden = true;
|
||||
renderLayout([]);
|
||||
saveLayout();
|
||||
toast('Layout cleared');
|
||||
}, { danger: true, sub: 'Remove every tile from this browser' }));
|
||||
});
|
||||
|
||||
/* ── boot ───────────────────────────────────────────────────────────── */
|
||||
|
||||
async function boot() {
|
||||
await loadRegistry();
|
||||
renderLayout(loadLayoutFromStorage());
|
||||
}
|
||||
|
||||
boot();
|
||||
@@ -0,0 +1,436 @@
|
||||
/* ProdDash shell — dark, high-contrast, production-booth friendly.
|
||||
Visual language carried over from ProdCom Listener (same variable names, so
|
||||
module CSS written against these looks native everywhere). Modules must
|
||||
style with these variables only — no hardcoded colors. */
|
||||
|
||||
:root {
|
||||
--bg: #0b0e12;
|
||||
--panel: #131920;
|
||||
--border: #232b35;
|
||||
--text: #e6edf3;
|
||||
--muted: #8b98a5;
|
||||
--accent: #2ee59a;
|
||||
--danger: #f4433c;
|
||||
--warn: #f0b429;
|
||||
/* grid geometry (shell.js reads these) */
|
||||
--cell-h: 72px;
|
||||
--gap: 10px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button { font-family: inherit; }
|
||||
|
||||
/* ── topbar ────────────────────────────────────────────────────────── */
|
||||
|
||||
#topbar {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
#brand {
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#brand .accent { color: var(--accent); }
|
||||
|
||||
#topbar .spacer { flex: 1; }
|
||||
|
||||
.tb-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.tb-btn:hover { border-color: var(--muted); }
|
||||
.tb-btn:active { background: var(--border); }
|
||||
|
||||
/* ── dropdown menus ────────────────────────────────────────────────── */
|
||||
|
||||
.dropdown { position: relative; }
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
min-width: 210px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
.menu[hidden] { display: none; }
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-item:hover { background: var(--border); }
|
||||
.menu-item .sub {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
white-space: normal;
|
||||
}
|
||||
.menu-item.danger { color: var(--danger); }
|
||||
.menu-note {
|
||||
padding: 8px 10px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
white-space: normal;
|
||||
}
|
||||
.menu-divider { height: 1px; background: var(--border); margin: 5px 4px; }
|
||||
.menu-title {
|
||||
padding: 6px 10px 3px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── grid ──────────────────────────────────────────────────────────── */
|
||||
|
||||
#gridwrap {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: var(--gap);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
#grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
grid-auto-rows: var(--cell-h);
|
||||
gap: var(--gap);
|
||||
/* Always leave room to drop/grow a tile below the last row. */
|
||||
padding-bottom: calc(3 * (var(--cell-h) + var(--gap)));
|
||||
}
|
||||
|
||||
#empty-state {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 12vh;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
#empty-state[hidden] { display: none; }
|
||||
|
||||
/* ── tiles ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tile.dragging,
|
||||
.tile.resizing {
|
||||
z-index: 40;
|
||||
border-color: var(--muted);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.tile-head {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 8px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.tile.dragging .tile-head { cursor: grabbing; }
|
||||
|
||||
.tile-head .dot {
|
||||
flex: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.tile-head .dot.ok { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
|
||||
.tile-head .dot.connecting { background: var(--warn); }
|
||||
.tile-head .dot.error { background: var(--danger); }
|
||||
|
||||
.tile-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tile-btn {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tile-btn:hover { background: var(--border); color: var(--text); }
|
||||
.tile-btn.close:hover { color: var(--danger); }
|
||||
.tile-btn svg { width: 13px; height: 13px; display: block; }
|
||||
|
||||
.tile-body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tile-resize {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: nwse-resize;
|
||||
touch-action: none;
|
||||
z-index: 5;
|
||||
color: var(--muted);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.tile-resize:hover { opacity: 1; color: var(--text); }
|
||||
.tile-resize::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
border-radius: 0 0 3px 0;
|
||||
}
|
||||
|
||||
/* status message a module can show while degraded (also used by the shell
|
||||
when a module fails to load) */
|
||||
.tile-msg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
background: var(--panel);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
/* ── per-tile settings popover ─────────────────────────────────────── */
|
||||
|
||||
.tile-settings {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 6px;
|
||||
z-index: 45;
|
||||
min-width: 220px;
|
||||
max-width: calc(100% - 12px);
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.field input[type="text"],
|
||||
.field input[type="number"],
|
||||
.field input[type="password"],
|
||||
.field select {
|
||||
padding: 7px 9px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.field input:focus, .field select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.field.check {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.field.check input { width: 15px; height: 15px; accent-color: var(--accent); }
|
||||
|
||||
/* ── modal dialogs (layout name prompt etc.) ───────────────────────── */
|
||||
|
||||
#modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
background: rgba(4, 6, 8, 0.65);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 18vh;
|
||||
}
|
||||
#modal-backdrop[hidden] { display: none; }
|
||||
|
||||
#modal {
|
||||
width: min(360px, calc(100vw - 32px));
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
#modal h2 { font-size: 14px; margin-bottom: 12px; }
|
||||
#modal .actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover { border-color: var(--muted); }
|
||||
.btn.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #06281a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* toast */
|
||||
#toast {
|
||||
position: fixed;
|
||||
bottom: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 95;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
#toast[hidden] { display: none; }
|
||||
#toast.error { border-color: var(--danger); }
|
||||
|
||||
/* ── scrollbars ────────────────────────────────────────────────────── */
|
||||
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent; /* inset gutter */
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #364253;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-corner { background: transparent; }
|
||||
|
||||
/* Firefox (webkit pseudo-elements unsupported there) */
|
||||
@supports (-moz-appearance: none) {
|
||||
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
#topbar { padding: 6px 8px; flex-wrap: wrap; }
|
||||
}
|
||||
Reference in New Issue
Block a user