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>
2025-11-09 14:10:08 +01:00
parent 7ef4ea026e
commit a09d2c3eef
12 changed files with 872 additions and 49 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -116,6 +116,42 @@
  .slide-in-from-right-full {
    animation: slideInFromRight 0.3s ease-out;
  }
+
+  .slide-down {
+    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .slide-up {
+    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .scale-in {
+    animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .pulse-subtle {
+    animation: pulseSubtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    );
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

@keyframes slideInFromRight {
@@ -128,3 +164,54 @@
    opacity: 1;
  }
 }
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulseSubtle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
--- a/components/converter/ComparisonMode.tsx
+++ b/components/converter/ComparisonMode.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Copy, X, Download, GitCompare } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import type { FigletFont } from '@/types/figlet';
+
+export interface ComparisonModeProps {
+  text: string;
+  selectedFonts: string[];
+  fontResults: Record<string, string>;
+  onRemoveFont: (fontName: string) => void;
+  onCopyFont: (fontName: string, result: string) => void;
+  onDownloadFont: (fontName: string, result: string) => void;
+  className?: string;
+}
+
+export function ComparisonMode({
+  text,
+  selectedFonts,
+  fontResults,
+  onRemoveFont,
+  onCopyFont,
+  onDownloadFont,
+  className,
+}: ComparisonModeProps) {
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Font Comparison</h2>
+        <span className="text-sm text-muted-foreground">
+          {selectedFonts.length} font{selectedFonts.length !== 1 ? 's' : ''} selected
+        </span>
+      </div>
+
+      {selectedFonts.length === 0 ? (
+        <Card>
+          <EmptyState
+            icon={GitCompare}
+            title="No fonts selected for comparison"
+            description="Click the + icon next to any font in the font selector to add it to the comparison"
+            className="py-12"
+          />
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {selectedFonts.map((fontName, index) => (
+            <Card
+              key={fontName}
+              className="relative scale-in"
+              style={{ animationDelay: `${index * 50}ms` }}
+            >
+              <div className="p-4 space-y-3">
+                {/* Font Header */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono font-semibold px-2 py-1 bg-primary/10 text-primary rounded">
+                      {fontName}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onCopyFont(fontName, fontResults[fontName] || '')}
+                      className="h-8 w-8 p-0"
+                      title="Copy to clipboard"
+                    >
+                      <Copy className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDownloadFont(fontName, fontResults[fontName] || '')}
+                      className="h-8 w-8 p-0"
+                      title="Download"
+                    >
+                      <Download className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onRemoveFont(fontName)}
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                      title="Remove from comparison"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </div>
+
+                {/* ASCII Art Preview */}
+                <div className="relative">
+                  <pre className="p-4 bg-muted rounded-md overflow-x-auto">
+                    <code className="text-xs font-mono whitespace-pre">
+                      {fontResults[fontName] || 'Loading...'}
+                    </code>
+                  </pre>
+                </div>
+
+                {/* Stats */}
+                {fontResults[fontName] && (
+                  <div className="flex gap-4 text-xs text-muted-foreground">
+                    <span>
+                      {fontResults[fontName].split('\n').length} lines
+                    </span>
+                    <span>
+                      {Math.max(
+                        ...fontResults[fontName].split('\n').map((line) => line.length)
+                      )} chars wide
+                    </span>
+                  </div>
+                )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/components/converter/FigletConverter.tsx
+++ b/components/converter/FigletConverter.tsx
@@ -4,12 +4,20 @@ import * as React from 'react';
 import { TextInput } from './TextInput';
 import { FontPreview } from './FontPreview';
 import { FontSelector } from './FontSelector';
+import { TextTemplates } from './TextTemplates';
+import { HistoryPanel } from './HistoryPanel';
+import { ComparisonMode } from './ComparisonMode';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { GitCompare } from 'lucide-react';
 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 { addToHistory, type HistoryItem } from '@/lib/storage/history';
 import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
 import { useToast } from '@/components/ui/Toast';
+import { cn } from '@/lib/utils/cn';
 import type { FigletFont } from '@/types/figlet';

 export function FigletConverter() {
@@ -18,6 +26,9 @@ export function FigletConverter() {
  const [asciiArt, setAsciiArt] = React.useState('');
  const [fonts, setFonts] = React.useState<FigletFont[]>([]);
  const [isLoading, setIsLoading] = React.useState(false);
+  const [isComparisonMode, setIsComparisonMode] = React.useState(false);
+  const [comparisonFonts, setComparisonFonts] = React.useState<string[]>([]);
+  const [comparisonResults, setComparisonResults] = React.useState<Record<string, string>>({});
  const { addToast } = useToast();

  // Load fonts and check URL params on mount
@@ -72,6 +83,7 @@ export function FigletConverter() {

    try {
      await navigator.clipboard.writeText(asciiArt);
+      addToHistory(text, selectedFont, asciiArt);
      addToast('Copied to clipboard!', 'success');
    } catch (error) {
      console.error('Failed to copy:', error);
@@ -115,16 +127,139 @@ export function FigletConverter() {
    addToast(`Random font: ${fonts[randomIndex].name}`, 'info');
  };

+  const handleSelectTemplate = (templateText: string) => {
+    setText(templateText);
+    addToast(`Template applied: ${templateText}`, 'info');
+  };
+
+  const handleSelectHistory = (item: HistoryItem) => {
+    setText(item.text);
+    setSelectedFont(item.font);
+    addToast(`Restored from history`, 'info');
+  };
+
+  // Comparison mode handlers
+  const handleToggleComparisonMode = () => {
+    const newMode = !isComparisonMode;
+    setIsComparisonMode(newMode);
+    if (newMode && comparisonFonts.length === 0) {
+      // Initialize with current font
+      setComparisonFonts([selectedFont]);
+    }
+    addToast(newMode ? 'Comparison mode enabled' : 'Comparison mode disabled', 'info');
+  };
+
+  const handleAddToComparison = (fontName: string) => {
+    if (comparisonFonts.includes(fontName)) {
+      addToast('Font already in comparison', 'info');
+      return;
+    }
+    if (comparisonFonts.length >= 6) {
+      addToast('Maximum 6 fonts for comparison', 'info');
+      return;
+    }
+    setComparisonFonts([...comparisonFonts, fontName]);
+    addToast(`Added ${fontName} to comparison`, 'success');
+  };
+
+  const handleRemoveFromComparison = (fontName: string) => {
+    setComparisonFonts(comparisonFonts.filter((f) => f !== fontName));
+    addToast(`Removed ${fontName} from comparison`, 'info');
+  };
+
+  const handleCopyComparisonFont = async (fontName: string, result: string) => {
+    try {
+      await navigator.clipboard.writeText(result);
+      addToHistory(text, fontName, result);
+      addToast(`Copied ${fontName} to clipboard!`, 'success');
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      addToast('Failed to copy', 'error');
+    }
+  };
+
+  const handleDownloadComparisonFont = (fontName: string, result: string) => {
+    const blob = new Blob([result], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `figlet-${fontName}-${Date.now()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Generate comparison results
+  React.useEffect(() => {
+    if (!isComparisonMode || comparisonFonts.length === 0 || !text) return;
+
+    const generateComparisons = async () => {
+      const results: Record<string, string> = {};
+      for (const fontName of comparisonFonts) {
+        try {
+          results[fontName] = await textToAscii(text, fontName);
+        } catch (error) {
+          console.error(`Error generating ASCII art for ${fontName}:`, error);
+          results[fontName] = 'Error generating ASCII art';
+        }
+      }
+      setComparisonResults(results);
+    };
+
+    generateComparisons();
+  }, [isComparisonMode, comparisonFonts, text]);
+
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Left Column - Input and Preview */}
      <div className="lg:col-span-2 space-y-6">
+        {/* Comparison Mode Toggle */}
+        <Card className="scale-in">
+          <div className="p-4 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <GitCompare className={cn(
+                "h-4 w-4",
+                isComparisonMode ? "text-primary" : "text-muted-foreground"
+              )} />
+              <span className="text-sm font-medium">Comparison Mode</span>
+              {isComparisonMode && comparisonFonts.length > 0 && (
+                <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium slide-down">
+                  {comparisonFonts.length} {comparisonFonts.length === 1 ? 'font' : 'fonts'}
+                </span>
+              )}
+            </div>
+            <Button
+              variant={isComparisonMode ? 'default' : 'outline'}
+              size="sm"
+              onClick={handleToggleComparisonMode}
+              className={cn(isComparisonMode && "shadow-lg")}
+            >
+              {isComparisonMode ? 'Disable' : 'Enable'}
+            </Button>
+          </div>
+        </Card>
+
+        <TextTemplates onSelectTemplate={handleSelectTemplate} />
+
+        <HistoryPanel onSelectHistory={handleSelectHistory} />
+
        <TextInput
          value={text}
          onChange={setText}
          placeholder="Type your text here..."
        />

+        {isComparisonMode ? (
+          <ComparisonMode
+            text={text}
+            selectedFonts={comparisonFonts}
+            fontResults={comparisonResults}
+            onRemoveFont={handleRemoveFromComparison}
+            onCopyFont={handleCopyComparisonFont}
+            onDownloadFont={handleDownloadComparisonFont}
+          />
+        ) : (
          <FontPreview
            text={asciiArt}
            font={selectedFont}
@@ -133,6 +268,7 @@ export function FigletConverter() {
            onDownload={handleDownload}
            onShare={handleShare}
          />
+        )}
      </div>

      {/* Right Column - Font Selector */}
@@ -142,6 +278,9 @@ export function FigletConverter() {
          selectedFont={selectedFont}
          onSelectFont={setSelectedFont}
          onRandomFont={handleRandomFont}
+          isComparisonMode={isComparisonMode}
+          comparisonFonts={comparisonFonts}
+          onAddToComparison={handleAddToComparison}
        />
      </div>
    </div>
--- a/components/converter/FontPreview.tsx
+++ b/components/converter/FontPreview.tsx
@@ -4,7 +4,9 @@ import * as React from 'react';
 import { toPng } from 'html-to-image';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
-import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { useToast } from '@/components/ui/Toast';

@@ -171,12 +173,17 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
          )}
        >
          {isLoading ? (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="text-sm text-muted-foreground">Generating...</div>
+            <div className="space-y-3">
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-5/6" />
+              <Skeleton className="h-6 w-2/3" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-4/5" />
            </div>
          ) : text ? (
            <pre className={cn(
-              'font-mono whitespace-pre overflow-x-auto',
+              'font-mono whitespace-pre overflow-x-auto animate-in',
              fontSize === 'xs' && 'text-[10px]',
              fontSize === 'sm' && 'text-xs sm:text-sm',
              fontSize === 'base' && 'text-sm sm:text-base'
@@ -184,9 +191,12 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
              {text}
            </pre>
          ) : (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="text-sm text-muted-foreground">Your ASCII art will appear here</div>
-            </div>
+            <EmptyState
+              icon={Type}
+              title="Start typing to see your ASCII art"
+              description="Enter text in the input field above to generate ASCII art with the selected font"
+              className="py-8"
+            />
          )}
        </div>
      </div>
--- a/components/converter/FontSelector.tsx
+++ b/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,13 +188,30 @@ 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) => (
+            filteredFonts.map((font) => {
+              const isInComparison = comparisonFonts.includes(font.name);
+              return (
                <div
                  key={font.name}
                  className={cn(
@@ -196,6 +226,26 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, onRandomFont,
                  >
                    {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(
@@ -212,7 +262,8 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, onRandomFont,
                    />
                  </button>
                </div>
-            ))
+              );
+            })
          )}
        </div>

--- a/components/converter/HistoryPanel.tsx
+++ b/components/converter/HistoryPanel.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { History, X, Trash2, ChevronDown, ChevronUp, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { getHistory, clearHistory, removeHistoryItem, type HistoryItem } from '@/lib/storage/history';
+
+export interface HistoryPanelProps {
+  onSelectHistory: (item: HistoryItem) => void;
+  className?: string;
+}
+
+export function HistoryPanel({ onSelectHistory, className }: HistoryPanelProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [history, setHistory] = React.useState<HistoryItem[]>([]);
+
+  const loadHistory = React.useCallback(() => {
+    setHistory(getHistory());
+  }, []);
+
+  React.useEffect(() => {
+    loadHistory();
+    // Refresh history every 2 seconds when expanded
+    if (isExpanded) {
+      const interval = setInterval(loadHistory, 2000);
+      return () => clearInterval(interval);
+    }
+  }, [isExpanded, loadHistory]);
+
+  const handleClearAll = () => {
+    clearHistory();
+    loadHistory();
+  };
+
+  const handleRemove = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    removeHistoryItem(id);
+    loadHistory();
+  };
+
+  const formatTime = (timestamp: number) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return new Date(timestamp).toLocaleDateString();
+  };
+
+  return (
+    <Card className={className}>
+      <div className="p-4">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <History className="h-4 w-4" />
+            <span>Copy History</span>
+            <span className="text-xs text-muted-foreground">({history.length})</span>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="mt-4 space-y-2 slide-down">
+            {history.length === 0 ? (
+              <EmptyState
+                icon={Clock}
+                title="No copy history yet"
+                description="Your recently copied ASCII art will appear here"
+              />
+            ) : (
+              <>
+                <div className="flex justify-end">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleClearAll}
+                    className="text-destructive hover:text-destructive"
+                  >
+                    <Trash2 className="h-3 w-3 mr-1" />
+                    Clear All
+                  </Button>
+                </div>
+
+                <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                  {history.map((item) => (
+                    <div
+                      key={item.id}
+                      onClick={() => onSelectHistory(item)}
+                      className="group relative p-3 bg-muted/50 hover:bg-accent hover:scale-[1.02] rounded-md cursor-pointer transition-all"
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-xs font-mono px-1.5 py-0.5 bg-primary/10 text-primary rounded">
+                              {item.font}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              {formatTime(item.timestamp)}
+                            </span>
+                          </div>
+                          <p className="text-xs truncate">{item.text}</p>
+                        </div>
+                        <button
+                          onClick={(e) => handleRemove(item.id, e)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-destructive/10 rounded"
+                        >
+                          <X className="h-3 w-3 text-destructive" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
--- a/components/converter/TextTemplates.tsx
+++ b/components/converter/TextTemplates.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import { TEXT_TEMPLATES, TEMPLATE_CATEGORIES } from '@/lib/constants/templates';
+
+export interface TextTemplatesProps {
+  onSelectTemplate: (text: string) => void;
+  className?: string;
+}
+
+export function TextTemplates({ onSelectTemplate, className }: TextTemplatesProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
+
+  const filteredTemplates = React.useMemo(() => {
+    if (selectedCategory === 'all') return TEXT_TEMPLATES;
+    return TEXT_TEMPLATES.filter(t => t.category === selectedCategory);
+  }, [selectedCategory]);
+
+  return (
+    <Card className={className}>
+      <div className="p-4">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full flex items-center justify-between text-sm font-medium hover:text-primary transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <Sparkles className="h-4 w-4" />
+            <span>Text Templates</span>
+            <span className="text-xs text-muted-foreground">({TEXT_TEMPLATES.length})</span>
+          </div>
+          {isExpanded ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <div className="mt-4 space-y-3 slide-down">
+            {/* Category Filter */}
+            <div className="flex gap-1 flex-wrap">
+              <button
+                onClick={() => setSelectedCategory('all')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded-md transition-colors',
+                  selectedCategory === 'all'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted hover:bg-muted/80'
+                )}
+              >
+                All
+              </button>
+              {TEMPLATE_CATEGORIES.map((cat) => (
+                <button
+                  key={cat.id}
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={cn(
+                    'px-2 py-1 text-xs rounded-md transition-colors',
+                    selectedCategory === cat.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted hover:bg-muted/80'
+                  )}
+                >
+                  {cat.icon} {cat.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Templates Grid */}
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {filteredTemplates.map((template) => (
+                <button
+                  key={template.id}
+                  onClick={() => onSelectTemplate(template.text)}
+                  className="px-3 py-2 text-xs bg-muted hover:bg-accent hover:scale-105 rounded-md transition-all text-left truncate"
+                  title={template.text}
+                >
+                  {template.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
--- a/components/ui/EmptyState.tsx
+++ b/components/ui/EmptyState.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+import { LucideIcon } from 'lucide-react';
+
+export interface EmptyStateProps {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-12 px-4 text-center', className)}>
+      {Icon && (
+        <div className="mb-4 rounded-full bg-muted p-3">
+          <Icon className="h-6 w-6 text-muted-foreground" />
+        </div>
+      )}
+      <h3 className="mb-2 text-sm font-semibold">{title}</h3>
+      {description && (
+        <p className="mb-4 text-sm text-muted-foreground max-w-sm">
+          {description}
+        </p>
+      )}
+      {action}
+    </div>
+  );
+}
--- a/components/ui/Skeleton.tsx
+++ b/components/ui/Skeleton.tsx
@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils/cn';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export function SkeletonText({ className, ...props }: SkeletonProps) {
+  return (
+    <div className={cn('space-y-2', className)} {...props}>
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-4 w-4/6" />
+    </div>
+  );
+}
--- a/lib/constants/templates.ts
+++ b/lib/constants/templates.ts
@@ -0,0 +1,38 @@
+export interface TextTemplate {
+  id: string;
+  label: string;
+  text: string;
+  category: 'greeting' | 'tech' | 'fun' | 'seasonal';
+}
+
+export const TEXT_TEMPLATES: TextTemplate[] = [
+  // Greetings
+  { id: 'hello', label: 'Hello', text: 'Hello!', category: 'greeting' },
+  { id: 'welcome', label: 'Welcome', text: 'Welcome', category: 'greeting' },
+  { id: 'hello-world', label: 'Hello World', text: 'Hello World', category: 'greeting' },
+
+  // Tech
+  { id: 'code', label: 'Code', text: 'CODE', category: 'tech' },
+  { id: 'dev', label: 'Developer', text: 'DEV', category: 'tech' },
+  { id: 'hack', label: 'Hack', text: 'HACK', category: 'tech' },
+  { id: 'terminal', label: 'Terminal', text: 'Terminal', category: 'tech' },
+  { id: 'git', label: 'Git', text: 'Git', category: 'tech' },
+
+  // Fun
+  { id: 'awesome', label: 'Awesome', text: 'AWESOME', category: 'fun' },
+  { id: 'cool', label: 'Cool', text: 'COOL', category: 'fun' },
+  { id: 'epic', label: 'Epic', text: 'EPIC', category: 'fun' },
+  { id: 'wow', label: 'Wow', text: 'WOW!', category: 'fun' },
+
+  // Seasonal
+  { id: 'happy-birthday', label: 'Happy Birthday', text: 'Happy Birthday!', category: 'seasonal' },
+  { id: 'congrats', label: 'Congrats', text: 'Congrats!', category: 'seasonal' },
+  { id: 'thanks', label: 'Thanks', text: 'Thanks!', category: 'seasonal' },
+];
+
+export const TEMPLATE_CATEGORIES = [
+  { id: 'greeting', label: 'Greetings', icon: '👋' },
+  { id: 'tech', label: 'Tech', icon: '💻' },
+  { id: 'fun', label: 'Fun', icon: '🎉' },
+  { id: 'seasonal', label: 'Seasonal', icon: '🎊' },
+] as const;
--- a/lib/storage/history.ts
+++ b/lib/storage/history.ts
@@ -0,0 +1,53 @@
+'use client';
+
+export interface HistoryItem {
+  id: string;
+  text: string;
+  font: string;
+  result: string;
+  timestamp: number;
+}
+
+const HISTORY_KEY = 'figlet-ui-history';
+const MAX_HISTORY = 10;
+
+export function getHistory(): HistoryItem[] {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = localStorage.getItem(HISTORY_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function addToHistory(text: string, font: string, result: string): void {
+  let history = getHistory();
+
+  const newItem: HistoryItem = {
+    id: `${Date.now()}-${Math.random()}`,
+    text,
+    font,
+    result,
+    timestamp: Date.now(),
+  };
+
+  // Add to beginning
+  history.unshift(newItem);
+
+  // Keep only MAX_HISTORY items
+  history = history.slice(0, MAX_HISTORY);
+
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+}
+
+export function clearHistory(): void {
+  localStorage.removeItem(HISTORY_KEY);
+}
+
+export function removeHistoryItem(id: string): void {
+  const history = getHistory();
+  const filtered = history.filter(item => item.id !== id);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(filtered));
+}
--- a/lib/utils/animations.ts
+++ b/lib/utils/animations.ts
@@ -0,0 +1,38 @@
+// Animation utility classes and keyframes
+
+export const fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export const slideUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+};
+
+export const slideDown = {
+  initial: { opacity: 0, y: -20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 20 },
+};
+
+export const scaleIn = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+};
+
+export const staggerChildren = {
+  animate: {
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+};
+
+export const staggerItem = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+};