brackt/app/root.tsx

import {
  isRouteErrorResponse,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLocation,
} from "react-router";

import type { Route } from "./+types/root";
import "./app.css";
import { clerkMiddleware, rootAuthLoader, getAuth } from "@clerk/react-router/server";
import { Navbar } from "~/components/navbar";
import { NavigationProgress } from "~/components/NavigationProgress";
import { ClerkProvider } from "@clerk/react-router";
import { dark } from "@clerk/themes";
import { Toaster } from "~/components/ui/sonner";
import { BracktGradients } from "~/components/ui/BracktGradients";
import { Footer } from "~/components/marketing/Footer";
import { isUserAdminByClerkId } from "~/models/user";
import { AlertCircle, FileQuestion, Lock, ShieldOff, ServerCrash } from "lucide-react";

export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()];

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args, async () => {
    const { userId } = await getAuth(args);
    
    let isAdmin = false;
    if (userId) {
      isAdmin = await isUserAdminByClerkId(userId);
    }
    
    return { isAdmin };
  });
}

export const links: Route.LinksFunction = () => [
  { rel: "icon", href: "/favicon.ico?v=20260402", sizes: "48x48" },
  { rel: "icon", href: "/favicon.svg?v=20260402", type: "image/svg+xml" },
  { rel: "icon", href: "/favicon-96x96.png?v=20260402", type: "image/png", sizes: "96x96" },
  { rel: "apple-touch-icon", href: "/apple-touch-icon.png?v=20260402" },
  { rel: "manifest", href: "/site.webmanifest?v=20260402" },
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "anonymous",
  },
  {
    rel: "stylesheet",
    href: "https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap",
  },
];

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <BracktGradients />
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App({ loaderData }: Route.ComponentProps) {
  const location = useLocation();
  const isDraftRoute = location.pathname.includes('/draft');

  return (
    <ClerkProvider loaderData={loaderData} appearance={{ baseTheme: dark }}>
      <NavigationProgress />
      {!isDraftRoute && <Navbar isAdmin={loaderData?.isAdmin ?? false} />}
      {isDraftRoute ? (
        <Outlet />
      ) : (
        <>
          <main>
            <Outlet />
          </main>
          <Footer />
        </>
      )}
      <Toaster />
    </ClerkProvider>
  );
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  let status = 500;
  let title = "Something Went Wrong";
  let message = "An unexpected error occurred. Please try again later.";
  let stack: string | undefined;
  let showSignInHint = false;
  if (isRouteErrorResponse(error)) {
    status = error.status;
    switch (error.status) {
      case 401:
        title = "Sign In Required";
        message = "You need to be signed in to access this page.";
        showSignInHint = true;
        break;
      case 403:
        title = "Access Denied";
        message = "You don't have permission to view this page.";
        break;
      case 404:
        title = "Page Not Found";
        message = "The page you're looking for doesn't exist or has been moved.";
        break;
      default:
        title = `Error ${error.status}`;
        message =
          typeof error.data === "string" && error.data
            ? error.data
            : error.statusText || "Something went wrong.";
    }
  } else if (error instanceof Error) {
    title = "Unexpected Error";
    message = import.meta.env.DEV ? error.message : "An unexpected error occurred. Please try again later.";
    stack = import.meta.env.DEV ? error.stack : undefined;
  }

  return (
    <div className="min-h-screen bg-background text-foreground flex flex-col">
      <header className="border-b border-border/40 bg-background/95 backdrop-blur">
        <div className="flex h-16 items-center px-4 md:px-6 lg:px-8">
          <a href="/">
            <img src="/logo.svg" alt="Brackt" className="h-6" />
          </a>
        </div>
      </header>

      <main className="flex-1 flex items-center justify-center p-6">
        <div className="max-w-md w-full text-center space-y-6">
          <div className="text-8xl font-bold text-muted-foreground/40 select-none">
            {status}
          </div>

          <div className="flex justify-center">
            {statusIcon(status)}
          </div>

          <div className="space-y-2">
            <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
            <p className="text-muted-foreground">{message}</p>
          </div>

          <div className="flex justify-center pt-2">
            <a
              href="/"
              className="inline-flex items-center justify-center rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 transition-colors"
            >
              {showSignInHint ? "Go to Home Page to Sign In" : "Go Home"}
            </a>
          </div>

          {stack && (
            <details className="text-left mt-8 border border-border rounded-md overflow-hidden">
              <summary className="cursor-pointer text-sm text-muted-foreground px-4 py-3 hover:bg-muted/50">
                Stack trace (development only)
              </summary>
              <pre className="p-4 overflow-x-auto text-xs text-muted-foreground border-t border-border">
                <code>{stack}</code>
              </pre>
            </details>
          )}
        </div>
      </main>
    </div>
  );
}

function statusIcon(status: number) {
  const cls = "h-14 w-14 text-muted-foreground";
  if (status === 401) return <Lock className={cls} />;
  if (status === 403) return <ShieldOff className={cls} />;
  if (status === 404) return <FileQuestion className={cls} />;
  if (status >= 500) return <ServerCrash className={cls} />;
  return <AlertCircle className={cls} />;
}