refactor: externalize AppPage component and streamline all tool pages

app/(app)/pastel/names/page.tsx

@@ -11,6 +11,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Card, CardContent } from '@/components/ui/card';
+import { AppPage } from '@/components/layout/AppPage';
 import { useNamedColors } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
 import { parse_color } from '@valknarthing/pastel-wasm';
@@ -44,15 +45,11 @@ export default function NamedColorsPage() {
   }, [data, search, sortBy]);
 
   return (
-    <div className="min-h-screen py-12">
-      <div className="max-w-7xl mx-auto px-8 space-y-8">
-        <div>
-          <h1 className="text-4xl font-bold mb-2">Named Colors</h1>
-          <p className="text-muted-foreground">
-            Explore 148 CSS/X11 named colors
-          </p>
-        </div>
-
+    <AppPage
+      title="Named Colors"
+      description="Explore 148 CSS/X11 named colors"
+    >
+      <div className="space-y-8">
         {/* Search and Filters */}
         <div className="flex flex-col sm:flex-row gap-4">
           <div className="flex-1">
@@ -120,6 +117,6 @@ export default function NamedColorsPage() {
           </CardContent>
         </Card>
       </div>
-    </div>
+    </AppPage>
   );
 }