frontend refactor

frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,45 @@
+import { useToastStore } from '../../stores/toastStore';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+
+const icons = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+};
+
+const styles = {
+  success: 'bg-green-50 border-green-200 text-green-800',
+  error: 'bg-red-50 border-red-200 text-red-800',
+  info: 'bg-blue-50 border-blue-200 text-blue-800',
+};
+
+export const ToastContainer = () => {
+  const { toasts, removeToast } = useToastStore();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+      {toasts.map((toast) => {
+        const Icon = icons[toast.type];
+        return (
+          <div
+            key={toast.id}
+            className={`flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg min-w-[300px] animate-in slide-in-from-right ${styles[toast.type]}`}
+            role="alert"
+          >
+            <Icon size={20} />
+            <p className="flex-1 text-sm">{toast.message}</p>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="p-1 hover:bg-black/5 rounded transition-colors"
+              aria-label="Закрыть"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};