import { configureTracking } from "@agent-native/core/client/analytics"; import { appPath } from "@agent-native/core/client/api-path"; import { DevOverlay } from "@agent-native/core/client/dev-overlay"; import { getBrowserTabId, useDbSync } from "@agent-native/core/client/hooks"; import { AppProviders, createAgentNativeQueryClient, } from "@agent-native/core/client/hooks"; import { getLocaleInitScript, type LocaleCode, type LocaleMessages, type LocalizationPreference, useT, } from "@agent-native/core/client/i18n"; import { CommandMenu, useCommandMenuShortcut, } from "@agent-native/core/client/navigation"; import { getThemeInitScript } from "@agent-native/core/client/ui"; import { resolveLocaleFromRequest } from "@agent-native/core/server"; import { IconHierarchy2, IconCheck, IconSun, IconMoon, } from "@tabler/icons-react"; import { useQueryClient } from "@tanstack/react-query"; import { useTheme } from "next-themes"; import { useCallback, useEffect, useState } from "react"; import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useLocation, useNavigate, useRouteLoaderData, } from "react-router"; import type { LinksFunction, LoaderFunctionArgs } from "react-router"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Toaster } from "@/components/ui/sonner"; import { AppToolkitProvider } from "@/components/ui/toolkit-provider"; import { useNavigationState } from "@/hooks/use-navigation-state"; import { i18nCatalog, loadI18nMessages } from "./i18n"; import stylesheet from "./global.css?url"; configureTracking({ getDefaultProps: (_name, properties) => ({ ...properties, app: "agent-native-clips", }), }); export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ]; interface RootLoaderData { locale: LocaleCode; preference: LocalizationPreference; dir: "ltr" | "rtl"; messages: LocaleMessages; } export async function loader({ request, }: LoaderFunctionArgs): Promise { const resolved = resolveLocaleFromRequest({ request }); const messages = (await loadI18nMessages(resolved.locale)) ?? i18nCatalog.messages; return { locale: resolved.locale, preference: resolved.preference, dir: resolved.dir, messages, }; } const THEME_INIT_SCRIPT_SELECTOR = "script[data-agent-native-theme-init]"; const LOCALE_INIT_SCRIPT_SELECTOR = "script[data-agent-native-locale-init]"; function getHydrationStableThemeInitScript() { if (typeof document !== "undefined") { const existing = document.querySelector( THEME_INIT_SCRIPT_SELECTOR, ); if (existing?.innerHTML) return existing.innerHTML; } return getThemeInitScript(); } function getHydrationStableLocaleInitScript( options: Parameters[0], ) { if (typeof document !== "undefined") { const existing = document.querySelector( LOCALE_INIT_SCRIPT_SELECTOR, ); if (existing?.innerHTML) return existing.innerHTML; } return getLocaleInitScript(options); } const THEME_INIT_SCRIPT = getHydrationStableThemeInitScript(); const DEFAULT_LOADER_DATA: RootLoaderData = { locale: "en-US", preference: { locale: "system" }, dir: "ltr", messages: i18nCatalog.messages, }; export function Layout({ children }: { children: React.ReactNode }) { const loaderData = useRouteLoaderData("root") ?? DEFAULT_LOADER_DATA; const localeInitScript = getHydrationStableLocaleInitScript({ locale: loaderData.locale, preference: loaderData.preference, messages: loaderData.messages, }); return (