refactor: streamline toast system and harmonize UI across tools

- Migrate all toast notifications to sonner and remove custom ToastProvider
- Align Card and TextInput styling across Figlet and Pastel (rounded-lg, border-based)
- Fix build error by removing non-existent export in lib/units/index.ts
- Clean up unused Figlet components and constants

components/figlet/FontSelector.tsx

@@ -5,7 +5,7 @@ import Fuse from 'fuse.js';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
 import { EmptyState } from '@/components/ui/EmptyState';
-import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
+import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { Button } from '@/components/ui/Button';
 import type { FigletFont } from '@/types/figlet';
@@ -16,9 +16,6 @@ export interface FontSelectorProps {
   selectedFont: string;
   onSelectFont: (fontName: string) => void;
   onRandomFont?: () => void;
-  isComparisonMode?: boolean;
-  comparisonFonts?: string[];
-  onAddToComparison?: (fontName: string) => void;
   className?: string;
 }
 
@@ -29,9 +26,6 @@ export function FontSelector({
   selectedFont,
   onSelectFont,
   onRandomFont,
-  isComparisonMode = false,
-  comparisonFonts = [],
-  onAddToComparison,
   className
 }: FontSelectorProps) {
   const [searchQuery, setSearchQuery] = React.useState('');
@@ -112,9 +106,9 @@ export function FontSelector({
   };
 
   return (
-    <Card className={className}>
-      <div className="p-6">
-        <div className="flex items-center justify-between mb-4">
+    <Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
+      <div className="p-6 flex flex-col flex-1 min-h-0">
+        <div className="flex items-center justify-between mb-4 shrink-0">
           <h3 className="text-sm font-medium">Select Font</h3>
           {onRandomFont && (
             <Button
@@ -123,14 +117,14 @@ export function FontSelector({
               onClick={onRandomFont}
               title="Random font"
             >
-              <Shuffle className="h-4 w-4" />
+              <Shuffle className="h-3 w-3 mr-2" />
               Random
             </Button>
           )}
         </div>
 
         {/* Filter Tabs */}
-        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
+        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg shrink-0">
           <button
             onClick={() => setFilter('all')}
             className={cn(
@@ -164,7 +158,7 @@ export function FontSelector({
         </div>
 
         {/* Search Input */}
-        <div className="relative mb-4">
+        <div className="relative mb-4 shrink-0">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
           <Input
             ref={searchInputRef}
@@ -186,7 +180,7 @@ export function FontSelector({
         </div>
 
         {/* Font List */}
-        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
+        <div className="flex-1 overflow-y-auto space-y-1 pr-2">
           {filteredFonts.length === 0 ? (
             <EmptyState
               icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
@@ -209,66 +203,40 @@ export function FontSelector({
               className="py-8"
             />
           ) : (
-            filteredFonts.map((font) => {
-              const isInComparison = comparisonFonts.includes(font.name);
-              return (
-                <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'
-                  )}
+            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"
                 >
-                  <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)}
+                  {font.name}
+                </button>
+                <button
+                  onClick={(e) => handleToggleFavorite(font.name, e)}
+                  className="p-1"
+                  aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
+                >
+                  <Heart
                     className={cn(
-                      'opacity-0 group-hover:opacity-100 transition-opacity',
-                      isFavorite(font.name) && 'opacity-100'
+                      'h-4 w-4 transition-colors',
+                      isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground/30 hover:text-red-500/50'
                     )}
-                    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>
-              );
-            })
+                  />
+                </button>
+              </div>
+            ))
           )}
         </div>
 
         {/* Stats */}
-        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
+        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground shrink-0">
           {filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
           {filter === 'favorites' && ` • ${favorites.length} total favorites`}
           {filter === 'recent' && ` • ${recentFonts.length} recent`}