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

webui/static/app.js

@@ -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

@@ -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=8';
-import { modelFetch } from './model.js?v=7';
+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);
-}
+    requestUpdate();
-
-/**
- * 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'),
-            ),
-        ),
-    );
 }
 
 /**

webui/static/hoover/components/data.js

@@ -4,10 +4,10 @@
  * Data display components: Badge, StatusDot, Empty, Card.
  */
 
-import { h } from '../vdom.js?v=7';
+import { h } from '../vdom.js?v=8';
-import { esc } from '../helpers.js?v=7';
+import { esc } from '../helpers.js?v=8';
-import { apiFetch, toast } from '../api.js?v=7';
+import { apiFetch, toast } from '../api.js?v=8';
-import { modelFetch } from '../model.js?v=7';
+import { modelFetch } from '../model.js?v=8';
 
 /**
  * Colored badge/span.

webui/static/hoover/components/modal.js

@@ -6,10 +6,10 @@
  * avoid fighting with the main render cycle.
  */
 
-import { esc } from '../helpers.js?v=7';
+import { esc } from '../helpers.js?v=8';
-import { att_esc } from '../helpers.js?v=7';
+import { att_esc } from '../helpers.js?v=8';
-import { apiSubmit } from '../api.js?v=7';
+import { apiSubmit } from '../api.js?v=8';
-import { createDom } from '../vdom.js?v=7';
+import { createDom } from '../vdom.js?v=8';
 
 /**
  * Render Hoover VNodes into a modal content element.

webui/static/hoover/components/toast.js

@@ -5,8 +5,8 @@
  * Uses the toast/dismissToast state from api.js.
  */
 
-import { h } from '../vdom.js?v=7';
+import { h } from '../vdom.js?v=8';
-import { _toasts, dismissToast } from '../api.js?v=7';
+import { _toasts, dismissToast } from '../api.js?v=8';
 
 /**
  * Render all pending toast notifications.
@@ -23,17 +23,19 @@ 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('button', {
+                h('div', { class: 'toast-actions' },
-                    class: 'toast-close',
+                    h('button', {
-                    'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); },
+                        class: 'toast-btn toast-close',
-                }, '\u00d7'),
+                        'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); },
+                    }, '\u00d7'),
+                ),
             ),
         ),
     );

webui/static/hoover/index.js

@@ -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

@@ -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,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,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,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,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,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,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,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

@@ -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 { 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=7';
+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,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,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,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',