Sebastian Krüger
28428ed458
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>
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { FigletConverter } from '@/components/converter/FigletConverter';
|
|
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="min-h-screen p-4 sm:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<header className="mb-8 flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl sm:text-4xl font-bold mb-2">Figlet UI</h1>
|
|
<p className="text-sm sm:text-base text-muted-foreground">
|
|
ASCII Art Text Generator with 373 Fonts
|
|
</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</header>
|
|
|
|
<FigletConverter />
|
|
|
|
<footer className="mt-12 pt-8 border-t text-center text-sm text-muted-foreground">
|
|
<p>
|
|
Powered by{' '}
|
|
<a
|
|
href="https://github.com/patorjk/figlet.js"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-foreground"
|
|
>
|
|
figlet.js
|
|
</a>
|
|
{' '}·{' '}
|
|
Fonts from{' '}
|
|
<a
|
|
href="https://github.com/xero/figlet-fonts"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-foreground"
|
|
>
|
|
xero/figlet-fonts
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|