From 6f428b2297567e5f7447772ade4ae703d573180c Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sun, 7 Jun 2026 08:37:32 +0200
Subject: [PATCH] feat(mui): migrate AlertContainer off admin-* CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces framer-motion animation + custom SVG icons + admin-toast markup
with MUI Snackbar + MUI Alert (filled variant). useAlertState() consumption
(alerts array, removeAlert) is preserved verbatim — alert lifecycle
(timing, types, auto-dismiss) is owned by AlertContext and unchanged.
Alerts stack bottom-right with 72px vertical offset per slot.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/components/AlertContainer.tsx | 113 +++++-------------------
 1 file changed, 20 insertions(+), 93 deletions(-)

diff --git a/src/admin/components/AlertContainer.tsx b/src/admin/components/AlertContainer.tsx
index fc1ea11..a4dc50b 100644
--- a/src/admin/components/AlertContainer.tsx
+++ b/src/admin/components/AlertContainer.tsx
@@ -1,102 +1,29 @@
-import React from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import Snackbar from "@mui/material/Snackbar";
+import MuiAlert from "@mui/material/Alert";
 import { useAlertState } from "../context/AlertContext";
 
-const icons: Record<string, React.ReactNode> = {
-  success: (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-      <polyline points="22 4 12 14.01 9 11.01" />
-    </svg>
-  ),
-  error: (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <line x1="15" y1="9" x2="9" y2="15" />
-      <line x1="9" y1="9" x2="15" y2="15" />
-    </svg>
-  ),
-  warning: (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-      <line x1="12" y1="9" x2="12" y2="13" />
-      <line x1="12" y1="17" x2="12.01" y2="17" />
-    </svg>
-  ),
-  info: (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <line x1="12" y1="16" x2="12" y2="12" />
-      <line x1="12" y1="8" x2="12.01" y2="8" />
-    </svg>
-  ),
-};
-
 export default function AlertContainer() {
   const { alerts, removeAlert } = useAlertState();
 
   return (
-    <div className="admin-alert-container" role="status" aria-live="polite">
-      <AnimatePresence>
-        {alerts.map((alert) => (
-          <motion.div
-            key={alert.id}
-            className={`admin-toast admin-toast-${alert.type}`}
-            initial={{ opacity: 0, y: 20, scale: 0.95 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 20, scale: 0.95 }}
-            transition={{ duration: 0.2 }}
+    <>
+      {alerts.map((alert, index) => (
+        <Snackbar
+          key={alert.id}
+          open
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+          sx={{ bottom: { xs: 16 + index * 72 } }}
+        >
+          <MuiAlert
+            severity={alert.type}
+            onClose={() => removeAlert(alert.id)}
+            variant="filled"
+            sx={{ width: "100%", minWidth: 280 }}
           >
-            <span className="admin-toast-icon">{icons[alert.type]}</span>
-            <span className="admin-toast-message">{alert.message}</span>
-            <button
-              className="admin-toast-close"
-              onClick={() => removeAlert(alert.id)}
-              aria-label="Zavřít"
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-              </svg>
-            </button>
-          </motion.div>
-        ))}
-      </AnimatePresence>
-    </div>
+            {alert.message}
+          </MuiAlert>
+        </Snackbar>
+      ))}
+    </>
   );
 }