import { Links, Meta, Outlet, Scripts, ScrollRestoration, data, isRouteErrorResponse, useLoaderData, } from 'react-router'; import { ThemeProvider } from 'remix-themes'; import { SessionProvider } from '@documenso/lib/client-only/providers/session'; import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n'; import { extractLocaleData } from '@documenso/lib/utils/i18n'; import { TrpcProvider } from '@documenso/trpc/react'; import { Toaster } from '@documenso/ui/primitives/toaster'; import { TooltipProvider } from '@documenso/ui/primitives/tooltip'; import type { Route } from './+types/root'; import stylesheet from './app.css?url'; import { GenericErrorLayout } from './components/general/generic-error-layout'; import { langCookie } from './storage/lang-cookie.server'; import { themeSessionResolver } from './storage/theme-session.server'; export const links: Route.LinksFunction = () => [ { 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=Caveat:wght@400..600&display=swap', }, { 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', }, { rel: 'stylesheet', href: stylesheet }, ]; export async function loader({ request, context }: Route.LoaderArgs) { const { getTheme } = await themeSessionResolver(request); let lang = await langCookie.parse(request.headers.get('cookie') ?? ''); if (!APP_I18N_OPTIONS.supportedLangs.includes(lang)) { lang = extractLocaleData({ headers: request.headers }); } return data( { lang, theme: getTheme(), session: context.session, __ENV__: Object.fromEntries( Object.entries(process.env).filter(([key]) => key.startsWith('NEXT_')), // Todo: I'm pretty sure this will leak? ), }, { headers: { 'Set-Cookie': await langCookie.serialize(lang), }, }, ); } export function Layout({ children }: { children: React.ReactNode }) { const { __ENV__, theme, lang } = useLoaderData() || {}; // const [theme] = useTheme(); return ( {/* */} {children}