f97ee4e4d8
Installs nprogress and wires it to React Router's useNavigation() hook so a progress bar appears at the top of the page during route transitions. Themed to the site's --electric CSS variable with the spinner disabled. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
185 lines
No EOL
6 KiB
TypeScript
185 lines
No EOL
6 KiB
TypeScript
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 { 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", sizes: "48x48" },
|
|
{ rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
|
|
{ rel: "icon", href: "/favicon-96x96.png", type: "image/png", sizes: "96x96" },
|
|
{ rel: "apple-touch-icon", href: "/apple-touch-icon.png" },
|
|
{ rel: "manifest", href: "/site.webmanifest" },
|
|
{ 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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&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>
|
|
{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>
|
|
)}
|
|
<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} />;
|
|
} |