refactor: improve 404 page loading experience and styling

- Replace Suspense with useEffect for better control over component mounting. - Update loading indicators with fixed positioning and enhanced styling for a terminal-like appearance. - Modify KernelPanic404 component to improve text color handling and ensure proper visibility. - Introduce checks for 404 page detection based on pathname and data attributes for more accurate rendering.
refactor: consolidate contact API logic and enhance error handling
2026-01-10 03:41:22 +01:00 · 2026-01-10 03:13:03 +01:00
8 changed files with 2003 additions and 204 deletions
--- a/app/api/contacts/route.ts
+++ b/app/api/contacts/route.ts
@@ -1,25 +1,137 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { type NextRequest, NextResponse } from "next/server";
+import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 import { prisma } from '@/lib/prisma';

 export async function GET(request: NextRequest) {
-  try {
-    // In a real app, you would check for admin session here
-    // For now, we trust the 'x-admin-request' header if it's set by the server-side component or middleware
-    // but typically you'd verify the session cookie/token
+    try {
+        const { searchParams } = new URL(request.url);
+        const filter = searchParams.get('filter') || 'all';
+        const limit = parseInt(searchParams.get('limit') || '50');
+        const offset = parseInt(searchParams.get('offset') || '0');

-    const contacts = await prisma.contact.findMany({
-      orderBy: {
-        createdAt: 'desc',
-      },
-      take: 100,
-    });
+        let whereClause = {};
+        
+        switch (filter) {
+            case 'unread':
+                whereClause = { responded: false };
+                break;
+            case 'responded':
+                whereClause = { responded: true };
+                break;
+            default:
+                whereClause = {};
+        }

-    return NextResponse.json({ contacts });
-  } catch (error) {
-    console.error('Error fetching contacts:', error);
-    return NextResponse.json(
-      { error: 'Failed to fetch contacts' },
-      { status: 500 }
-    );
-  }
+        const [contacts, total] = await Promise.all([
+            prisma.contact.findMany({
+                where: whereClause,
+                orderBy: { createdAt: 'desc' },
+                take: limit,
+                skip: offset,
+            }),
+            prisma.contact.count({ where: whereClause })
+        ]);
+
+        return NextResponse.json({
+            contacts,
+            total,
+            hasMore: offset + contacts.length < total
+        });
+
+    } catch (error) {
+        // Handle missing database table gracefully
+        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
+            if (process.env.NODE_ENV === 'development') {
+                console.warn('Contact table does not exist. Returning empty result.');
+            }
+            return NextResponse.json({
+                contacts: [],
+                total: 0,
+                hasMore: false
+            });
+        }
+        
+        if (process.env.NODE_ENV === 'development') {
+            console.error('Error fetching contacts:', error);
+        }
+        return NextResponse.json(
+            { error: 'Failed to fetch contacts' },
+            { status: 500 }
+        );
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        // Rate limiting for POST requests
+        const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+        if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute
+            return new NextResponse(
+                JSON.stringify({ error: 'Rate limit exceeded' }), 
+                { 
+                    status: 429, 
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        ...getRateLimitHeaders(ip, 5, 60000)
+                    } 
+                }
+            );
+        }
+
+        const body = await request.json();
+        const { name, email, subject, message } = body;
+
+        // Validate required fields
+        if (!name || !email || !subject || !message) {
+            return NextResponse.json(
+                { error: 'All fields are required' },
+                { status: 400 }
+            );
+        }
+
+        // Validate email format
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email)) {
+            return NextResponse.json(
+                { error: 'Invalid email format' },
+                { status: 400 }
+            );
+        }
+
+        const contact = await prisma.contact.create({
+            data: {
+                name,
+                email,
+                subject,
+                message,
+                responded: false
+            }
+        });
+
+        return NextResponse.json({
+            message: 'Contact created successfully',
+            contact
+        }, { status: 201 });
+
+    } catch (error) {
+        // Handle missing database table gracefully
+        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
+            if (process.env.NODE_ENV === 'development') {
+                console.warn('Contact table does not exist.');
+            }
+            return NextResponse.json(
+                { error: 'Database table not found. Please run migrations.' },
+                { status: 503 }
+            );
+        }
+        
+        if (process.env.NODE_ENV === 'development') {
+            console.error('Error creating contact:', error);
+        }
+        return NextResponse.json(
+            { error: 'Failed to create contact' },
+            { status: 500 }
+        );
+    }
 }
--- a/app/api/contacts/route.tsx
+++ b/app/api/contacts/route.tsx
@@ -1,139 +0,0 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { PrismaClient } from '@prisma/client';
-import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
-import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
-const prisma = new PrismaClient();
-
-export async function GET(request: NextRequest) {
-    try {
-        const { searchParams } = new URL(request.url);
-        const filter = searchParams.get('filter') || 'all';
-        const limit = parseInt(searchParams.get('limit') || '50');
-        const offset = parseInt(searchParams.get('offset') || '0');
-
-        let whereClause = {};
-        
-        switch (filter) {
-            case 'unread':
-                whereClause = { responded: false };
-                break;
-            case 'responded':
-                whereClause = { responded: true };
-                break;
-            default:
-                whereClause = {};
-        }
-
-        const [contacts, total] = await Promise.all([
-            prisma.contact.findMany({
-                where: whereClause,
-                orderBy: { createdAt: 'desc' },
-                take: limit,
-                skip: offset,
-            }),
-            prisma.contact.count({ where: whereClause })
-        ]);
-
-        return NextResponse.json({
-            contacts,
-            total,
-            hasMore: offset + contacts.length < total
-        });
-
-    } catch (error) {
-        // Handle missing database table gracefully
-        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
-            if (process.env.NODE_ENV === 'development') {
-                console.warn('Contact table does not exist. Returning empty result.');
-            }
-            return NextResponse.json({
-                contacts: [],
-                total: 0,
-                hasMore: false
-            });
-        }
-        
-        if (process.env.NODE_ENV === 'development') {
-            console.error('Error fetching contacts:', error);
-        }
-        return NextResponse.json(
-            { error: 'Failed to fetch contacts' },
-            { status: 500 }
-        );
-    }
-}
-
-export async function POST(request: NextRequest) {
-    try {
-        // Rate limiting for POST requests
-        const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
-        if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute
-            return new NextResponse(
-                JSON.stringify({ error: 'Rate limit exceeded' }), 
-                { 
-                    status: 429, 
-                    headers: { 
-                        'Content-Type': 'application/json',
-                        ...getRateLimitHeaders(ip, 5, 60000)
-                    } 
-                }
-            );
-        }
-
-        const body = await request.json();
-        const { name, email, subject, message } = body;
-
-        // Validate required fields
-        if (!name || !email || !subject || !message) {
-            return NextResponse.json(
-                { error: 'All fields are required' },
-                { status: 400 }
-            );
-        }
-
-        // Validate email format
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!emailRegex.test(email)) {
-            return NextResponse.json(
-                { error: 'Invalid email format' },
-                { status: 400 }
-            );
-        }
-
-        const contact = await prisma.contact.create({
-            data: {
-                name,
-                email,
-                subject,
-                message,
-                responded: false
-            }
-        });
-
-        return NextResponse.json({
-            message: 'Contact created successfully',
-            contact
-        }, { status: 201 });
-
-    } catch (error) {
-        // Handle missing database table gracefully
-        if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
-            if (process.env.NODE_ENV === 'development') {
-                console.warn('Contact table does not exist.');
-            }
-            return NextResponse.json(
-                { error: 'Database table not found. Please run migrations.' },
-                { status: 503 }
-            );
-        }
-        
-        if (process.env.NODE_ENV === 'development') {
-            console.error('Error creating contact:', error);
-        }
-        return NextResponse.json(
-            { error: 'Failed to create contact' },
-            { status: 500 }
-        );
-    }
-}
--- a/app/components/ClientProviders.tsx
+++ b/app/components/ClientProviders.tsx
@@ -16,21 +16,27 @@ export default function ClientProviders({
 }) {
  const [mounted, setMounted] = useState(false);
  const [is404Page, setIs404Page] = useState(false);
+  const pathname = usePathname();

  useEffect(() => {
    setMounted(true);
-    // Check if we're on a 404 page by looking for the data attribute
+    // Check if we're on a 404 page by looking for the data attribute or pathname
    const check404 = () => {
      if (typeof window !== "undefined") {
        const has404Component = document.querySelector('[data-404-page]');
-        setIs404Page(!!has404Component);
+        const is404Path = pathname === '/404' || window.location.pathname === '/404' || window.location.pathname.includes('404');
+        setIs404Page(!!has404Component || is404Path);
      }
    };
    // Check immediately and after a short delay
    check404();
    const timeout = setTimeout(check404, 100);
-    return () => clearTimeout(timeout);
-  }, []);
+    const interval = setInterval(check404, 500);
+    return () => {
+      clearTimeout(timeout);
+      clearInterval(interval);
+    };
+  }, [pathname]);

  return (
    <AnalyticsProvider>
--- a/app/components/KernelPanic404.tsx
+++ b/app/components/KernelPanic404.tsx
@@ -8,6 +8,7 @@ export default function KernelPanic404() {
  const inputContainerRef = useRef<HTMLDivElement>(null);
  const overlayRef = useRef<HTMLDivElement>(null);
  const bodyRef = useRef<HTMLDivElement>(null); // We'll use a wrapper div instead of document.body for some effects if possible, but strict effects might need body.
+  const bootStartedRef = useRef(false);

  useEffect(() => {
    /* --- SYSTEM CORE --- */
@@ -20,6 +21,10 @@ export default function KernelPanic404() {
    const body = document.body;

    if (!output || !input || !inputContainer || !overlay) return;
+    
+    // Prevent double initialization - check if boot already started or output has content
+    if (bootStartedRef.current || output.children.length > 0) return;
+    bootStartedRef.current = true;

    let audioCtx: AudioContext | null = null;
    let systemFrozen = false;
@@ -554,12 +559,19 @@ export default function KernelPanic404() {
      if (!output) return;
      const d = document.createElement("div");
      d.innerHTML = text;
-      if (type === "log-warn") d.style.color = "#ffb000";
+      // Default color for normal text - use setProperty with important to override globals.css
+      if (!type || (type !== "log-warn" && type !== "log-err" && type !== "alert" && type !== "log-sys" && type !== "log-k" && type !== "log-dim")) {
+        d.style.setProperty("color", "var(--phosphor)", "important");
+      }
+      if (type === "log-warn") d.style.setProperty("color", "#ffb000", "important");
      if (type === "log-err" || type === "alert")
-        d.style.color = "var(--alert)";
-      if (type === "log-dim") d.style.opacity = "0.6";
-      if (type === "log-sys") d.style.color = "cyan";
-      if (type === "log-k") d.style.color = "#fff";
+        d.style.setProperty("color", "var(--alert)", "important");
+      if (type === "log-dim") {
+        d.style.opacity = "0.6";
+        d.style.setProperty("color", "var(--phosphor)", "important");
+      }
+      if (type === "log-sys") d.style.setProperty("color", "cyan", "important");
+      if (type === "log-k") d.style.setProperty("color", "#fff", "important");
      if (type === "pulse-red") d.classList.add("pulse-red");
      if (type === "fsociety-mask") d.classList.add("fsociety-mask");
      if (type === "memory-error") d.classList.add("memory-error");
@@ -1442,18 +1454,40 @@ export default function KernelPanic404() {
          --phosphor: #33ff00;
          --phosphor-sec: #008f11;
          --alert: #ff3333;
-          --font: "Courier New", Courier, monospace;
+          --font: 'Courier New', Courier, monospace;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+          background-color: var(--bg-color);
+          margin: 0;
+          height: 100vh;
+          overflow: hidden;
+          font-family: var(--font);
+          color: var(--phosphor);
+          user-select: none;
+          cursor: default;
+          transition: filter 0.5s, transform 0.5s;
        }

        /* --- CRT EFFECTS --- */
        .crt-wrap {
          width: 100%;
-          height: 100vh;
+          height: 100%;
          padding: 30px;
          box-sizing: border-box;
          background: radial-gradient(circle at center, #111 0%, #000 100%);
          position: relative;
-          overflow: hidden;
+        }
+        
+        /* Override globals.css div color rule for 404 page - must be very specific */
+        html body:has([data-404-page]) .crt-wrap,
+        html body:has([data-404-page]) .crt-wrap *,
+        html body:has([data-404-page]) #output,
+        html body:has([data-404-page]) #output div,
+        html body:has([data-404-page]) #output * {
+          color: var(--phosphor) !important;
        }

        .crt-wrap::before {
@@ -1463,25 +1497,22 @@ export default function KernelPanic404() {
          left: 0;
          width: 100%;
          height: 100%;
-          background:
-            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
-            linear-gradient(
-              90deg,
-              rgba(255, 0, 0, 0.06),
-              rgba(0, 255, 0, 0.02),
-              rgba(0, 0, 255, 0.06)
-            );
-          background-size:
-            100% 4px,
-            3px 100%;
+          background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+                      linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+          background-size: 100% 4px, 3px 100%;
          pointer-events: none;
          z-index: 90;
        }

        .glow {
-          text-shadow:
-            0 0 2px var(--phosphor-sec),
-            0 0 8px var(--phosphor);
+          text-shadow: 0 0 2px var(--phosphor-sec), 0 0 8px var(--phosphor);
+        }
+        
+        /* Hide chat widget on 404 page */
+        body:has([data-404-page]) [data-chat-widget] {
+          display: none !important;
+          visibility: hidden !important;
+          opacity: 0 !important;
        }

        /* --- TERMINAL --- */
@@ -1502,7 +1533,6 @@ export default function KernelPanic404() {
          margin-bottom: 20px;
          font-size: 1.1rem;
          line-height: 1.4;
-          color: var(--phosphor);
        }

        #output::-webkit-scrollbar {
@@ -1522,7 +1552,6 @@ export default function KernelPanic404() {
          margin-right: 10px;
          font-weight: bold;
          white-space: nowrap;
-          color: var(--phosphor);
        }

        #cmd-input {
@@ -1847,7 +1876,7 @@ export default function KernelPanic404() {

      <div id="flash-overlay" ref={overlayRef}></div>

-      <div className="crt-wrap glow" ref={bodyRef}>
+      <div className="crt-wrap glow" ref={bodyRef} data-404-page="true">
        <div id="terminal">
          <div id="output" ref={outputRef}></div>
          <div
--- a/app/components/KernelPanic404Wrapper.tsx
+++ b/app/components/KernelPanic404Wrapper.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function KernelPanic404Wrapper() {
+  useEffect(() => {
+    // Ensure body and html don't interfere
+    document.body.style.background = "#020202";
+    document.body.style.color = "#33ff00";
+    document.documentElement.style.background = "#020202";
+    document.documentElement.style.color = "#33ff00";
+    
+    return () => {
+      // Cleanup
+      document.body.style.background = "";
+      document.body.style.color = "";
+      document.documentElement.style.background = "";
+      document.documentElement.style.color = "";
+    };
+  }, []);
+
+  return (
+    <iframe
+      src="/404-terminal.html"
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        border: "none",
+        zIndex: 9999,
+        margin: 0,
+        padding: 0,
+        backgroundColor: "#020202",
+      }}
+      data-404-page="true"
+      allowTransparency={false}
+    />
+  );
+}
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,30 +1,80 @@
 "use client";

-import { Suspense } from "react";
+import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";

-// Dynamically import KernelPanic404 to avoid SSR issues
-const KernelPanic404 = dynamic(() => import("./components/KernelPanic404"), {
+// Dynamically import KernelPanic404Wrapper to avoid SSR issues
+const KernelPanic404 = dynamic(() => import("./components/KernelPanic404Wrapper"), {
  ssr: false,
  loading: () => (
-    <div className="flex items-center justify-center min-h-screen bg-black text-[#33ff00] font-mono">
+    <div style={{ 
+      position: "fixed", 
+      top: 0, 
+      left: 0, 
+      width: "100%", 
+      height: "100%", 
+      display: "flex", 
+      alignItems: "center", 
+      justifyContent: "center", 
+      backgroundColor: "#020202", 
+      color: "#33ff00", 
+      fontFamily: "monospace" 
+    }}>
      <div>Loading terminal...</div>
    </div>
  ),
 });

 export default function NotFound() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <div style={{ 
+        position: "fixed", 
+        top: 0, 
+        left: 0, 
+        width: "100vw", 
+        height: "100vh", 
+        margin: 0, 
+        padding: 0, 
+        overflow: "hidden",
+        backgroundColor: "#020202",
+        zIndex: 9998
+      }}>
+        <div style={{ 
+          display: "flex", 
+          alignItems: "center", 
+          justifyContent: "center", 
+          width: "100%", 
+          height: "100%", 
+          color: "#33ff00", 
+          fontFamily: "monospace" 
+        }}>
+          Loading terminal...
+        </div>
+      </div>
+    );
+  }
+
  return (
-    <main className="min-h-screen w-full bg-black overflow-hidden relative">
-      <Suspense
-        fallback={
-          <div className="flex items-center justify-center min-h-screen bg-black text-[#33ff00] font-mono">
-            <div>Loading terminal...</div>
-          </div>
-        }
-      >
-        <KernelPanic404 />
-      </Suspense>
-    </main>
+    <div style={{ 
+      position: "fixed", 
+      top: 0, 
+      left: 0, 
+      width: "100vw", 
+      height: "100vh", 
+      margin: 0, 
+      padding: 0, 
+      overflow: "hidden",
+      backgroundColor: "#020202",
+      zIndex: 9998
+    }}>
+      <KernelPanic404 />
+    </div>
  );
 }
--- a/components/Toast.tsx
+++ b/components/Toast.tsx
@@ -59,7 +59,7 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
  const getColors = () => {
    switch (toast.type) {
      case 'success':
-        return 'bg-stone-50 border-green-200 text-green-800 shadow-md';
+        return 'bg-stone-50 border-green-300 text-green-900 shadow-md';
      case 'error':
        return 'bg-stone-50 border-red-200 text-red-800 shadow-md';
      case 'warning':
@@ -291,7 +291,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
      {children}
      
      {/* Toast Container */}
-      <div className="fixed top-4 right-4 z-50 space-y-2 max-w-xs">
+      <div className="fixed top-4 right-4 z-50 space-y-3 max-w-sm">
        <AnimatePresence>
          {toasts.map((toast) => (
            <ToastItem
--- a/public/404-terminal.html
+++ b/public/404-terminal.html