etape laptop

frontend/src/components/ToastContainer.tsx

@@ -0,0 +1,34 @@
+import { useMapStore } from '../stores/mapStore'
+
+const TYPE_STYLES = {
+  info: 'border-gruvbox-blue text-gruvbox-blue',
+  success: 'border-gruvbox-green text-gruvbox-green',
+  error: 'border-gruvbox-red text-gruvbox-red',
+  warning: 'border-gruvbox-yellow text-gruvbox-yellow',
+}
+
+export default function ToastContainer() {
+  const toasts = useMapStore((s) => s.toasts)
+  const removeToast = useMapStore((s) => s.removeToast)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed top-14 right-4 z-50 flex flex-col gap-2 max-w-sm">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`px-4 py-2 bg-gruvbox-bg1 border-l-4 rounded shadow-lg text-sm flex items-start gap-2 ${TYPE_STYLES[toast.type]}`}
+        >
+          <span className="flex-1 text-gruvbox-fg">{toast.message}</span>
+          <button
+            onClick={() => removeToast(toast.id)}
+            className="text-gruvbox-fg4 hover:text-gruvbox-fg text-xs"
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}