feat(ui): implement comprehensive toast notification system

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>
This commit is contained in:
2025-11-21 15:42:50 +01:00
parent 2f51f11263
commit 3ad7dbf314
8 changed files with 209 additions and 23 deletions

View File

@@ -275,6 +275,17 @@
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.animate-fadeIn {
animation: fadeIn 0.2s ease-out;
}
@@ -283,6 +294,10 @@
animation: slideInFromRight 0.3s ease-out;
}
.animate-slideOutRight {
animation: slideOutRight 0.3s ease-out;
}
.animate-slideDown {
animation: slideDown 0.3s ease-out;
}