refactor: externalize tool definitions and polish app shell

- Create lib/tools.tsx as single source of truth for all tool metadata
  (title, shortTitle, navTitle, description, summary, icon, etc.)
- Update AppSidebar to render nav from centralized tools list with
  descriptions, remove collapse footer button
- Update AppHeader with sidebar collapse toggle, tool short title,
  and app logo; remove breadcrumbs
- Update AppPage to auto-resolve tool icon from pathname
- Update ToolsGrid/ToolCard to use shared tools data, remove per-card
  gradients for uniform styling
- Add per-tool HTML title via metadata exports (title template in root
  layout)
- Style landing page and 404 headings with primary theme color
- Add Toolbox icon to hero CTA, GitFork icon link in footer
- Remove footer from error page and "View on Dev" buttons
- Extract ColorPage client component for RSC metadata compatibility

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

lib/tools.tsx

@@ -0,0 +1,97 @@
+import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon } from '@/components/AppIcons';
+
+export interface Tool {
+  /** Short display name (e.g. "Color") */
+  shortTitle: string;
+  /** Full display name (e.g. "Color Manipulation") */
+  title: string;
+  /** Sidebar / nav label (may differ from title) */
+  navTitle: string;
+  /** Route path, e.g. '/color' */
+  href: string;
+  /** One-liner shown in page header */
+  description: string;
+  /** Longer description for the landing-page card */
+  summary: string;
+  /** Icon component */
+  icon: React.ElementType;
+  /** Tailwind gradient utility class for the landing card */
+  gradient: string;
+  /** Hex accent color for the landing card */
+  accentColor: string;
+  /** Badge labels for the landing card */
+  badges: string[];
+}
+
+export const tools: Tool[] = [
+  {
+    shortTitle: 'Color',
+    title: 'Color Manipulation',
+    navTitle: 'Color Manipulation',
+    href: '/color',
+    description: 'Interactive color manipulation and analysis tool',
+    summary:
+      'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
+    icon: ColorIcon,
+    gradient: 'gradient-indigo-purple',
+    accentColor: '#a855f7',
+    badges: ['Open Source', 'WCAG', 'Free'],
+  },
+  {
+    shortTitle: 'Units',
+    title: 'Units Converter',
+    navTitle: 'Units Converter',
+    href: '/units',
+    description: 'Smart unit converter with 187 units across 23 categories',
+    summary:
+      'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search.',
+    icon: UnitsIcon,
+    gradient: 'gradient-cyan-purple',
+    accentColor: '#2dd4bf',
+    badges: ['Open Source', 'Real-time', 'Free'],
+  },
+  {
+    shortTitle: 'ASCII',
+    title: 'ASCII Art Generator',
+    navTitle: 'ASCII Art',
+    href: '/ascii',
+    description: 'ASCII Art Text Generator with 373 Fonts',
+    summary:
+      'ASCII art text generator with 373 fonts. Create stunning text banners, terminal art, and retro designs with live preview and multiple export formats.',
+    icon: ASCIIIcon,
+    gradient: 'gradient-yellow-amber',
+    accentColor: '#eab308',
+    badges: ['Open Source', 'ASCII Art', 'Free'],
+  },
+  {
+    shortTitle: 'Media',
+    title: 'Media Converter',
+    navTitle: 'Media Converter',
+    href: '/media',
+    description: 'Professional browser-based media conversion for video, audio, and images',
+    summary:
+      'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.',
+    icon: MediaIcon,
+    gradient: 'gradient-green-teal',
+    accentColor: '#10b981',
+    badges: ['Open Source', 'Converter', 'Free'],
+  },
+  {
+    shortTitle: 'Favicon',
+    title: 'Favicon Generator',
+    navTitle: 'Favicon Generator',
+    href: '/favicon',
+    description: 'Create a complete set of icons for your website including PWA manifest and HTML code.',
+    summary:
+      'Generate a complete set of favicons for your website. Includes PWA manifest and HTML embed code. All processing happens locally in your browser.',
+    icon: FaviconIcon,
+    gradient: 'gradient-blue-cyan',
+    accentColor: '#3b82f6',
+    badges: ['Open Source', 'Generator', 'Free'],
+  },
+];
+
+/** Look up a tool by its href path */
+export function getToolByHref(href: string): Tool | undefined {
+  return tools.find((t) => t.href === href);
+}