addition of new dashboard

frontend/src/resources/toast.js

@@ -0,0 +1,26 @@
+// Minimal toast notifications — used to surface fetch/load errors instead of
+// failing silently to the console.
+
+function host() {
+  let el = document.getElementById('toast-host');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'toast-host';
+    el.className = 'fixed bottom-4 right-4 z-[200] flex flex-col gap-2 pointer-events-none';
+    document.body.appendChild(el);
+  }
+  return el;
+}
+
+/**
+ * @param {string} message
+ * @param {'error'|'info'} [type]
+ */
+export function toast(message, type = 'error') {
+  const colors = type === 'error' ? 'border-error text-error' : 'border-surface-border text-on-surface';
+  const el = document.createElement('div');
+  el.className = `bg-surface-container-lowest border ${colors} rounded-lg shadow-lg px-md py-sm text-label-md font-label-md`;
+  el.textContent = message;
+  host().appendChild(el);
+  setTimeout(() => el.remove(), 4000);
+}