feat: implement Phase 3 - Advanced UX features and interactivity

Add comprehensive UX enhancements with innovative features: 🔍 Fuzzy Search Component (SearchUnits.tsx): - Powered by Fuse.js for intelligent fuzzy matching - Searches across unit abbreviations, names, and categories - Real-time dropdown with results - Keyboard shortcut: Press "/" to focus search - Press Escape to close - Click outside to dismiss - Shows measure category with color dot - Top 10 results displayed - Smart weighting: abbr (2x), singular/plural (1.5x), measure (1x) 💾 Conversion History (ConversionHistory.tsx): - LocalStorage persistence (max 50 entries) - Auto-saves conversions as user types - Collapsible history panel - Click to restore previous conversion - Clear all with confirmation - Shows relative time (just now, 5m ago, etc.) - Live updates across tabs with storage events - Custom event dispatch for same-window updates 🌓 Dark Mode Support: - ThemeProvider with light/dark/system modes - Persistent theme preference in localStorage - Smooth theme transitions - ThemeToggle component with animated sun/moon icons - Gradient text adapts to theme - System preference detection ⭐ Favorites & Copy Features: - Star button to favorite units (localStorage) - Copy to clipboard with visual feedback - Hover to reveal action buttons - Check icon confirmation for 2 seconds - Yellow star fill for favorited units ⌨️ Keyboard Shortcuts: - "/" - Focus search input - "Escape" - Close search, blur inputs - More shortcuts ready to add (Tab, Ctrl+K, etc.) 📦 LocalStorage Utilities (lib/storage.ts): - saveToHistory() - Add conversion record - getHistory() - Retrieve history - clearHistory() - Clear all history - getFavorites() / addToFavorites() / removeFromFavorites() - toggleFavorite() - Toggle favorite status - Type-safe ConversionRecord interface - Automatic error handling 🎨 Enhanced MainConverter: - Integrated search at top - Conversion history at bottom - Copy & favorite buttons on each result card - Hover effects with opacity transitions - Auto-save to history on conversion - Click history item to restore conversion - Visual feedback for all interactions 📱 Updated Layout & Page: - ThemeProvider wraps entire app - suppressHydrationWarning for SSR - Top navigation bar with theme toggle - Keyboard hint for search - Dark mode gradient text variants Dependencies Added: - fuse.js 7.1.0 - Fuzzy search engine - lucide-react 0.553.0 - Icon library (Search, Copy, Star, Check, etc.) Features Now Working: ✅ Intelligent fuzzy search across 187 units ✅ Conversion history with persistence ✅ Dark mode with system detection ✅ Copy any result to clipboard ✅ Favorite units for quick access ✅ Keyboard shortcuts (/, Esc) ✅ Smooth animations and transitions ✅ Mobile-responsive design 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 10:14:03 +01:00
parent 901d9047e2
commit 5a7bb9a05c
10 changed files with 708 additions and 24 deletions
--- a/lib/storage.ts
+++ b/lib/storage.ts
@@ -0,0 +1,115 @@
+/**
+ * LocalStorage utilities for persisting user data
+ */
+
+export interface ConversionRecord {
+  id: string;
+  timestamp: number;
+  from: {
+    value: number;
+    unit: string;
+  };
+  to: {
+    value: number;
+    unit: string;
+  };
+  measure: string;
+}
+
+const HISTORY_KEY = 'units-ui-history';
+const FAVORITES_KEY = 'units-ui-favorites';
+const MAX_HISTORY = 50;
+
+/**
+ * Save conversion to history
+ */
+export function saveToHistory(record: Omit<ConversionRecord, 'id' | 'timestamp'>): void {
+  if (typeof window === 'undefined') return;
+
+  const history = getHistory();
+  const newRecord: ConversionRecord = {
+    ...record,
+    id: crypto.randomUUID(),
+    timestamp: Date.now(),
+  };
+
+  // Add to beginning and limit size
+  const updated = [newRecord, ...history].slice(0, MAX_HISTORY);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(updated));
+}
+
+/**
+ * Get conversion history
+ */
+export function getHistory(): ConversionRecord[] {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = localStorage.getItem(HISTORY_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Clear conversion history
+ */
+export function clearHistory(): void {
+  if (typeof window === 'undefined') return;
+  localStorage.removeItem(HISTORY_KEY);
+}
+
+/**
+ * Get favorite units
+ */
+export function getFavorites(): string[] {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = localStorage.getItem(FAVORITES_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Add unit to favorites
+ */
+export function addToFavorites(unit: string): void {
+  if (typeof window === 'undefined') return;
+
+  const favorites = getFavorites();
+  if (!favorites.includes(unit)) {
+    favorites.push(unit);
+    localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
+  }
+}
+
+/**
+ * Remove unit from favorites
+ */
+export function removeFromFavorites(unit: string): void {
+  if (typeof window === 'undefined') return;
+
+  const favorites = getFavorites();
+  const filtered = favorites.filter(u => u !== unit);
+  localStorage.setItem(FAVORITES_KEY, JSON.stringify(filtered));
+}
+
+/**
+ * Toggle favorite status
+ */
+export function toggleFavorite(unit: string): boolean {
+  const favorites = getFavorites();
+  const isFavorite = favorites.includes(unit);
+
+  if (isFavorite) {
+    removeFromFavorites(unit);
+    return false;
+  } else {
+    addToFavorites(unit);
+    return true;
+  }
+}