///
import {
ClientOnly,
HeadContent,
Outlet,
Scripts,
createRootRoute,
} from "@tanstack/react-router";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { TanStackDevtools } from "@tanstack/react-devtools";
import { QueryClientProvider } from "@tanstack/react-query";
import * as React from "react";
import { DefaultCatchBoundary } from "@/client/components/DefaultCatchBoundary";
import { ExportToSheetsModal } from "@/client/components/table/ExportToSheetsModal";
import { themePreferenceInitScript } from "@/client/lib/theme";
import {
identifyAnalyticsUser,
resetAnalyticsUser,
startAnalyticsCapture,
stopAnalyticsCapture,
} from "@/client/lib/posthog";
import { NotFound } from "@/client/components/NotFound";
import appCss from "@/client/styles/app.css?url";
import { useSession } from "@/lib/auth-client";
import { isHostedClientAuthMode } from "@/lib/auth-mode";
import { Toaster } from "sonner";
import { queryClient } from "@/client/tanstack-db";
import { getActiveOrganizationId } from "@/lib/auth-session";
export const Route = createRootRoute({
head: () => ({
meta: [
{
title: "OpenSEO",
},
{
charSet: "utf-8",
},
{
name: "viewport",
content: "width=device-width, initial-scale=1, viewport-fit=cover",
},
{
name: "apple-mobile-web-app-capable",
content: "yes",
},
{
name: "apple-mobile-web-app-status-bar-style",
content: "black-translucent",
},
],
links: [
{ rel: "stylesheet", href: appCss },
{
rel: "apple-touch-icon",
sizes: "180x180",
href: "/apple-touch-icon.png",
},
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: "/favicon-32x32.png",
},
{
rel: "icon",
type: "image/png",
sizes: "16x16",
href: "/favicon-16x16.png",
},
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{ rel: "manifest", href: "/site.webmanifest" },
],
scripts: [],
}),
component: AppLayout,
errorComponent: DefaultCatchBoundary,
notFoundComponent: () => ,
shellComponent: RootDocument,
});
function AppLayout() {
return ;
}
function PostHogBootstrap() {
const isHostedMode = isHostedClientAuthMode();
const { data: session, isPending: isSessionPending } = useSession();
const userId = session?.user?.id ?? null;
const optedOut = session?.user?.analyticsOptedOut === true;
const organizationId = getActiveOrganizationId(session);
const previousUserIdRef = React.useRef(null);
React.useEffect(() => {
if (!isHostedMode || isSessionPending) {
return;
}
if (userId && !optedOut) {
startAnalyticsCapture();
identifyAnalyticsUser({ userId, organizationId });
previousUserIdRef.current = userId;
} else if (userId && optedOut) {
stopAnalyticsCapture();
} else if (previousUserIdRef.current) {
previousUserIdRef.current = null;
resetAnalyticsUser();
}
}, [isHostedMode, isSessionPending, optedOut, organizationId, userId]);
return null;
}
function RootDocument({ children }: { children: React.ReactNode }) {
const showDevtools =
import.meta.env.DEV && import.meta.env.VITE_SHOW_DEVTOOLS !== "false";
return (
<>
{children}
{showDevtools ? (
,
defaultOpen: true,
},
]}
/>
) : null}
);
}