mteehan/vacuum-wall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hoover: move ToastContainer to separate module, add reactive re-render, bump module cache v8

Browse Source
This commit is contained in:
Mike Teehan
2026-06-30 04:01:41 +00:00
parent 9088f34345
commit 575cf06a4b
18 changed files with 51 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/static/app.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { h, render, Link, hComp, ToastContainer, connect, apiFetch, modelRegister, modelFetch, reactive } from '/static/hoover/index.js?v=8';
import { h, render, Link, hComp, ToastContainer, connect, apiFetch, modelRegister, modelFetch, reactive } from '/static/hoover/index.js?v=9';
import DashboardPage from '/static/pages/dashboard.js?v=8';
import InterfacesPage from '/static/pages/interfaces.js?v=8';
webui/static/hoover/api.js
+4 -23
View File
@@ -3,11 +3,10 @@
*
* JSON-friendly fetch wrapper with automatic header management.
* Toast notification system with auto-dismiss.
* ToastContainer component for rendering queued toasts.
*/
import { h } from './vdom.js?v=7';
import { modelFetch } from './model.js?v=7';
import { modelFetch } from './model.js?v=8';
import { requestUpdate } from './reactivity.js?v=8';
/**
* JSON-friendly fetch wrapper.
@@ -65,6 +64,7 @@ const _toastIds = { next: 1 };
export function toast(message, type = 'info', duration = 4000) {
const id = _toastIds.next++;
_toasts.push({ id, message, type, createdAt: Date.now(), duration });
requestUpdate();
if (duration > 0) setTimeout(() => dismissToast(id), duration);
return id;
@@ -76,26 +76,7 @@ export function toast(message, type = 'info', duration = 4000) {
export function dismissToast(id) {
const idx = _toasts.findIndex(t => t.id === id);
if (idx !== -1) _toasts.splice(idx, 1);
}
/**
* Render the queued toast notifications.
*
* @returns {VNode} – Toast container (empty text node when no toasts)
*/
export function ToastContainer() {
if (!_toasts.length) return h('#text', '');
const clsMap = { info: 'toast-info', success: 'toast-success', error: 'toast-error', warning: 'toast-warning' };
return h('div', { class: 'toast-container' },
..._toasts.map(t =>
h('div', { class: `toast ${clsMap[t.type] || clsMap.info}`, 'on:click': () => dismissToast(t.id) },
h('span', null, t.message),
h('button', { class: 'toast-close', 'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); } }, '\u00d7'),
),
),
);
requestUpdate();
}
/**
webui/static/hoover/components/data.js
+4 -4
View File
@@ -4,10 +4,10 @@
* Data display components: Badge, StatusDot, Empty, Card.
*/
import { h } from '../vdom.js?v=7';
import { esc } from '../helpers.js?v=7';
import { apiFetch, toast } from '../api.js?v=7';
import { modelFetch } from '../model.js?v=7';
import { h } from '../vdom.js?v=8';
import { esc } from '../helpers.js?v=8';
import { apiFetch, toast } from '../api.js?v=8';
import { modelFetch } from '../model.js?v=8';
/**
* Colored badge/span.
webui/static/hoover/components/modal.js
+4 -4
View File
@@ -6,10 +6,10 @@
* avoid fighting with the main render cycle.
*/
import { esc } from '../helpers.js?v=7';
import { att_esc } from '../helpers.js?v=7';
import { apiSubmit } from '../api.js?v=7';
import { createDom } from '../vdom.js?v=7';
import { esc } from '../helpers.js?v=8';
import { att_esc } from '../helpers.js?v=8';
import { apiSubmit } from '../api.js?v=8';
import { createDom } from '../vdom.js?v=8';
/**
* Render Hoover VNodes into a modal content element.
webui/static/hoover/components/toast.js
+8 -6
View File
@@ -5,8 +5,8 @@
* Uses the toast/dismissToast state from api.js.
*/
import { h } from '../vdom.js?v=7';
import { _toasts, dismissToast } from '../api.js?v=7';
import { h } from '../vdom.js?v=8';
import { _toasts, dismissToast } from '../api.js?v=8';
/**
* Render all pending toast notifications.
@@ -23,18 +23,20 @@ export function ToastContainer() {
warning: 'toast-warning',
};
return h('div', { class: 'toast-container' },
return h('div', { class: 'toast' },
..._toasts.map(t =>
h('div', {
class: `toast ${clsMap[t.type] || clsMap.info}`,
class: `toast-message ${clsMap[t.type] || clsMap.info}`,
'on:click': () => dismissToast(t.id),
},
h('span', null, t.message),
h('span', { class: 'toast-text' }, t.message),
h('div', { class: 'toast-actions' },
h('button', {
class: 'toast-close',
class: 'toast-btn toast-close',
'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); },
}, '\u00d7'),
),
),
),
);
}
webui/static/hoover/index.js
+14 -14
View File
@@ -5,43 +5,43 @@
*/
/* ── Reactivity ──────────────────────────────────────────────── */
export { reactive, requestUpdate } from './reactivity.js?v=7';
export { reactive, requestUpdate } from './reactivity.js?v=8';
/* ── VDOM ────────────────────────────────────────────────────── */
export { h } from './vdom.js?v=7';
export { h } from './vdom.js?v=8';
/* ── HTM ──────────────────────────────────────────────────────── */
export { html } from './html.js?v=7';
export { html } from './html.js?v=8';
/* ── Render ──────────────────────────────────────────────────── */
export { render } from './render.js?v=7';
export { render } from './render.js?v=8';
/* ── Component ───────────────────────────────────────────────── */
export { definePage, hComp } from './component.js?v=7';
export { definePage, hComp } from './component.js?v=8';
/* ── Router ──────────────────────────────────────────────────── */
export { createRouter, Link } from './router.js?v=7';
export { createRouter, Link } from './router.js?v=8';
/* ── WebSocket ───────────────────────────────────────────────── */
export { connect, onMessage } from './websocket.js?v=7';
export { connect, onMessage } from './websocket.js?v=8';
/* ── API & Toast ─────────────────────────────────────────────── */
export { apiFetch, toast, dismissToast, apiSubmit, checkAbort, poll, refactorLoad } from './api.js?v=7';
export { apiFetch, toast, dismissToast, apiSubmit, checkAbort, poll, refactorLoad } from './api.js?v=8';
/* ── Model ───────────────────────────────────────────────────── */
export { modelRegister, getModel, modelFetch, collectLoadingModels } from './model.js?v=7';
export { modelRegister, getModel, modelFetch, collectLoadingModels } from './model.js?v=8';
/* ── Helpers ─────────────────────────────────────────────────── */
export { esc, att_esc, enc, $val, parseZones, downloadBlob } from './helpers.js?v=7';
export { esc, att_esc, enc, $val, parseZones, downloadBlob } from './helpers.js?v=8';
/* ── UI Components: Layout ───────────────────────────────────── */
export { PageHeader, renderGuard, renderGuardMulti, Tabs, SectionTitle, ActionGroup, DataTableSection } from './components/layout.js?v=7';
export { PageHeader, renderGuard, renderGuardMulti, Tabs, SectionTitle, ActionGroup, DataTableSection } from './components/layout.js?v=8';
/* ── UI Components: Data ─────────────────────────────────────── */
export { Badge, StatusDot, Empty, Card, ConfirmDelete, Table, ActionButton, certStatusBadge, serviceStatusBadge, StatCard, StatusText, ServiceStatus, ActionCell, MonoText, ZoneSelect } from './components/data.js?v=7';
export { Badge, StatusDot, Empty, Card, ConfirmDelete, Table, ActionButton, certStatusBadge, serviceStatusBadge, StatCard, StatusText, ServiceStatus, ActionCell, MonoText, ZoneSelect } from './components/data.js?v=8';
/* ── UI Components: Modal ────────────────────────────────────── */
export { openModal, closeModal, closeAllModals, modalVNodes, refreshModals, formModal, MultiSelectModal, QuickModal } from './components/modal.js?v=7';
export { openModal, closeModal, closeAllModals, modalVNodes, refreshModals, formModal, MultiSelectModal, QuickModal } from './components/modal.js?v=8';
/* ── UI Components: Toast ────────────────────────────────────── */
export { ToastContainer } from './components/toast.js?v=7';
export { ToastContainer } from './components/toast.js?v=8';
webui/static/index.html
+1 -1
View File
@@ -15,6 +15,6 @@
</div>
<div id="modal-root"></div>
<script>window.__WS_URL__ = "__WS_URL_PLACEHOLDER__"</script>
<script type="module" src="/static/app.js?v=10"></script>
<script type="module" src="/static/app.js?v=11"></script>
</body>
</html>
webui/static/pages/certs.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Empty, Table, renderGuard, esc, enc, $val, apiFetch, toast, openModal, closeModal, formModal, modalVNodes, refreshModals, definePage, getModel, modelFetch, ActionCell, certStatusBadge, poll } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Empty, Table, renderGuard, esc, enc, $val, apiFetch, toast, openModal, closeModal, formModal, modalVNodes, refreshModals, definePage, getModel, modelFetch, ActionCell, certStatusBadge, poll } from '/static/hoover/index.js?v=8';
function _accountCard(account) {
if (!account || !account.registered) {
webui/static/pages/dashboard.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, definePage, getModel, renderGuard, ServiceStatus, StatCard } from '/static/hoover/index.js?v=7';
import { html, PageHeader, definePage, getModel, renderGuard, ServiceStatus, StatCard } from '/static/hoover/index.js?v=8';
export default definePage({
init() {
webui/static/pages/dhcp.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, h, PageHeader, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';
import { html, h, PageHeader, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=8';
function makeAddRange(activeZones, interfaces) {
const opts = [
webui/static/pages/interfaces.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Table, renderGuardMulti, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, StatusText, QuickModal, ZoneSelect } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Table, renderGuardMulti, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, StatusText, QuickModal, ZoneSelect } from '/static/hoover/index.js?v=8';
async function changeZone(name, zone, state) {
const r = await apiFetch('/api/firewall/zones/' + enc(zone) + '/interfaces', {
webui/static/pages/logs.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Tabs, esc, definePage, renderGuard, modelFetch, getModel } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Tabs, esc, definePage, renderGuard, modelFetch, getModel } from '/static/hoover/index.js?v=8';
const logTabs = [
{ key: 'journal', label: 'Journal' },
webui/static/pages/nat.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Badge, StatusDot, Card, Table, renderGuard, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, DataTableSection, SectionTitle, ActionGroup, QuickModal, ConfirmDelete } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Badge, StatusDot, Card, Table, renderGuard, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, DataTableSection, SectionTitle, ActionGroup, QuickModal, ConfirmDelete } from '/static/hoover/index.js?v=8';
const addFwd = QuickModal({
title: 'Add Port Forward',
webui/static/pages/notfound.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, definePage } from '/static/hoover/index.js?v=7';
import { html, PageHeader, definePage } from '/static/hoover/index.js?v=8';
export default definePage({
init() {
webui/static/pages/proxy.js
+2 -2
View File
@@ -1,5 +1,5 @@
import { html, PageHeader, Badge, Empty, Table, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionCell, ConfirmDelete, certStatusBadge, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';
import { openModal, formModal, closeModal } from '/static/hoover/components/modal.js?v=7';
import { html, PageHeader, Badge, Empty, Table, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionCell, ConfirmDelete, certStatusBadge, ActionGroup, QuickModal } from '/static/hoover/index.js?v=8';
import { openModal, formModal, closeModal } from '/static/hoover/components/modal.js?v=8';
// ---------------------------------------------------------------------------
// Cert lookup map from ACME state keyed by domain name
webui/static/pages/rules.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Empty, Card, ConfirmDelete, Table, renderGuard, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, MonoText, QuickModal } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Empty, Card, ConfirmDelete, Table, renderGuard, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, MonoText, QuickModal } from '/static/hoover/index.js?v=8';
const addRule = QuickModal({
title: 'Add Rich Rule',
webui/static/pages/wireguard.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Badge, StatusDot, Empty, Table, ServiceStatus, renderGuard, esc, enc, $val, apiFetch, toast, openModal, closeModal, formModal, definePage, getModel, modelFetch, ActionButton, ActionCell, MonoText, ActionGroup, QuickModal, downloadBlob } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Badge, StatusDot, Empty, Table, ServiceStatus, renderGuard, esc, enc, $val, apiFetch, toast, openModal, closeModal, formModal, definePage, getModel, modelFetch, ActionButton, ActionCell, MonoText, ActionGroup, QuickModal, downloadBlob } from '/static/hoover/index.js?v=8';
const addPeer = QuickModal({
title: 'Add WireGuard Peer',
webui/static/pages/zones.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { html, PageHeader, Badge, Empty, ConfirmDelete, renderGuard, enc, esc, $val, definePage, getModel, MultiSelectModal, QuickModal } from '/static/hoover/index.js?v=7';
import { html, PageHeader, Badge, Empty, ConfirmDelete, renderGuard, enc, esc, $val, definePage, getModel, MultiSelectModal, QuickModal } from '/static/hoover/index.js?v=8';
const addZone = QuickModal({
title: 'Add Zone',