improve editor for KV

editor/src/kv/Toast.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { ToastEntry } from './types';
+
+interface Props {
+  toasts: ToastEntry[];
+  onDismiss: (id: number) => void;
+}
+
+export function ToastStack({ toasts, onDismiss }: Props) {
+  return (
+    <div className="kv-toast-stack">
+      {toasts.map((t) => (
+        <Toast key={t.id} entry={t} onDismiss={() => onDismiss(t.id)} />
+      ))}
+    </div>
+  );
+}
+
+function Toast({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {
+  useEffect(() => {
+    if (entry.kind === 'error') return;
+    const timer = setTimeout(onDismiss, 4500);
+    return () => clearTimeout(timer);
+  }, [entry.kind, onDismiss]);
+
+  return (
+    <div className={`kv-toast kv-toast-${entry.kind}`}>
+      <div className="kv-toast-row">
+        <span className="kv-toast-text">{entry.text}</span>
+        <button className="kv-toast-close" onClick={onDismiss} aria-label="dismiss">×</button>
+      </div>
+      {entry.details && entry.details.length > 0 && (
+        <ul className="kv-toast-details">
+          {entry.details.slice(0, 8).map((d, i) => <li key={i}>{d}</li>)}
+          {entry.details.length > 8 && <li>… {entry.details.length - 8} more</li>}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+let nextId = 1;
+export function makeToast(kind: ToastEntry['kind'], text: string, details?: string[]): ToastEntry {
+  return { id: nextId++, kind, text, details };
+}