// app/routes/__root.tsx
import { ThemeProvider } from "@/components/ui/";
import { getThemeServerFn } from "@/lib/theme";
import "@/styles/app.css";
import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { QueryClient } from "@tanstack/react-query";
import {
createRootRouteWithContext,
HeadContent,
Outlet,
Scripts,
useRouteContext,
useRouter,
} from "@tanstack/react-router";
import type { ReactNode } from "react";
import { DefaultCatchBoundary } from "@/components/default-catch-boundary";
import { NotFound } from "@/components/not-found";
import { Toaster } from "@/components/ui/sonner";
import { cn } from "@/lib/utils";
import Header from "@/routes/(site)/-components/header";
import { auth } from "@clerk/tanstack-react-start/server";
import { getRequest } from "@tanstack/react-start/server";
import { createServerFn } from "@tanstack/react-start";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { CheckCircle, XCircle } from "lucide-react";
const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
const { userId, getToken } = await auth();
const token = await getToken({ template: "convex" });
return {
userId,
token: token,
};
});
export const Route = createRootRouteWithContext<{
queryClient: QueryClient;
convexClient: ConvexReactClient;
convexQueryClient: ConvexQueryClient;
}>()({
head: () => ({
meta: [
{
charSet: "utf-8",
},
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{
title: "Amarillo App",
},
],
links: [
{
rel: "stylesheet",
href: "/src/styles/app.css",
},
],
}),
beforeLoad: async (ctx) => {
const auth = await fetchClerkAuth();
const { userId, token } = auth;
if (token) {
ctx.context.convexQueryClient.serverHttpClient?.setAuth(token);
}
return {
userId,
token,
};
},
errorComponent: (props) => {
return (
);
},
notFoundComponent: () => ,
component: RootComponent,
loader: () => getThemeServerFn(),
});
function RootComponent() {
const data = Route.useLoaderData();
const context = useRouteContext({ from: Route.id });
return (
,
error: ,
}}
toastOptions={{
classNames: {
description: "!text-neutral-11",
},
}}
position="top-center"
duration={2500}
/>
);
}
function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
const theme = Route.useLoaderData();
const router = useRouter();
const pathname = router.state.location.pathname;
const isAppRoute =
pathname.startsWith("/app") ||
pathname.startsWith("/s/") ||
pathname.startsWith("/t/");
const isDashboardRoute = pathname.startsWith("/app/");
return (
{!isDashboardRoute && }
{children}
{/* */}
{/* */}
);
}