refactor: externalize AppPage component and streamline all tool pages

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

@@ -14,6 +14,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PaletteGrid } from '@/components/pastel/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/ExportMenu';
+import { AppPage } from '@/components/layout/AppPage';
 import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries';
 import { Loader2, Upload, Download } from 'lucide-react';
 import { toast } from 'sonner';
@@ -92,16 +93,11 @@ export default function BatchPage() {
     rotateMutation.isPending;
 
   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">Batch Operations</h1>
-          <p className="text-muted-foreground">
-            Process multiple colors at once with manipulation operations
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <AppPage
+      title="Batch Operations"
+      description="Process multiple colors at once with manipulation operations"
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Input */}
           <div className="space-y-6">
             <Card>
@@ -213,7 +209,6 @@ export default function BatchPage() {
             )}
           </div>
         </div>
-      </div>
-    </div>
+    </AppPage>
   );
 }