refactor(NotifyProvider, ToastContainer): update toast notifications to Tabler style with improved layout, animations, and accessibility features

frontend/src/components/NotifyProvider.jsx

@@ -121,31 +121,50 @@ function iconByType(type) {
 
 function NotifyViewport({ items, onClose }) {
   return (
-    <div className="position-fixed top-0 end-0 p-3" style={{ zIndex: 1080, pointerEvents: 'none' }}>
-      <div className="d-flex flex-column gap-2 align-items-end">
-        {items.map((n) => (
-          <div key={n.id} className={`alert alert-${colorByType(n.type)} alert-dismissible shadow-sm`} role="alert" style={{ minWidth: 320, pointerEvents: 'auto' }}>
-            <div className="d-flex align-items-start">
-              <div className="me-1 mt-1">{iconByType(n.type)}</div>
-              <div className="flex-grow-1">
+    <div className="toast-container toast-container-end notify-viewport" style={{ zIndex: 1079 }}>
+      {items.map((n) => (
+        <div
+          key={n.id}
+          className="toast show toast-alert"
+          role="alert"
+          aria-live="assertive"
+          aria-atomic="true"
+          style={{
+            minWidth: '320px',
+            maxWidth: '420px',
+            overflow: 'hidden',
+            borderRadius: 'var(--tblr-border-radius, 0.25rem)',
+            animation: 'slideInRight 0.3s ease-out forwards',
+          }}
+        >
+          <div className={`alert alert-${colorByType(n.type)} toast-alert-inner mb-0`}>
+            <div className="toast-header toast-alert-header">
+              <span className="toast-alert-icon me-2">{iconByType(n.type)}</span>
+              <strong className="me-auto">
+                {n.type === 'success' && 'Успех'}
+                {n.type === 'error' && 'Ошибка'}
+                {n.type === 'warning' && 'Внимание'}
+                {n.type === 'info' && 'Информация'}
+              </strong>
+              <button type="button" className="btn-close" aria-label="Закрыть" onClick={() => onClose(n.id)} />
+            </div>
+            <div className="toast-body">
+              <div className="alert-description">
                 {n.message}
-                {n.details && (
-                  <details className="small mt-1">
-                    <summary>Подробнее</summary>
-                    <pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>{typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}</pre>
-                  </details>
-                )}
-                {n.count > 1 && (
-                  <span className="badge bg-white text-body border ms-2">×{n.count}</span>
-                )}
+                {n.count > 1 && <span className="badge bg-white text-body border ms-2">×{n.count}</span>}
               </div>
-              <button type="button" className="btn-close" aria-label="Close" onClick={() => onClose(n.id)}>
-                <IconX size={16} />
-              </button>
+              {n.details && (
+                <details className="small mt-1">
+                  <summary>Подробнее</summary>
+                  <pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>
+                    {typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}
+                  </pre>
+                </details>
+              )}
             </div>
           </div>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 }

frontend/src/components/ToastContainer.jsx

@@ -3,12 +3,12 @@ import {
   IconCheck, 
   IconX, 
   IconAlertTriangle, 
-  IconInfoCircle,
-  IconRefresh 
+  IconInfoCircle 
 } from '@tabler/icons-react'
 
 /**
- * Контекст для глобального управления toast уведомлениями
+ * Контекст для глобального управления toast уведомлениями.
+ * Тосты в стиле Tabler Alerts, всплывают справа как Tabler Toasts.
  */
 const ToastContext = createContext({
   success: () => {},
@@ -19,24 +19,29 @@ const ToastContext = createContext({
 
 export const useToast = () => useContext(ToastContext)
 
+const DEFAULT_TITLES = {
+  success: 'Выполнено успешно',
+  error: 'Произошла ошибка',
+  warning: 'Внимание',
+  info: 'Информация',
+}
+
 /**
- * Toast уведомление (отдельный элемент)
+ * Один toast: разметка Tabler (toast + toast-header + toast-body), стиль Tabler Alerts.
  */
 function Toast({ toast, onClose }) {
   const [isLeaving, setIsLeaving] = useState(false)
 
   useEffect(() => {
     if (toast.duration && toast.duration > 0) {
-      const timer = setTimeout(() => {
-        handleClose()
-      }, toast.duration)
+      const timer = setTimeout(() => handleClose(), toast.duration)
       return () => clearTimeout(timer)
     }
   }, [toast.duration])
 
   const handleClose = () => {
     setIsLeaving(true)
-    setTimeout(() => onClose(toast.id), 300) // анимация 300ms
+    setTimeout(() => onClose(toast.id), 300)
   }
 
   const getIcon = () => {
@@ -45,47 +50,53 @@ function Toast({ toast, onClose }) {
       case 'error': return <IconX size={20} />
       case 'warning': return <IconAlertTriangle size={20} />
       case 'info': return <IconInfoCircle size={20} />
-      default: return null
+      default: return <IconInfoCircle size={20} />
     }
   }
 
-  const getColorClass = () => {
-    switch (toast.type) {
-      case 'success': return 'alert-success'
-      case 'error': return 'alert-danger'
-      case 'warning': return 'alert-warning'
-      case 'info': return 'alert-info'
-      default: return 'alert-info'
-    }
-  }
+  const alertClass = {
+    success: 'alert-success',
+    error: 'alert-danger',
+    warning: 'alert-warning',
+    info: 'alert-info',
+  }[toast.type] || 'alert-info'
+
+  const title = toast.title ?? DEFAULT_TITLES[toast.type]
 
   return (
     <div
-      className={`alert ${getColorClass()} alert-dismissible fade ${isLeaving ? '' : 'show'}`}
+      className={`toast show toast-alert ${isLeaving ? 'toast-leaving' : ''}`}
       role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      data-toast-type={toast.type}
       style={{
-        minWidth: '300px',
-        maxWidth: '400px',
-        boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)',
-        animation: isLeaving ? 'slideOutRight 0.3s ease-out' : 'slideInRight 0.3s ease-out'
+        minWidth: '320px',
+        maxWidth: '420px',
+        overflow: 'hidden',
+        borderRadius: 'var(--tblr-border-radius, 0.25rem)',
+        animation: isLeaving ? 'slideOutRight 0.3s ease-out forwards' : 'slideInRight 0.3s ease-out forwards',
       }}
     >
-      <div className="d-flex align-items-start">
-        <div className="me-2 mt-1">
-          {getIcon()}
+      <div className={`alert ${alertClass} toast-alert-inner mb-0`}>
+        <div className="toast-header toast-alert-header">
+          <span className="toast-alert-icon me-2">{getIcon()}</span>
+          <strong className="me-auto">{title}</strong>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={handleClose}
+            aria-label="Закрыть"
+          />
         </div>
-        <div className="flex-grow-1">
-          {toast.title && (
-            <h4 className="alert-title">{toast.title}</h4>
-          )}
-          <div className="text-secondary">{toast.message}</div>
-          
-          {/* Действия */}
+        <div className="toast-body">
+          <div className="alert-description">{toast.message}</div>
           {toast.actions && toast.actions.length > 0 && (
             <div className="btn-list mt-2">
               {toast.actions.map((action, idx) => (
                 <button
                   key={idx}
+                  type="button"
                   className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
                   onClick={() => {
                     action.onClick?.()
@@ -99,12 +110,6 @@ function Toast({ toast, onClose }) {
             </div>
           )}
         </div>
-        <button 
-          type="button" 
-          className="btn-close" 
-          onClick={handleClose}
-          aria-label="Close"
-        ></button>
       </div>
     </div>
   )
@@ -152,46 +157,73 @@ export function ToastContainer({ children }) {
   return (
     <ToastContext.Provider value={contextValue}>
       {children}
-      
-      {/* Контейнер с toast'ами */}
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '20px',
-          right: '20px',
-          zIndex: 9999,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '10px'
-        }}
-      >
-        {toasts.map(toast => (
-          <Toast key={toast.id} toast={toast} onClose={removeToast} />
+
+      {/* Контейнер тостов справа (как в Tabler) */}
+      <div className="toast-container toast-container-end">
+        {toasts.map((t) => (
+          <Toast key={t.id} toast={t} onClose={removeToast} />
         ))}
       </div>
 
-      {/* CSS анимации */}
+      {/* Стили: тосты в стиле Tabler Alerts, всплывают справа */}
       <style>{`
-        @keyframes slideInRight {
-          from {
-            transform: translateX(100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateX(0);
-            opacity: 1;
-          }
+        .toast-container-end {
+          position: fixed;
+          top: 1rem;
+          right: 1rem;
+          z-index: 9999;
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          pointer-events: none;
+        }
+        .toast-container-end .toast {
+          pointer-events: auto;
+        }
+        /* NotifyProvider тосты ниже, чтобы не перекрывать useToast */
+        .toast-container-end.notify-viewport {
+          top: 5rem;
         }
 
+        /* Toast в стиле Tabler Alert: колоночный layout, без дублирования отступов */
+        .toast-alert .toast-alert-inner {
+          display: block;
+          flex-direction: column;
+          padding: 0;
+          gap: 0;
+          border-radius: var(--tblr-border-radius, 0.25rem);
+          box-shadow: var(--tblr-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
+        }
+        .toast-alert .toast-alert-header {
+          display: flex;
+          align-items: center;
+          padding: 0.5rem 0.75rem;
+          background: transparent;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+          font-weight: 500;
+        }
+        .toast-alert .toast-alert-icon {
+          color: inherit;
+          flex-shrink: 0;
+        }
+        .toast-alert .toast-body {
+          padding: 0.75rem;
+        }
+        .toast-alert .toast-body .alert-description {
+          color: var(--tblr-secondary);
+        }
+        .toast-alert.alert-danger .toast-alert-header { border-bottom-color: rgba(0, 0, 0, 0.1); }
+        .toast-alert .btn-close {
+          margin-left: auto;
+        }
+
+        @keyframes slideInRight {
+          from { transform: translateX(100%); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
         @keyframes slideOutRight {
-          from {
-            transform: translateX(0);
-            opacity: 1;
-          }
-          to {
-            transform: translateX(100%);
-            opacity: 0;
-          }
+          from { transform: translateX(0); opacity: 1; }
+          to { transform: translateX(100%); opacity: 0; }
         }
       `}</style>
     </ToastContext.Provider>