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

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