Create Toast component

webui/src/common/components/Toast/Toast.jsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { 
+  XIcon, 
+  CheckCircleIcon, 
+  XCircleIcon, 
+  WarningIcon, 
+  InfoIcon 
+} from '@phosphor-icons/react';
+import Button from '@/common/components/Button';
+import './styles.sass';
+
+const TOAST_ICONS = {
+  success: <CheckCircleIcon size={20} weight="fill" />,
+  error: <XCircleIcon size={20} weight="fill" />,
+  warning: <WarningIcon size={20} weight="fill" />,
+  info: <InfoIcon size={20} weight="fill" />
+};
+
+export const Toast = ({
+  id,
+  type = 'info',
+  message,
+  title,
+  duration = 5000,
+  onClose,
+  actions
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isRemoving, setIsRemoving] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleClose = () => {
+    setIsRemoving(true);
+    setTimeout(() => {
+      onClose?.();
+    }, 150);
+  };
+
+  const toastClasses = [
+    'toast',
+    `toast--${type}`,
+    isVisible && 'toast--visible',
+    isRemoving && 'toast--removing'
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={toastClasses}>
+      <div className="toast-icon">
+        {TOAST_ICONS[type]}
+      </div>
+      
+      <div className="toast-content">
+        {title && <div className="toast-title">{title}</div>}
+        <div className="toast-message">{message}</div>
+        
+        {actions && (
+          <div className="toast-actions">
+            {actions.map((action, index) => (
+              <Button
+                key={index}
+                size="sm"
+                variant="subtle"
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Button
+        variant="subtle"
+        size="sm"
+        icon={<XIcon size={14} />}
+        onClick={handleClose}
+        className="toast-close"
+      />
+    </div>
+  );
+};

webui/src/common/components/Toast/index.js

@@ -0,0 +1 @@
+export { Toast as default } from './Toast.jsx';

webui/src/common/components/Toast/styles.sass

@@ -0,0 +1,92 @@
+.toast-container
+  position: fixed
+  top: 1rem
+  right: 1rem
+  z-index: 2000
+  display: flex
+  flex-direction: column
+  gap: 0.75rem
+  max-width: 400px
+  pointer-events: none
+
+.toast
+  background: var(--bg-alt)
+  border: 1px solid var(--border)
+  border-radius: var(--radius-lg)
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15)
+  padding: 1rem
+  display: flex
+  gap: 0.75rem
+  align-items: flex-start
+  min-width: 300px
+  pointer-events: auto
+  transform: translateX(100%)
+  opacity: 0
+  transition: all 0.15s ease-out
+  
+  &--visible
+    transform: translateX(0)
+    opacity: 1
+  
+  &--removing
+    transform: translateX(100%)
+    opacity: 0
+  
+  &--success
+    border-left: 4px solid #16a34a
+    .toast-icon
+      color: #16a34a
+  
+  &--error
+    border-left: 4px solid #d93025
+    .toast-icon
+      color: #d93025
+  
+  &--warning
+    border-left: 4px solid #f59e0b
+    .toast-icon
+      color: #f59e0b
+  
+  &--info
+    border-left: 4px solid #0f62fe
+    .toast-icon
+      color: #0f62fe
+
+.toast-icon
+  flex-shrink: 0
+  margin-top: 0.125rem
+
+.toast-content
+  flex: 1
+  min-width: 0
+
+.toast-title
+  font-weight: 600
+  color: var(--text)
+  margin-bottom: 0.25rem
+  font-size: 0.9rem
+
+.toast-message
+  color: var(--text-dim)
+  font-size: 0.85rem
+  line-height: 1.4
+  word-wrap: break-word
+
+.toast-actions
+  display: flex
+  gap: 0.5rem
+  margin-top: 0.75rem
+
+.toast-close
+  flex-shrink: 0
+  margin-left: 0.5rem
+
+@media (max-width: 768px)
+  .toast-container
+    left: 1rem
+    right: 1rem
+    top: 1rem
+    max-width: none
+  
+  .toast
+    min-width: auto