feat: add templates, history, comparison mode, animations, and empty states

- Add text templates with 16 pre-made options across 4 categories (greeting, tech, fun, seasonal)
- Add copy history panel tracking last 10 copied items with restore functionality
- Add font comparison mode to view multiple fonts side-by-side (up to 6 fonts)
- Add smooth animations: slide-down, slide-up, scale-in, fade-in, pulse, and shimmer
- Add loading skeletons for better perceived performance
- Add EmptyState component with contextual messages and icons
- Add hover effects and transitions throughout the UI
- Improve visual feedback with animated badges and shadows

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/converter/FontSelector.tsx

@@ -4,7 +4,8 @@ import * as React from 'react';
 import Fuse from 'fuse.js';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
-import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { Button } from '@/components/ui/Button';
 import type { FigletFont } from '@/types/figlet';
@@ -15,12 +16,24 @@ export interface FontSelectorProps {
   selectedFont: string;
   onSelectFont: (fontName: string) => void;
   onRandomFont?: () => void;
+  isComparisonMode?: boolean;
+  comparisonFonts?: string[];
+  onAddToComparison?: (fontName: string) => void;
   className?: string;
 }
 
 type FilterType = 'all' | 'favorites' | 'recent';
 
-export function FontSelector({ fonts, selectedFont, onSelectFont, onRandomFont, className }: FontSelectorProps) {
+export function FontSelector({
+  fonts,
+  selectedFont,
+  onSelectFont,
+  onRandomFont,
+  isComparisonMode = false,
+  comparisonFonts = [],
+  onAddToComparison,
+  className
+}: FontSelectorProps) {
   const [searchQuery, setSearchQuery] = React.useState('');
   const [filter, setFilter] = React.useState<FilterType>('all');
   const [favorites, setFavorites] = React.useState<string[]>([]);
@@ -175,44 +188,82 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, onRandomFont,
         {/* 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">
-              {filter === 'favorites' && 'No favorite fonts yet'}
-              {filter === 'recent' && 'No recent fonts'}
-              {filter === 'all' && 'No fonts found'}
-            </div>
+            <EmptyState
+              icon={filter === 'favorites' ? Heart : filter === 'recent' ? Clock : Search}
+              title={
+                filter === 'favorites'
+                  ? 'No favorite fonts yet'
+                  : filter === 'recent'
+                  ? 'No recent fonts'
+                  : 'No fonts found'
+              }
+              description={
+                filter === 'favorites'
+                  ? 'Click the heart icon on any font to add it to your favorites'
+                  : filter === 'recent'
+                  ? 'Fonts you use will appear here'
+                  : searchQuery
+                  ? `Try a different search term`
+                  : undefined
+              }
+              className="py-8"
+            />
           ) : (
-            filteredFonts.map((font) => (
-              <div
-                key={font.name}
-                className={cn(
-                  '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'
-                )}
-              >
-                <button
-                  onClick={() => onSelectFont(font.name)}
-                  className="flex-1 text-left"
-                >
-                  {font.name}
-                </button>
-                <button
-                  onClick={(e) => handleToggleFavorite(font.name, e)}
+            filteredFonts.map((font) => {
+              const isInComparison = comparisonFonts.includes(font.name);
+              return (
+                <div
+                  key={font.name}
                   className={cn(
-                    'opacity-0 group-hover:opacity-100 transition-opacity',
-                    isFavorite(font.name) && 'opacity-100'
+                    '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'
                   )}
-                  aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
                 >
-                  <Heart
+                  <button
+                    onClick={() => onSelectFont(font.name)}
+                    className="flex-1 text-left"
+                  >
+                    {font.name}
+                  </button>
+                  {isComparisonMode && onAddToComparison && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onAddToComparison(font.name);
+                      }}
+                      className={cn(
+                        'opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded',
+                        isInComparison && 'opacity-100 bg-primary/10'
+                      )}
+                      aria-label={isInComparison ? 'In comparison' : 'Add to comparison'}
+                      disabled={isInComparison}
+                    >
+                      {isInComparison ? (
+                        <Check className="h-4 w-4 text-primary" />
+                      ) : (
+                        <Plus className="h-4 w-4 text-muted-foreground hover:text-primary" />
+                      )}
+                    </button>
+                  )}
+                  <button
+                    onClick={(e) => handleToggleFavorite(font.name, e)}
                     className={cn(
-                      'h-4 w-4 transition-colors',
-                      isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
+                      'opacity-0 group-hover:opacity-100 transition-opacity',
+                      isFavorite(font.name) && 'opacity-100'
                     )}
-                  />
-                </button>
-              </div>
-            ))
+                    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>