feat: implement Figlet, Pastel, and Unit tools with a unified layout

- Add Figlet text converter with font selection and history
- Add Pastel color palette generator and manipulation suite
- Add comprehensive Units converter with category-based logic
- Introduce AppShell with Sidebar and Header for navigation
- Modernize theme system with CSS variables and new animations
- Update project configuration and dependencies

components/units/converter/ConversionHistory.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { History, Trash2, ArrowRight } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import {
+  getHistory,
+  clearHistory,
+  type ConversionRecord,
+} from '@/lib/units/storage';
+import { getRelativeTime, formatNumber } from '@/lib/units/utils';
+import { formatMeasureName } from '@/lib/units/units';
+
+interface ConversionHistoryProps {
+  onSelectConversion?: (record: ConversionRecord) => void;
+}
+
+export default function ConversionHistory({
+  onSelectConversion,
+}: ConversionHistoryProps) {
+  const [history, setHistory] = useState<ConversionRecord[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    loadHistory();
+
+    // Listen for storage changes
+    const handleStorageChange = () => {
+      loadHistory();
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    // Also listen for custom event from same window
+    window.addEventListener('historyUpdated', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('historyUpdated', handleStorageChange);
+    };
+  }, []);
+
+  const loadHistory = () => {
+    setHistory(getHistory());
+  };
+
+  const handleClearHistory = () => {
+    if (confirm('Clear all conversion history?')) {
+      clearHistory();
+      loadHistory();
+    }
+  };
+
+  if (history.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            Recent Conversions
+          </CardTitle>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              {isOpen ? 'Hide' : `Show (${history.length})`}
+            </Button>
+            {history.length > 0 && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleClearHistory}
+                className="h-8 w-8"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      {isOpen && (
+        <CardContent>
+          <div className="space-y-2">
+            {history.map((record) => (
+              <button
+                key={record.id}
+                onClick={() => onSelectConversion?.(record)}
+                className="w-full p-3 rounded-lg border hover:bg-accent transition-colors text-left"
+              >
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 text-sm font-medium">
+                      <span className="truncate">
+                        {formatNumber(record.from.value)} {record.from.unit}
+                      </span>
+                      <ArrowRight className="h-3 w-3 flex-shrink-0" />
+                      <span className="truncate">
+                        {formatNumber(record.to.value)} {record.to.unit}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+                      <span>{formatMeasureName(record.measure as any)}</span>
+                      <span>•</span>
+                      <span>{getRelativeTime(record.timestamp)}</span>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </CardContent>
+      )}
+    </Card>
+  );
+}