refactor: extract ColorManipulation component and pass icon/summary to AppPage

- Rename ColorPage → ColorManipulation (no AppPage wrapper inside)
- Move AppPage + title/description/icon to color/page.tsx, consistent with other tools
- AppPage now accepts icon prop directly; removes internal usePathname lookup and 'use client'
- All tool pages pass tool.summary as description and tool.icon as icon

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

components/layout/AppPage.tsx

@@ -1,23 +1,15 @@
-'use client';
-
 import * as React from 'react';
-import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/utils';
-import { getToolByHref } from '@/lib/tools';
 
 interface AppPageProps {
   title: string;
   description?: string;
+  icon?: React.ElementType;
   children: React.ReactNode;
   className?: string;
 }
 
-export function AppPage({ title, description, children, className }: AppPageProps) {
-  const pathname = usePathname();
-  const firstSegment = pathname.split('/').filter(Boolean)[0];
-  const tool = getToolByHref(`/${firstSegment ?? ''}`);
-  const Icon = tool?.icon;
-
+export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
   return (
     <div className={cn("min-h-screen py-8", className)}>
       <div className="max-w-7xl mx-auto px-8 space-y-6 animate-fade-in">