feat: add conversion history view with real-time updates

Features:
- Created ConversionHistory component showing recent conversions
- Displays input/output formats, file sizes, and timestamps
- Relative time display (e.g., "5 minutes ago", "2 hours ago")
- Clear all history functionality with confirmation
- Individual history item removal
- Real-time updates when new conversions complete
- Custom event system for same-page updates
- Storage event listener for cross-tab synchronization
- Empty state with helpful messaging
- Clean, organized card-based layout
- Responsive design with proper spacing

Technical improvements:
- Enhanced history storage to dispatch custom events
- History component auto-refreshes on new conversions
- Maintains up to 10 most recent conversions
- Integrated seamlessly into main page layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-17 13:18:02 +01:00
parent 67a1c47396
commit cbaa4361cd
3 changed files with 177 additions and 1 deletions

View File

@@ -43,6 +43,9 @@ export function addToHistory(item: Omit<ConversionHistoryItem, 'id' | 'timestamp
const trimmed = history.slice(0, MAX_HISTORY_ITEMS);
localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
// Dispatch custom event for same-page updates
window.dispatchEvent(new CustomEvent('conversionHistoryUpdated'));
} catch (error) {
console.error('Failed to save history:', error);
}