Sebastian Krüger
3ad7dbf314
Added a complete toast notification system with: - Toast store using Zustand for state management - Toast component with 4 types: success, error, warning, info - Animated slide-in/slide-out transitions - Auto-dismiss after configurable duration - Close button on each toast - Utility functions for easy access (toast.success(), toast.error(), etc.) Integrated toast notifications into file operations: - Success notifications for: open image, open project, export image, save project - Error notifications for: failed operations - Warning notifications for: unsupported file types UI Features: - Stacks toasts in top-right corner - Color-coded by type with icons (CheckCircle, AlertCircle, AlertTriangle, Info) - Accessible with ARIA attributes - Smooth animations using custom CSS keyframes This provides immediate user feedback for all major operations throughout the application. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
|
|
import type { Toast as ToastType } from '@/store/toast-store';
|
|
import { useToastStore } from '@/store/toast-store';
|
|
|
|
interface ToastProps {
|
|
toast: ToastType;
|
|
}
|
|
|
|
const iconMap = {
|
|
success: CheckCircle,
|
|
error: AlertCircle,
|
|
warning: AlertTriangle,
|
|
info: Info,
|
|
};
|
|
|
|
const colorMap = {
|
|
success: 'bg-success text-success-foreground border-success',
|
|
error: 'bg-destructive text-destructive-foreground border-destructive',
|
|
warning: 'bg-warning text-warning-foreground border-warning',
|
|
info: 'bg-info text-info-foreground border-info',
|
|
};
|
|
|
|
export function Toast({ toast }: ToastProps) {
|
|
const { removeToast } = useToastStore();
|
|
const [isExiting, setIsExiting] = useState(false);
|
|
const Icon = iconMap[toast.type];
|
|
|
|
const handleClose = () => {
|
|
setIsExiting(true);
|
|
setTimeout(() => {
|
|
removeToast(toast.id);
|
|
}, 300); // Match animation duration
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
flex items-center gap-3 min-w-[300px] max-w-md p-4 rounded-lg border-2 shadow-lg
|
|
${colorMap[toast.type]}
|
|
${isExiting ? 'animate-slideOutRight' : 'animate-slideInFromRight'}
|
|
`}
|
|
role="alert"
|
|
aria-live="polite"
|
|
>
|
|
<Icon className="w-5 h-5 flex-shrink-0" />
|
|
<p className="flex-1 text-sm font-medium">{toast.message}</p>
|
|
<button
|
|
onClick={handleClose}
|
|
className="flex-shrink-0 rounded-full p-1 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
|
|
aria-label="Close notification"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|