import { configureTracking } from "@agent-native/core/client/analytics"; import { appPath } from "@agent-native/core/client/api-path"; import { AppProviders, createAgentNativeQueryClient, useDbSync, } 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 { DefaultSpinner, getThemeInitScript, } from "@agent-native/core/client/ui"; import { resolveLocaleFromRequest } from "@agent-native/core/server"; import { IconHierarchy2, 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, useNavigate, useLoaderData, useLocation, useRouteLoaderData, } from "react-router"; import type { LinksFunction, LoaderFunctionArgs } from "react-router"; import { Toaster } from "sonner"; import { AppToolkitProvider } from "@/components/ui/toolkit-provider"; import changelog from "../CHANGELOG.md?raw"; import { i18nCatalog } from "./i18n"; import stylesheet from "./global.css?url"; configureTracking({ getDefaultProps: (_name, properties) => ({ ...properties, app: "agent-native-calendar", }), }); 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 i18nCatalog.loadMessages?.(resolved.locale)) as | LocaleMessages | null | undefined) ?? i18nCatalog.messages; return { locale: resolved.locale, preference: resolved.preference, dir: resolved.dir, messages, }; } const THEME_INIT_SCRIPT = getThemeInitScript(); 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 = getLocaleInitScript({ locale: loaderData.locale, preference: loaderData.preference, messages: loaderData.messages, }); return (