spacedrive/interface/index.tsx

import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import { PropsWithChildren, Suspense } from 'react';
import { I18nextProvider } from 'react-i18next';
import { RouterProvider, RouterProviderProps } from 'react-router-dom';
import SuperTokens from 'supertokens-web-js';
import EmailPassword from 'supertokens-web-js/recipe/emailpassword';
import Session from 'supertokens-web-js/recipe/session';
import ThirdParty from 'supertokens-web-js/recipe/thirdparty';
import {
	InteropProviderReact,
	P2PContextProvider,
	useBridgeSubscription,
	useInvalidateQuery,
	useLoadBackendFeatureFlags
} from '@sd/client';
import { toast, TooltipProvider } from '@sd/ui';

import { createRoutes } from './app';
import getCookieHandler from './app/$libraryId/settings/client/account/handlers/cookieHandler';
import getWindowHandler from './app/$libraryId/settings/client/account/handlers/windowHandler';
import { SpacedropProvider } from './app/$libraryId/Spacedrop';
import i18n from './app/I18n';
import { Devtools } from './components/Devtools';
import { WithPrismTheme } from './components/TextViewer/prism';
import ErrorFallback, { BetterErrorBoundary } from './ErrorFallback';
import { useTheme } from './hooks';
import { RouterContext, RoutingContext } from './RoutingContext';

export * from './app';
export { ErrorPage } from './ErrorFallback';
export * from './TabsContext';
export * from './util/keybind';
export * from './util/Platform';

dayjs.extend(advancedFormat);
dayjs.extend(relativeTime);
dayjs.extend(duration);

import('@sentry/browser').then(({ init, Integrations }) => {
	init({
		dsn: 'https://2fb2450aabb9401b92f379b111402dbc@o1261130.ingest.sentry.io/4504053670412288',
		environment: import.meta.env.MODE,
		defaultIntegrations: false,
		integrations: [new Integrations.HttpContext(), new Integrations.Dedupe()]
	});
});

SuperTokens.init({
	appInfo: {
		apiDomain: 'http://localhost:9000',
		apiBasePath: '/api/auth',
		appName: 'Spacedrive Auth Service'
	},
	cookieHandler: getCookieHandler,
	windowHandler: getWindowHandler,
	recipeList: [
		Session.init({ tokenTransferMethod: 'header' }),
		EmailPassword.init(),
		ThirdParty.init()
	]
});

export type Router = RouterProviderProps['router'];

export function SpacedriveRouterProvider(props: {
	routing: {
		routes: ReturnType<typeof createRoutes>;
		visible: boolean;
		router: Router;
		currentIndex: number;
		tabId: string;
		maxIndex: number;
	};
}) {
	return (
		<RouterContext.Provider value={props.routing.router}>
			<RoutingContext.Provider
				value={{
					routes: props.routing.routes,
					visible: props.routing.visible,
					currentIndex: props.routing.currentIndex,
					tabId: props.routing.tabId,
					maxIndex: props.routing.maxIndex
				}}
			>
				<RouterProvider
					router={props.routing.router}
					future={{
						v7_startTransition: true
					}}
				/>
			</RoutingContext.Provider>
		</RouterContext.Provider>
	);
}

export function SpacedriveInterfaceRoot({ children }: PropsWithChildren) {
	useLoadBackendFeatureFlags();
	useInvalidateQuery();
	useTheme();

	useBridgeSubscription(['notifications.listen'], {
		onData({ data: { title, content, kind }, expires }) {
			toast({ title, body: content }, { type: kind });
		}
	});

	return (
		<Suspense>
			<I18nextProvider i18n={i18n}>
				<BetterErrorBoundary FallbackComponent={ErrorFallback}>
					<InteropProviderReact>
						<TooltipProvider>
							<P2PContextProvider>
								<Devtools />
								<WithPrismTheme />
								<SpacedropProvider />
								{children}
							</P2PContextProvider>
						</TooltipProvider>
					</InteropProviderReact>
				</BetterErrorBoundary>
			</I18nextProvider>
		</Suspense>
	);
}