Add modals

frontend/src/components/ui/ConfirmModal.tsx

@@ -0,0 +1,111 @@
+import { useEffect } from 'react'
+import { AlertTriangle, Info, Trash2, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useConfirmStore, type ConfirmVariant } from '@/store/confirm'
+import { Button } from './Button'
+
+const icons: Record<ConfirmVariant, React.ReactNode> = {
+  danger: <Trash2 className="w-6 h-6" />,
+  warning: <AlertTriangle className="w-6 h-6" />,
+  info: <Info className="w-6 h-6" />,
+}
+
+const iconStyles: Record<ConfirmVariant, string> = {
+  danger: 'bg-red-500/20 text-red-500',
+  warning: 'bg-yellow-500/20 text-yellow-500',
+  info: 'bg-blue-500/20 text-blue-500',
+}
+
+const buttonVariants: Record<ConfirmVariant, 'danger' | 'primary' | 'secondary'> = {
+  danger: 'danger',
+  warning: 'primary',
+  info: 'primary',
+}
+
+export function ConfirmModal() {
+  const { isOpen, options, handleConfirm, handleCancel } = useConfirmStore()
+
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        handleCancel()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, handleCancel])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  if (!isOpen || !options) return null
+
+  const variant = options.variant || 'warning'
+  const Icon = icons[variant]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
+        onClick={handleCancel}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-gray-800 rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-gray-700">
+        {/* Close button */}
+        <button
+          onClick={handleCancel}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="p-6">
+          {/* Icon */}
+          <div className={clsx('w-12 h-12 rounded-full flex items-center justify-center mb-4', iconStyles[variant])}>
+            {Icon}
+          </div>
+
+          {/* Title */}
+          <h3 className="text-xl font-bold text-white mb-2">
+            {options.title}
+          </h3>
+
+          {/* Message */}
+          <p className="text-gray-400 mb-6 whitespace-pre-line">
+            {options.message}
+          </p>
+
+          {/* Actions */}
+          <div className="flex gap-3">
+            <Button
+              variant="secondary"
+              className="flex-1"
+              onClick={handleCancel}
+            >
+              {options.cancelText || 'Отмена'}
+            </Button>
+            <Button
+              variant={buttonVariants[variant]}
+              className="flex-1"
+              onClick={handleConfirm}
+            >
+              {options.confirmText || 'Подтвердить'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/ui/Toast.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react'
+import { X, CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useToastStore, type Toast as ToastType } from '@/store/toast'
+
+const icons = {
+  success: CheckCircle,
+  error: XCircle,
+  warning: AlertTriangle,
+  info: Info,
+}
+
+const styles = {
+  success: 'bg-green-500/20 border-green-500/50 text-green-400',
+  error: 'bg-red-500/20 border-red-500/50 text-red-400',
+  warning: 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400',
+  info: 'bg-blue-500/20 border-blue-500/50 text-blue-400',
+}
+
+const iconStyles = {
+  success: 'text-green-500',
+  error: 'text-red-500',
+  warning: 'text-yellow-500',
+  info: 'text-blue-500',
+}
+
+interface ToastItemProps {
+  toast: ToastType
+  onRemove: (id: string) => void
+}
+
+function ToastItem({ toast, onRemove }: ToastItemProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [isLeaving, setIsLeaving] = useState(false)
+  const Icon = icons[toast.type]
+
+  useEffect(() => {
+    // Trigger enter animation
+    requestAnimationFrame(() => setIsVisible(true))
+  }, [])
+
+  const handleRemove = () => {
+    setIsLeaving(true)
+    setTimeout(() => onRemove(toast.id), 200)
+  }
+
+  return (
+    <div
+      className={clsx(
+        'flex items-start gap-3 p-4 rounded-lg border backdrop-blur-sm shadow-lg',
+        'transition-all duration-200 ease-out',
+        styles[toast.type],
+        isVisible && !isLeaving ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
+      )}
+    >
+      <Icon className={clsx('w-5 h-5 flex-shrink-0 mt-0.5', iconStyles[toast.type])} />
+      <p className="flex-1 text-sm text-white">{toast.message}</p>
+      <button
+        onClick={handleRemove}
+        className="flex-shrink-0 text-gray-400 hover:text-white transition-colors"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}
+
+export function ToastContainer() {
+  const toasts = useToastStore((state) => state.toasts)
+  const removeToast = useToastStore((state) => state.removeToast)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+      {toasts.map((toast) => (
+        <div key={toast.id} className="pointer-events-auto">
+          <ToastItem toast={toast} onRemove={removeToast} />
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/components/ui/index.ts

@@ -1,3 +1,5 @@
 export { Button } from './Button'
 export { Input } from './Input'
 export { Card, CardHeader, CardTitle, CardContent } from './Card'
+export { ToastContainer } from './Toast'
+export { ConfirmModal } from './ConfirmModal'