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>

app/(app)/ascii/page.tsx

@@ -11,7 +11,8 @@ export default function ASCIIPage() {
   return (
     <AppPage
       title={tool.title}
-      description={tool.description}
+      description={tool.summary}
+      icon={tool.icon}
     >
       <ASCIIConverter />
     </AppPage>

app/(app)/color/page.tsx

@@ -1,11 +1,20 @@
 import type { Metadata } from 'next';
+import { ColorManipulation } from '@/components/color/ColorManipulation';
+import { AppPage } from '@/components/layout/AppPage';
 import { getToolByHref } from '@/lib/tools';
-import { ColorPage } from '@/components/color/ColorPage';
 
 const tool = getToolByHref('/color')!;
 
 export const metadata: Metadata = { title: tool.title };
 
-export default function Page() {
-  return <ColorPage />;
+export default function ColorPage() {
+  return (
+    <AppPage
+      title={tool.title}
+      description={tool.summary}
+      icon={tool.icon}
+    >
+      <ColorManipulation />
+    </AppPage>
+  );
 }

app/(app)/favicon/page.tsx

@@ -11,7 +11,8 @@ export default function FaviconPage() {
   return (
     <AppPage
       title={tool.title}
-      description={tool.description}
+      description={tool.summary}
+      icon={tool.icon}
     >
       <FaviconGenerator />
     </AppPage>

app/(app)/media/page.tsx

@@ -11,7 +11,8 @@ export default function MediaPage() {
   return (
     <AppPage
       title={tool.title}
-      description={tool.description}
+      description={tool.summary}
+      icon={tool.icon}
     >
       <FileConverter />
     </AppPage>

app/(app)/qrcode/page.tsx

@@ -11,7 +11,8 @@ export default function QRCodePage() {
   return (
     <AppPage
       title={tool.title}
-      description={tool.description}
+      description={tool.summary}
+      icon={tool.icon}
     >
       <QRCodeGenerator />
     </AppPage>

app/(app)/units/page.tsx

@@ -11,7 +11,8 @@ export default function UnitsPage() {
   return (
     <AppPage
       title={tool.title}
-      description={tool.description}
+      description={tool.summary}
+      icon={tool.icon}
     >
       <MainConverter />
     </AppPage>