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

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

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

@@ -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,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('button', {
-                    class: 'toast-close',
-                    'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); },
-                }, '\u00d7'),
+                h('span', { class: 'toast-text' }, t.message),
+                h('div', { class: 'toast-actions' },
+                    h('button', {
+                        class: 'toast-btn toast-close',
+                        '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';