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 (
{children}
);
}
export default function App({ loaderData }: Route.ComponentProps) {
const location = useLocation();
const isDraftRoute = location.pathname.includes('/draft');
return (
{!isDraftRoute && }
{isDraftRoute ? (
) : (
<>
)}
);
}
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 (
{status}
{statusIcon(status)}
{stack && (
Stack trace (development only)
{stack}
)}
);
}
function statusIcon(status: number) {
const cls = "h-14 w-14 text-muted-foreground";
if (status === 401) return ;
if (status === 403) return ;
if (status === 404) return ;
if (status >= 500) return ;
return ;
}