import { createRootRouteWithContext, HeadContent, Scripts, } from '@tanstack/react-router'; import 'flag-icons/css/flag-icons.min.css'; import 'katex/dist/katex.min.css'; import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; import type { AppRouter } from '@openpanel/trpc'; import type { QueryClient } from '@tanstack/react-query'; import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'; import appCss from '../styles.css?url'; import type { ConfigResonse } from './api/config'; import { FullPageErrorState } from '@/components/full-page-error-state'; import FullPageLoadingState from '@/components/full-page-loading-state'; import { Providers } from '@/components/providers'; import { ThemeScriptOnce } from '@/components/theme-provider'; import { LinkButton } from '@/components/ui/button'; import { getCookiesFn } from '@/hooks/use-cookie-store'; import { useSessionExtension } from '@/hooks/use-session-extension'; import { op } from '@/utils/op'; if (import.meta.env.VITE_OP_CLIENT_ID) { op.init(); } interface MyRouterContext extends ConfigResonse { queryClient: QueryClient; trpc: TRPCOptionsProxy; } export const Route = createRootRouteWithContext()({ beforeLoad: async ({ context }) => { const [session, cookies] = await Promise.all([ context.queryClient.ensureQueryData( context.trpc.auth.session.queryOptions() ), getCookiesFn().catch(() => ({}) as Record), ]); return { session, cookies }; }, head: () => ({ meta: [ { charSet: 'utf-8', }, { name: 'viewport', content: 'width=device-width, initial-scale=1', }, ], title: 'OpenPanel.dev', links: [ { rel: 'stylesheet', href: appCss, }, ], }), shellComponent: RootDocument, errorComponent: ({ error }) => ( Go back to home ), pendingComponent: FullPageLoadingState, }); function RootDocument({ children }: { children: React.ReactNode }) { useSessionExtension(); return ( {children}