Files
paint-ui/store/toast-store.ts
Sebastian Krüger 3ad7dbf314 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>
2025-11-21 15:42:50 +01:00

47 lines
1.1 KiB
TypeScript

import { create } from 'zustand';
export type ToastType = 'success' | 'error' | 'warning' | 'info';
export interface Toast {
id: string;
message: string;
type: ToastType;
duration?: number;
}
interface ToastStore {
toasts: Toast[];
addToast: (message: string, type?: ToastType, duration?: number) => void;
removeToast: (id: string) => void;
clearToasts: () => void;
}
export const useToastStore = create<ToastStore>((set) => ({
toasts: [],
addToast: (message: string, type: ToastType = 'info', duration: number = 3000) => {
const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
const toast: Toast = { id, message, type, duration };
set((state) => ({
toasts: [...state.toasts, toast],
}));
// Auto-remove after duration
if (duration > 0) {
setTimeout(() => {
set((state) => ({
toasts: state.toasts.filter((t) => t.id !== id),
}));
}, duration);
}
},
removeToast: (id: string) =>
set((state) => ({
toasts: state.toasts.filter((t) => t.id !== id),
})),
clearToasts: () => set({ toasts: [] }),
}));