Files
figlet-ui/lib/utils/urlSharing.ts

65 lines
1.4 KiB
TypeScript
Raw Normal View History

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>
2025-11-09 12:28:27 +01:00
'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}`;
}