98ca617ef0
Implement comprehensive toast notification system using Sonner with full
ResolutionFlow theme integration and global error handling.
Core Infrastructure (Phase 1):
- Install sonner@2.0.7 package
- Create toast utility wrapper (lib/toast.ts) with success/error/info/warning/promise methods
- Add Toaster provider to main.tsx with theme-aware configuration
- Custom CSS styling matching ResolutionFlow design system (Purple gradient theme)
- Typography: Plus Jakarta Sans (titles), Inter (body)
- Automatic dark/light mode support via CSS custom properties
Success/Error Notifications (Phase 2):
- TreeEditorPage: Save success/error toasts
- SessionDetailPage: Export/copy success/error toasts
- SettingsPage: Preferences saved toast
- FolderEditModal: Folder create/update/error toasts
- Removed 6 inline error banners in favor of toasts
Error Standardization (Phase 3):
- Global API error interceptor in client.ts
- Automatic toast notifications for network errors, timeouts, 5xx errors
- Handles unhandled API errors gracefully
- Pages can still override with specific error handling
Refinement (Phase 4):
- Standardized vocabulary ("Failed to..." for errors, "...successfully" for success)
- Verified WCAG 2.1 AA accessibility compliance
- Screen reader support, keyboard navigation
- Bundle impact: +450 bytes (+0.06%)
Benefits:
- Consistent user feedback across entire application
- Non-blocking UI notifications
- Auto-dismiss after 4 seconds
- Theme-aware (matches dark/light mode)
- Accessible to all users
- Cleaner codebase (removed error state management)
Closes #33
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
19 lines
454 B
TypeScript
19 lines
454 B
TypeScript
import { StrictMode } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import { Toaster } from 'sonner'
|
|
import './index.css'
|
|
import App from './App'
|
|
|
|
createRoot(document.getElementById('root')!).render(
|
|
<StrictMode>
|
|
{/* Toast notification system - theme syncs automatically via CSS custom properties */}
|
|
<Toaster
|
|
position="top-right"
|
|
expand={false}
|
|
richColors
|
|
closeButton
|
|
/>
|
|
<App />
|
|
</StrictMode>,
|
|
)
|