valknar/figlet-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode, fuzzy search, favorites, and URL sharing

Browse Source 
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:
Sebastian Krüger
2025-11-09 12:28:27 +01:00
parent 2c02c64924
commit 28428ed458
7 changed files with 367 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/page.tsx
View File

@@ -1,14 +1,18 @@
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">
<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>
<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 />

34
components/converter/FigletConverter.tsx
View File

@@ -7,6 +7,8 @@ import { FontSelector } from './FontSelector';
import { textToAscii } from '@/lib/figlet/figletService';
import { getFontList } from '@/lib/figlet/fontLoader';
import { debounce } from '@/lib/utils/debounce';
import { addRecentFont } from '@/lib/storage/favorites';
import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
import type { FigletFont } from '@/types/figlet';
export function FigletConverter() {
@@ -16,10 +18,18 @@ export function FigletConverter() {
const [fonts, setFonts] = React.useState<FigletFont[]>([]);
const [isLoading, setIsLoading] = React.useState(false);
const [isCopied, setIsCopied] = React.useState(false);
const [isShared, setIsShared] = React.useState(false);
// Load fonts on mount
// Load fonts and check URL params on mount
React.useEffect(() => {
getFontList().then(setFonts);
// Check for URL parameters
const urlState = decodeFromUrl();
if (urlState) {
if (urlState.text) setText(urlState.text);
if (urlState.font) setSelectedFont(urlState.font);
}
}, []);
// Generate ASCII art
@@ -48,6 +58,12 @@ export function FigletConverter() {
// Trigger generation when text or font changes
React.useEffect(() => {
generateAsciiArt(text, selectedFont);
// Track recent fonts
if (selectedFont) {
addRecentFont(selectedFont);
}
// Update URL
updateUrl(text, selectedFont);
}, [text, selectedFont, generateAsciiArt]);
// Copy to clipboard
@@ -78,6 +94,19 @@ export function FigletConverter() {
URL.revokeObjectURL(url);
};
// Share (copy URL to clipboard)
const handleShare = async () => {
const shareUrl = getShareableUrl(text, selectedFont);
try {
await navigator.clipboard.writeText(shareUrl);
setIsShared(true);
setTimeout(() => setIsShared(false), 2000);
} catch (error) {
console.error('Failed to copy URL:', error);
}
};
return (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Left Column - Input and Preview */}
@@ -89,10 +118,11 @@ export function FigletConverter() {
/>
<FontPreview
text={isCopied ? 'Copied to clipboard! ✓' : asciiArt}
text={isCopied ? 'Copied to clipboard! ✓' : isShared ? 'URL copied to clipboard! ✓' : asciiArt}
isLoading={isLoading}
onCopy={handleCopy}
onDownload={handleDownload}
onShare={handleShare}
/>
</div>

11
components/converter/FontPreview.tsx
View File

@@ -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" />

164
components/converter/FontSelector.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import * as React from 'react';
import Fuse from 'fuse.js';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { Search } from 'lucide-react';
import { Search, X, Heart, Clock, List } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import type { FigletFont } from '@/types/figlet';
import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';
export interface FontSelectorProps {
fonts: FigletFont[];
@@ -14,58 +16,174 @@ export interface FontSelectorProps {
className?: string;
}
type FilterType = 'all' | 'favorites' | 'recent';
export function FontSelector({ fonts, selectedFont, onSelectFont, className }: FontSelectorProps) {
const [searchQuery, setSearchQuery] = React.useState('');
const [filter, setFilter] = React.useState<FilterType>('all');
const [favorites, setFavorites] = React.useState<string[]>([]);
const [recentFonts, setRecentFonts] = React.useState<string[]>([]);
// Load favorites and recent fonts
React.useEffect(() => {
setFavorites(getFavorites());
setRecentFonts(getRecentFonts());
}, []);
// Initialize Fuse.js for fuzzy search
const fuse = React.useMemo(() => {
return new Fuse(fonts, {
keys: ['name', 'fileName'],
threshold: 0.3,
includeScore: true,
});
}, [fonts]);
const filteredFonts = React.useMemo(() => {
if (!searchQuery) return fonts;
let fontsToFilter = fonts;
const query = searchQuery.toLowerCase();
return fonts.filter(font =>
font.name.toLowerCase().includes(query)
);
}, [fonts, searchQuery]);
// Apply category filter
if (filter === 'favorites') {
fontsToFilter = fonts.filter(f => favorites.includes(f.name));
} else if (filter === 'recent') {
fontsToFilter = fonts.filter(f => recentFonts.includes(f.name));
// Sort by recent order
fontsToFilter.sort((a, b) => {
return recentFonts.indexOf(a.name) - recentFonts.indexOf(b.name);
});
}
// Apply search query
if (!searchQuery) return fontsToFilter;
const results = fuse.search(searchQuery);
const searchResults = results.map(result => result.item);
// Filter search results by category
if (filter === 'favorites') {
return searchResults.filter(f => favorites.includes(f.name));
} else if (filter === 'recent') {
return searchResults.filter(f => recentFonts.includes(f.name));
}
return searchResults;
}, [fonts, searchQuery, fuse, filter, favorites, recentFonts]);
const handleToggleFavorite = (fontName: string, e: React.MouseEvent) => {
e.stopPropagation();
toggleFavorite(fontName);
setFavorites(getFavorites());
};
return (
<Card className={className}>
<div className="p-6">
<h3 className="text-sm font-medium mb-4">Select Font</h3>
<div className="relative mb-4">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"
placeholder="Search fonts..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9"
/>
{/* Filter Tabs */}
<div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
<button
onClick={() => setFilter('all')}
className={cn(
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
)}
>
<List className="inline-block h-3 w-3 mr-1" />
All
</button>
<button
onClick={() => setFilter('favorites')}
className={cn(
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
)}
>
<Heart className="inline-block h-3 w-3 mr-1" />
Favorites
</button>
<button
onClick={() => setFilter('recent')}
className={cn(
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
)}
>
<Clock className="inline-block h-3 w-3 mr-1" />
Recent
</button>
</div>
{/* Search Input */}
<div className="relative mb-4">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
<Input
type="text"
placeholder="Search fonts... (fuzzy)"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-9"
/>
{searchQuery && (
<button
onClick={() => setSearchQuery('')}
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
aria-label="Clear search"
>
<X className="h-4 w-4" />
</button>
)}
</div>
{/* Font List */}
<div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
{filteredFonts.length === 0 ? (
<div className="text-sm text-muted-foreground text-center py-8">
No fonts found
{filter === 'favorites' && 'No favorite fonts yet'}
{filter === 'recent' && 'No recent fonts'}
{filter === 'all' && 'No fonts found'}
</div>
) : (
filteredFonts.map((font) => (
<button
<div
key={font.name}
onClick={() => onSelectFont(font.name)}
className={cn(
'w-full text-left px-3 py-2 rounded-md text-sm transition-colors',
'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
'hover:bg-accent hover:text-accent-foreground',
selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
)}
>
{font.name}
</button>
<button
onClick={() => onSelectFont(font.name)}
className="flex-1 text-left"
>
{font.name}
</button>
<button
onClick={(e) => handleToggleFavorite(font.name, e)}
className={cn(
'opacity-0 group-hover:opacity-100 transition-opacity',
isFavorite(font.name) && 'opacity-100'
)}
aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
>
<Heart
className={cn(
'h-4 w-4 transition-colors',
isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
)}
/>
</button>
</div>
))
)}
</div>
{/* Stats */}
<div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
{filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''} available
{filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
{filter === 'favorites' && ` • ${favorites.length} total favorites`}
{filter === 'recent' && ` • ${recentFonts.length} recent`}
</div>
</div>
</Card>

42
components/layout/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,42 @@
'use client';
import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { Button } from '@/components/ui/Button';
export function ThemeToggle() {
const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
React.useEffect(() => {
// Check for saved theme preference or default to light
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
setTheme(initialTheme);
document.documentElement.classList.toggle('dark', initialTheme === 'dark');
}, []);
const toggleTheme = () => {
const newTheme = theme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
document.documentElement.classList.toggle('dark', newTheme === 'dark');
};
return (
<Button
variant="outline"
size="icon"
onClick={toggleTheme}
aria-label="Toggle theme"
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
>
{theme === 'light' ? (
<Moon className="h-4 w-4" />
) : (
<Sun className="h-4 w-4" />
)}
</Button>
);
}

70
lib/storage/favorites.ts Normal file
View File

@@ -0,0 +1,70 @@
'use client';
const FAVORITES_KEY = 'figlet-ui-favorites';
const RECENT_FONTS_KEY = 'figlet-ui-recent-fonts';
const MAX_RECENT = 10;
export function getFavorites(): string[] {
if (typeof window === 'undefined') return [];
try {
const stored = localStorage.getItem(FAVORITES_KEY);
return stored ? JSON.parse(stored) : [];
} catch {
return [];
}
}
export function addFavorite(fontName: string): void {
const favorites = getFavorites();
if (!favorites.includes(fontName)) {
favorites.push(fontName);
localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
}
}
export function removeFavorite(fontName: string): void {
const favorites = getFavorites();
const filtered = favorites.filter(f => f !== fontName);
localStorage.setItem(FAVORITES_KEY, JSON.stringify(filtered));
}
export function isFavorite(fontName: string): boolean {
return getFavorites().includes(fontName);
}
export function toggleFavorite(fontName: string): boolean {
const isCurrentlyFavorite = isFavorite(fontName);
if (isCurrentlyFavorite) {
removeFavorite(fontName);
} else {
addFavorite(fontName);
}
return !isCurrentlyFavorite;
}
export function getRecentFonts(): string[] {
if (typeof window === 'undefined') return [];
try {
const stored = localStorage.getItem(RECENT_FONTS_KEY);
return stored ? JSON.parse(stored) : [];
} catch {
return [];
}
}
export function addRecentFont(fontName: string): void {
let recent = getRecentFonts();
// Remove if already exists
recent = recent.filter(f => f !== fontName);
// Add to beginning
recent.unshift(fontName);
// Keep only MAX_RECENT items
recent = recent.slice(0, MAX_RECENT);
localStorage.setItem(RECENT_FONTS_KEY, JSON.stringify(recent));
}

64
lib/utils/urlSharing.ts Normal file
View File

@@ -0,0 +1,64 @@
'use client';
export interface ShareableState {
text: string;
font: string;
}
/**
* Encode text and font to URL parameters
*/
export function encodeToUrl(text: string, font: string): string {
const params = new URLSearchParams();
if (text) {
params.set('text', text);
}
if (font && font !== 'Standard') {
params.set('font', font);
}
const queryString = params.toString();
return queryString ? `?${queryString}` : '';
}
/**
* Decode URL parameters to get text and font
*/
export function decodeFromUrl(): ShareableState | null {
if (typeof window === 'undefined') return null;
const params = new URLSearchParams(window.location.search);
const text = params.get('text');
const font = params.get('font');
if (!text && !font) return null;
return {
text: text || '',
font: font || 'Standard',
};
}
/**
* Update the URL without reloading the page
*/
export function updateUrl(text: string, font: string): void {
if (typeof window === 'undefined') return;
const url = encodeToUrl(text, font);
const newUrl = url ? `${window.location.pathname}${url}` : window.location.pathname;
window.history.replaceState({}, '', newUrl);
}
/**
* Get shareable URL
*/
export function getShareableUrl(text: string, font: string): string {
if (typeof window === 'undefined') return '';
const query = encodeToUrl(text, font);
return `${window.location.origin}${window.location.pathname}${query}`;
}