2e18f43453
feat(ui/perf): implement loading states, keyboard navigation, and lazy-loaded tools
...
Add comprehensive UX and performance improvements:
**Loading States & Feedback:**
- Add loading overlay with spinner and custom messages
- Integrate loading states into all file operations (open, save, export)
- Create loading-store.ts for centralized loading state management
**Keyboard Navigation:**
- Expand keyboard shortcuts to include tool selection (1-7)
- Add layer navigation with Arrow Up/Down
- Add layer operations (Ctrl+D duplicate, Delete/Backspace remove)
- Display keyboard shortcuts in tool tooltips
- Enhanced keyboard shortcut system with proper key conflict handling
**Performance - Code Splitting:**
- Implement dynamic tool loader with lazy loading
- Tools load on-demand when first selected
- Preload common tools (pencil, brush, eraser) for instant access
- Add tool caching to prevent redundant loads
- Reduces initial bundle size and improves startup time
**Integration:**
- Add LoadingOverlay to app layout
- Update canvas-with-tools to use lazy-loaded tool instances
- Add keyboard shortcut hints to tool palette UI
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-21 16:08:24 +01:00
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
b93ae377d0
feat(phase-6): implement comprehensive file operations system
...
This commit completes Phase 6 of the paint-ui implementation, adding full
file import/export capabilities with drag-drop and clipboard support.
**New Files:**
- lib/file-utils.ts: Core file operations (open, save, export, project format)
- hooks/use-file-operations.ts: React hook for file operations
- hooks/use-drag-drop.ts: Drag & drop state management
- hooks/use-clipboard.ts: Clipboard paste event handling
- components/editor/file-menu.tsx: File menu dropdown component
- components/modals/export-dialog.tsx: Export dialog with format/quality options
- components/modals/new-image-dialog.tsx: New image dialog with presets
- components/modals/index.ts: Modals barrel export
**Updated Files:**
- components/editor/editor-layout.tsx: Integrated FileMenu, drag-drop overlay, clipboard paste
- components/editor/index.ts: Added file-menu export
**Features:**
- ✨ Create new images with dimension presets (Full HD, HD, 800x600, custom)
- ✨ Open image files (PNG, JPG, WEBP) as new layers
- ✨ Save/load .paint project files (JSON with base64 layer data)
- ✨ Export as PNG/JPEG/WEBP with quality control
- ✨ Drag & drop file upload with visual overlay
- ✨ Clipboard paste support (Ctrl+V)
- ✨ File type validation and error handling
- ✨ DataTransfer API integration for unified file handling
**Project File Format (.paint):**
- JSON structure with version, dimensions, layer metadata
- Base64-encoded PNG data for each layer
- Preserves layer properties (opacity, blend mode, order, visibility)
Build verified: ✓ Compiled successfully in 1233ms
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-21 02:06:49 +01:00
