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();
 }
 
 /**