feat: add dark mode, fuzzy search, favorites, and URL sharing
Implemented Phases 5-7 of the implementation plan with major UX enhancements:
**Dark Mode (Phase 9)**
- Added ThemeToggle component with localStorage persistence
- System preference detection
- Smooth theme transitions
- Moon/Sun icon toggle in header
**Fuzzy Search with Fuse.js (Phase 5)**
- Integrated Fuse.js for intelligent font search
- 30% threshold for flexible matching
- Search by font name and filename
- Clear button for search input
- Much better than simple string matching
**Favorites & Recent Fonts System (Phase 7)**
- localStorage-based favorites with heart icon toggle
- Auto-tracking of recently used fonts (max 10)
- Filter tabs: All / Favorites / Recent
- Favorite hearts visible on hover
- Red filled heart for favorited fonts
- Stats showing favorite and recent counts
**Shareable URLs (Phase 6)**
- Encode text + font in URL parameters
- Auto-load from URL on page load
- Share button copies URL to clipboard
- Clean URL updates without page reload
- Perfect for sharing ASCII art creations
**Enhanced Font Selector**
- 3-tab filter system (All/Favorites/Recent)
- Visual feedback for selected fonts
- Empty states for each filter
- Font count statistics
- Heart icon for quick favoriting
- Recent fonts sorted by usage order
**UX Improvements**
- Copy feedback ("Copied to clipboard! ✓")
- Share feedback ("URL copied to clipboard! ✓")
- Responsive button layout
- Better empty states
- Improved accessibility with aria-labels
**Tech Highlights**
- Client-side localStorage management
- URL encoding/decoding utilities
- React hooks for state management
- Fuse.js fuzzy search integration
- Theme persistence across sessions
The app now has professional-grade features rivaling any modern web app!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
import * as React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { Copy, Download, Share2 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
export interface FontPreviewProps {
|
||||
@@ -11,10 +11,11 @@ export interface FontPreviewProps {
|
||||
isLoading?: boolean;
|
||||
onCopy?: () => void;
|
||||
onDownload?: () => void;
|
||||
onShare?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function FontPreview({ text, isLoading, onCopy, onDownload, className }: FontPreviewProps) {
|
||||
export function FontPreview({ text, isLoading, onCopy, onDownload, onShare, className }: FontPreviewProps) {
|
||||
return (
|
||||
<Card className={cn('relative', className)}>
|
||||
<div className="p-6">
|
||||
@@ -27,6 +28,12 @@ export function FontPreview({ text, isLoading, onCopy, onDownload, className }:
|
||||
Copy
|
||||
</Button>
|
||||
)}
|
||||
{onShare && (
|
||||
<Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
|
||||
<Share2 className="h-4 w-4" />
|
||||
Share
|
||||
</Button>
|
||||
)}
|
||||
{onDownload && (
|
||||
<Button variant="outline" size="sm" onClick={onDownload}>
|
||||
<Download className="h-4 w-4" />
|
||||
|
||||
Reference in New Issue
Block a user