valknar/paint-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): implement comprehensive toast notification system

Browse Source 
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:
Sebastian Krüger
2025-11-21 15:42:50 +01:00
parent 2f51f11263
commit 3ad7dbf314
8 changed files with 209 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/globals.css
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;
}

2
app/layout.tsx
View File

@@ -1,5 +1,6 @@
import type { Metadata } from 'next';
import './globals.css';
import { ToastProvider } from '@/components/providers/toast-provider';
export const metadata: Metadata = {
title: 'Paint UI - Browser Image Editor',
@@ -34,6 +35,7 @@ export default function RootLayout({
</head>
<body className="min-h-screen antialiased overflow-hidden">
{children}
<ToastProvider />
</body>
</html>
);