Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041import '../styles/global.css';import '@luke-ui/react/stylesheet.css';import 'virtual:reference-theme.css';import { Provider } from '@luke-ui/react/provider';import spritesheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline';import { useMutationState, useQuery } from '@tanstack/react-query';import { useLayoutEffect, useMemo } from 'react';import { RouterProvider } from 'react-aria-components';import { Outlet, useHref, useNavigate } from 'react-router';import type { Preferences } from '../api/schemas.js';import { applyInterfaceSettings } from '../api/settings-api.js';import { PREFERENCES_MUTATION_KEY, settingsQueryOptions } from '../api/settings-query.js';
/** The single place that applies interface preferences, so the first paint is already correct. */export function RootLayout() { const navigate = useNavigate(); const settings = useQuery(settingsQueryOptions).data!; const pendingPreferences = useMutationState({ filters: { mutationKey: PREFERENCES_MUTATION_KEY, status: 'pending' }, select: (mutation) => mutation.state.variables as Partial<Preferences> | undefined, }); const preferences = useMemo(() => { const latestPending = pendingPreferences.at(-1); return latestPending ? { ...settings.preferences, ...latestPending } : settings.preferences; }, [pendingPreferences, settings.preferences]);
useLayoutEffect(() => { applyInterfaceSettings(preferences); }, [preferences]);
return ( // React Router passes its `useHref` hook by reference; RAC calls it internally. // oxlint-disable-next-line react/hooks -- hook reference is the supported RouterProvider API <RouterProvider navigate={navigate} useHref={useHref}> <Provider spritesheetHref={spritesheetHref}> <Outlet /> </Provider> </RouterProvider> );}