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

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'),
+                ),
             ),
         ),
     );