Files
units-ui/lib/storage.ts
Sebastian Krüger 5a7bb9a05c 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

116 lines
2.4 KiB
TypeScript

/**
* 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;
}
}