refactor: reorganize app directory and optimize image loading

app/error.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useEffect } from 'react';
+import { AlertCircle, Home,RefreshCw } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Application error:', error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen bg-[#0d1117] text-white flex items-center justify-center py-12">
+      <div className="w-full max-w-2xl px-4">
+        {/* Error Header */}
+        <div className="mb-8 flex items-start gap-4">
+          <div className="shrink-0 mt-1">
+            <AlertCircle className="h-12 w-12 text-red-400" strokeWidth={1.5} />
+          </div>
+          <div className="flex-1">
+            <h1 className="text-4xl font-semibold text-white mb-2">Something went wrong</h1>
+            <p className="text-lg text-gray-400 leading-relaxed">
+              An unexpected error occurred. Please try again or return to the home page.
+            </p>
+          </div>
+        </div>
+
+        {/* Error Details */}
+        {error.digest && (
+          <div className="mb-8 bg-[#1e1e1e] border border-gray-800 rounded-lg p-6 font-mono">
+            <div className="flex items-center gap-2 mb-3 text-sm text-gray-500">
+              <span className="text-red-400">✗</span>
+              <span>Error Reference</span>
+            </div>
+            <div className="text-red-400 text-sm">{error.digest}</div>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="space-y-3">
+          <Button
+            size="lg"
+            onClick={reset}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white justify-start gap-3 rounded-md"
+          >
+            <RefreshCw className="h-5 w-5" />
+            <span>Try Again</span>
+          </Button>
+          <Link href="/" className="block">
+            <Button
+              size="lg"
+              variant="outline"
+              className="w-full border-gray-700 text-gray-300 hover:bg-gray-900 hover:text-white justify-start gap-3 rounded-md"
+            >
+              <Home className="h-5 w-5" />
+              <span>Go to Home</span>
+            </Button>
+          </Link>
+        </div>
+
+        {/* Help Text */}
+        <div className="mt-8 pt-8 border-t border-gray-800">
+          <p className="text-sm text-gray-500 text-center">
+            If this problem persists, please{' '}
+            <a
+              href="https://github.com/FullAgent/fulling/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 underline"
+            >
+              open an issue
+            </a>
+            {' '}on GitHub.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,64 @@
+import { ArrowLeft,FileQuestion, Home } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-[#0d1117] text-white flex items-center justify-center py-12">
+      <div className="w-full max-w-2xl px-4">
+        {/* Header */}
+        <div className="mb-8 flex items-start gap-4">
+          <div className="shrink-0 mt-1">
+            <FileQuestion className="h-12 w-12 text-gray-400" strokeWidth={1.5} />
+          </div>
+          <div className="flex-1">
+            <h1 className="text-4xl font-semibold text-white mb-2">Page Not Found</h1>
+            <p className="text-lg text-gray-400 leading-relaxed">
+              The page you&apos;re looking for doesn&apos;t exist or has been moved.
+            </p>
+          </div>
+        </div>
+
+        {/* 404 Code Box */}
+        <div className="mb-8 bg-[#1e1e1e] border border-gray-800 rounded-lg p-6 font-mono">
+          <div className="flex items-center gap-2 mb-3 text-sm text-gray-500">
+            <span className="text-yellow-400">⚠</span>
+            <span>HTTP Status</span>
+          </div>
+          <div className="text-yellow-400 text-sm">404 - NOT_FOUND</div>
+        </div>
+
+        {/* Actions */}
+        <div className="space-y-3">
+          <Link href="/" className="block">
+            <Button
+              size="lg"
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white justify-start gap-3 rounded-md"
+            >
+              <Home className="h-5 w-5" />
+              <span>Go to Home</span>
+            </Button>
+          </Link>
+          <Link href="/projects" className="block">
+            <Button
+              size="lg"
+              variant="outline"
+              className="w-full border-gray-700 text-gray-300 hover:bg-gray-900 hover:text-white justify-start gap-3 rounded-md"
+            >
+              <ArrowLeft className="h-5 w-5" />
+              <span>Back to Projects</span>
+            </Button>
+          </Link>
+        </div>
+
+        {/* Help Text */}
+        <div className="mt-8 pt-8 border-t border-gray-800">
+          <p className="text-sm text-gray-500 text-center">
+            Check the URL for typos, or use the navigation above to find what you need.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/dialog/settings-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Code, Database, Github, Save, Terminal } from 'lucide-react';
+import Image from 'next/image';
 import { toast } from 'sonner';
 
 import {
@@ -614,10 +615,12 @@ export default function SettingsDialog({
                     <div className="space-y-4">
                       <div className="flex items-center gap-4 p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
                         {githubStatus.avatar_url && (
-                          <img
+                          <Image
                             src={githubStatus.avatar_url}
                             alt="GitHub Avatar"
-                            className="w-12 h-12 rounded-full"
+                            width={48}
+                            height={48}
+                            className="rounded-full"
                           />
                         )}
                         <div className="flex-1">

components/home-page.tsx

@@ -6,9 +6,9 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 
-import { authenticateWithSealos } from '@/app/actions/sealos-auth';
 import { MatrixRain } from '@/components/MatrixRain';
 import { Button } from '@/components/ui/button';
+import { authenticateWithSealos } from '@/lib/actions/sealos-auth';
 import { useSealos } from '@/provider/sealos';
 
 /**

lib/auth.ts

@@ -515,7 +515,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
   useSecureCookies: process.env.NODE_ENV === 'production',
   pages: {
     signIn: '/login',
-    error: '/error',
+    error: '/auth-error',
   },
   secret: process.env.NEXTAUTH_SECRET,
 })

next.config.ts

@@ -6,6 +6,16 @@ const nextConfig: NextConfig = {
   compress: true,
   // Exclude server-side packages from bundling
   serverExternalPackages: ['pino'],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 }
 
 export default nextConfig