Data Router (#609)

* data router time

* update pnpm.lock

apps/desktop/package.json

@@ -22,6 +22,7 @@
 		"@tauri-apps/api": "1.2.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-router-dom": "6.9.0",
 		"vite-plugin-html": "^3.2.0"
 	},
 	"devDependencies": {

apps/desktop/src/App.tsx

@@ -5,6 +5,7 @@ import { dialog, invoke, os, shell } from '@tauri-apps/api';
 import { listen } from '@tauri-apps/api/event';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import { useEffect } from 'react';
+import { createMemoryRouter } from 'react-router-dom';
 import { getDebugState, hooks } from '@sd/client';
 import {
 	ErrorPage,
@@ -12,7 +13,8 @@ import {
 	OperatingSystem,
 	Platform,
 	PlatformProvider,
-	SpacedriveInterface
+	SpacedriveInterface,
+	routes
 } from '@sd/interface';
 import '@sd/ui/style';
 
@@ -73,6 +75,8 @@ const platform: Platform = {
 
 const queryClient = new QueryClient();
 
+const router = createMemoryRouter(routes);
+
 export default function App() {
 	useEffect(() => {
 		// This tells Tauri to show the current window because it's finished loading
@@ -98,7 +102,7 @@ export default function App() {
 		<hooks.Provider client={client} queryClient={queryClient}>
 			<PlatformProvider platform={platform}>
 				<QueryClientProvider client={queryClient}>
-					<SpacedriveInterface router="memory" />
+					<SpacedriveInterface router={router} />
 				</QueryClientProvider>
 			</PlatformProvider>
 		</hooks.Provider>

apps/web/package.json

@@ -16,7 +16,8 @@
 		"@sd/interface": "workspace:*",
 		"@tanstack/react-query": "^4.12.0",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-router-dom": "6.9.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.30.0",

apps/web/src/App.tsx

@@ -1,8 +1,9 @@
 import { createWSClient, loggerLink, wsLink } from '@rspc/client';
 import { QueryClient, QueryClientProvider, hydrate } from '@tanstack/react-query';
 import { useEffect } from 'react';
+import { createMemoryRouter } from 'react-router-dom';
 import { getDebugState, hooks } from '@sd/client';
-import { Platform, PlatformProvider, SpacedriveInterface } from '@sd/interface';
+import { Platform, PlatformProvider, SpacedriveInterface, routes } from '@sd/interface';
 import demoData from './demoData.json';
 
 globalThis.isDev = import.meta.env.DEV;
@@ -54,6 +55,8 @@ const queryClient = new QueryClient({
 	}
 });
 
+const router = createMemoryRouter(routes);
+
 function App() {
 	useEffect(() => window.parent.postMessage('spacedrive-hello', '*'), []);
 
@@ -66,7 +69,7 @@ function App() {
 			<hooks.Provider client={client} queryClient={queryClient}>
 				<PlatformProvider platform={platform}>
 					<QueryClientProvider client={queryClient}>
-						<SpacedriveInterface router="browser" />
+						<SpacedriveInterface router={router} />
 					</QueryClientProvider>
 				</PlatformProvider>
 			</hooks.Provider>

crates/macos/Package.resolved

@@ -6,8 +6,8 @@
         "repositoryURL": "https://github.com/brendonovich/swift-rs",
         "state": {
           "branch": null,
-          "revision": "e30e6f539898248ab9387b0e21b79167729144b6",
-          "version": "1.0.0"
+          "revision": "cbb9b96b6036108e76879713e910c05bc9e145c7",
+          "version": "1.0.1"
         }
       }
     ]

interface/app/$libraryId/404.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router';
 import { Button } from '@sd/ui';
 
-export default () => {
+export const Component = () => {
 	const navigate = useNavigate();
 
 	return (

interface/app/$libraryId/Layout/index.tsx

@@ -61,7 +61,7 @@ const Layout = () => {
 	);
 };
 
-export default () => {
+export const Component = () => {
 	const params = useParams<{ libraryId: string }>();
 
 	return (

interface/app/$libraryId/PageLayout.tsx

@@ -6,7 +6,7 @@ import DragRegion from '~/components/DragRegion';
 
 const PageLayoutContext = createContext<{ ref: RefObject<HTMLDivElement> } | null>(null);
 
-export default () => {
+export const Component = () => {
 	const ref = useRef<HTMLDivElement>(null);
 
 	return (

interface/app/$libraryId/debug.tsx

@@ -3,7 +3,7 @@ import { CodeBlock } from '~/components/Codeblock';
 import { usePlatform } from '~/util/Platform';
 
 // TODO: Bring this back with a button in the sidebar near settings at the bottom
-export default function DebugScreen() {
+export const Component = () => {
 	const platform = usePlatform();
 	const { data: nodeState } = useBridgeQuery(['nodeState']);
 	const { data: libraryState } = useBridgeQuery(['library.list']);
@@ -42,4 +42,4 @@ export default function DebugScreen() {
 			<CodeBlock src={{ ...libraryState }} />
 		</div>
 	);
-}
+};

interface/app/$libraryId/index.tsx

@@ -1,28 +1,27 @@
 import { RouteObject } from 'react-router-dom';
-import { lazyEl } from '~/util';
 import settingsRoutes from './settings';
 
 export default [
 	{
-		element: lazyEl(() => import("./PageLayout")),
+		lazy: () => import("./PageLayout"),
 		children: [
 			{
 				path: 'overview',
-				element: lazyEl(() => import('./overview'))
+				lazy: () => import('./overview')
 			},
-			{ path: 'people', element: lazyEl(() => import('./people'))},
-			{ path: 'media', element: lazyEl(() => import('./media')) },
-			{ path: 'spaces', element: lazyEl(() => import('./spaces')) },
-			{ path: 'debug', element: lazyEl(() => import('./debug')) },
-			{ path: 'spacedrop', element: lazyEl(() => import('./spacedrop')) },
+			{ path: 'people', lazy: () => import('./people')},
+			{ path: 'media', lazy: () => import('./media') },
+			{ path: 'spaces', lazy: () => import('./spaces') },
+			{ path: 'debug', lazy: () => import('./debug') },
+			{ path: 'spacedrop', lazy: () => import('./spacedrop') },
 		]
 	},
-	{ path: 'location/:id', element: lazyEl(() => import('./location/$id')) },
-	{ path: 'tag/:id', element: lazyEl(() => import('./tag/$id')) },
+	{ path: 'location/:id', lazy: () => import('./location/$id') },
+	{ path: 'tag/:id', lazy: () => import('./tag/$id') },
 	{
 		path: 'settings',
-		element: lazyEl(() => import('./settings/Layout')),
+		lazy: () => import('./settings/Layout'),
 		children: settingsRoutes
 	},
-	{ path: '*', element: lazyEl(() => import('./404')) }
+	{ path: '*', lazy: () => import('./404') }
 ] satisfies RouteObject[];

interface/app/$libraryId/location/$id.tsx

@@ -15,7 +15,7 @@ export function useExplorerParams() {
 	return { location_id, path, limit };
 }
 
-export default () => {
+export const Component = () => {
 	const { location_id, path, limit } = useExplorerParams();
 
 	const quickRescan = useLibraryMutation('locations.quickRescan');

interface/app/$libraryId/media.tsx

@@ -1,5 +1,5 @@
 import { ScreenHeading } from '@sd/ui';
 
-export default function MediaScreen() {
+export const Component = () => {
 	return <ScreenHeading>Media</ScreenHeading>;
-}
+};

interface/app/$libraryId/overview.tsx

@@ -85,7 +85,7 @@ const StatItem = (props: StatItemProps) => {
 	);
 };
 
-export default function OverviewScreen() {
+export const Component = () => {
 	const platform = usePlatform();
 	const { library } = useLibraryContext();
 
@@ -134,7 +134,7 @@ export default function OverviewScreen() {
 			<div className="flex h-4 w-full shrink-0" />
 		</div>
 	);
-}
+};
 
 interface CategoryButtonProps {
 	category: string;

interface/app/$libraryId/people.tsx

@@ -1,5 +1,5 @@
 import { ScreenHeading } from '@sd/ui';
 
-export default () => {
+export const Component = () => {
 	return <ScreenHeading>People</ScreenHeading>;
 };

interface/app/$libraryId/settings/Layout.tsx

@@ -4,7 +4,7 @@ import { useOperatingSystem } from '~/hooks/useOperatingSystem';
 import DragRegion from '../../../components/DragRegion';
 import Sidebar from './Sidebar';
 
-export default () => {
+export const Component = () => {
 	const os = useOperatingSystem();
 
 	return (

interface/app/$libraryId/settings/OverviewLayout.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router';
 
-export default () => (
+export const Component = () => (
 	<div className="custom-scroll page-scroll relative flex h-full max-h-screen w-full grow-0">
 		<div className="flex w-full max-w-4xl flex-col space-y-6 px-12 pt-2 pb-5">
 			<Outlet />

interface/app/$libraryId/settings/client/appearance.tsx

@@ -11,7 +11,7 @@ const schema = z.object({
 	blurEffects: z.boolean()
 });
 
-export default function AppearanceSettings() {
+export const Component = () => {
 	const form = useZodForm({
 		schema
 	});
@@ -52,4 +52,4 @@ export default function AppearanceSettings() {
 			</Setting>
 		</Form>
 	);
-}
+};

interface/app/$libraryId/settings/client/extensions.tsx

@@ -53,7 +53,7 @@ function ExtensionItem(props: { extension: ExtensionItemData }) {
 	);
 }
 
-export default function ExtensionSettings() {
+export const Component = () => {
 	// const { data: volumes } = useBridgeQuery('GetVolumes');
 
 	return (
@@ -71,4 +71,4 @@ export default function ExtensionSettings() {
 			</GridLayout>
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/client/general.tsx

@@ -8,7 +8,7 @@ import Setting from '../Setting';
 const NodePill = tw.div`px-1.5 py-[2px] rounded text-xs font-medium bg-app-selected`;
 const NodeSettingLabel = tw.div`mb-1 text-xs font-medium`;
 
-export default () => {
+export const Component = () => {
 	const node = useBridgeQuery(['nodeState']);
 	const platform = usePlatform();
 	const debugState = useDebugState();

interface/app/$libraryId/settings/client/index.ts

@@ -1,10 +1,9 @@
 import { RouteObject } from "react-router";
-import { lazyEl } from "~/util";
 
 export default [
-	{ path: 'general', element: lazyEl(() => import('./general')) },
-	{ path: 'appearance', element: lazyEl(() => import('./appearance')) },
-	{ path: 'keybindings', element: lazyEl(() => import('./keybindings')) },
-	{ path: 'extensions', element: lazyEl(() => import('./extensions')) },
-	{ path: 'privacy', element: lazyEl(() => import('./privacy')) },
+	{ path: 'general', lazy: () => import('./general') },
+	{ path: 'appearance', lazy: () => import('./appearance') },
+	{ path: 'keybindings', lazy: () => import('./keybindings') },
+	{ path: 'extensions', lazy: () => import('./extensions') },
+	{ path: 'privacy', lazy: () => import('./privacy') },
 ] satisfies RouteObject[]

interface/app/$libraryId/settings/client/keybindings.tsx

@@ -3,7 +3,7 @@ import { Switch } from '@sd/ui';
 import { Heading } from '../Layout';
 import Setting from '../Setting';
 
-export default function AppearanceSettings() {
+export const Component = () => {
 	const [syncWithLibrary, setSyncWithLibrary] = useState(true);
 	return (
 		<>
@@ -22,4 +22,4 @@ export default function AppearanceSettings() {
 			</Setting>
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/client/privacy.tsx

@@ -3,7 +3,7 @@ import { telemetryStore, useTelemetryState } from '~/../packages/client/src';
 import { Heading } from '../Layout';
 import Setting from '../Setting';
 
-export default function PrivacySettings() {
+export const Component = () => {
 	const shareTelemetry = useTelemetryState().shareTelemetry;
 
 	return (
@@ -22,4 +22,4 @@ export default function PrivacySettings() {
 			</Setting>
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/index.tsx

@@ -1,5 +1,4 @@
 import { RouteObject } from 'react-router-dom';
-import { lazyEl } from '~/util';
 import clientRoutes from './client';
 import libraryRoutes from './library';
 import nodeRoutes from './node';
@@ -8,12 +7,12 @@ import resourcesRoutes from './resources';
 export default [
 	{
 		path: 'client',
-		element: lazyEl(() => import('./OverviewLayout')),
+		lazy: () => import('./OverviewLayout'),
 		children: clientRoutes
 	},
 	{
 		path: 'node',
-		element: lazyEl(() => import('./OverviewLayout')),
+		lazy: () => import('./OverviewLayout'),
 		children: nodeRoutes
 	},
 	{
@@ -22,7 +21,7 @@ export default [
 	},
 	{
 		path: 'resources',
-		element: lazyEl(() => import('./OverviewLayout')),
+		lazy: () => import('./OverviewLayout'),
 		children: resourcesRoutes
 	}
 ] satisfies RouteObject[];

interface/app/$libraryId/settings/library/contacts.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '../Layout';
 
-export default () => {
+export const Component = () => {
 	return (
 		<>
 			<Heading title="Contacts" description="Manage your contacts in Spacedrive." />

interface/app/$libraryId/settings/library/general.tsx

@@ -5,7 +5,7 @@ import { useDebouncedFormWatch } from '~/hooks/useDebouncedForm';
 import { Heading } from '../Layout';
 import Setting from '../Setting';
 
-export default () => {
+export const Component = () => {
 	const { library } = useLibraryContext();
 	const editLibrary = useBridgeMutation('library.edit');
 

interface/app/$libraryId/settings/library/index.tsx

@@ -1,21 +1,20 @@
 import { RouteObject } from 'react-router';
-import { lazyEl } from '~/util';
 
 export default [
 	{
-		element: lazyEl(() => import('../OverviewLayout')),
+		lazy: () => import('../OverviewLayout'),
 		children: [
-			{ path: 'contacts', element: lazyEl(() => import('./contacts')) },
-			{ path: 'keys', element: lazyEl(() => import('./keys')) },
-			{ path: 'security', element: lazyEl(() => import('./security')) },
-			{ path: 'sharing', element: lazyEl(() => import('./sharing')) },
-			{ path: 'sync', element: lazyEl(() => import('./sync')) },
-			{ path: 'tags', element: lazyEl(() => import('./tags')) },
-			{ path: 'general', element: lazyEl(() => import('./general')) },
-			{ path: 'tags', element: lazyEl(() => import('./tags')) },
-			{ path: 'nodes', element: lazyEl(() => import('./nodes')) },
-			{ path: 'locations', element: lazyEl(() => import('./locations')) }
+			{ path: 'contacts', lazy: () => import('./contacts') },
+			{ path: 'keys', lazy: () => import('./keys') },
+			{ path: 'security', lazy: () => import('./security') },
+			{ path: 'sharing', lazy: () => import('./sharing') },
+			{ path: 'sync', lazy: () => import('./sync') },
+			{ path: 'tags', lazy: () => import('./tags') },
+			{ path: 'general', lazy: () => import('./general') },
+			{ path: 'tags', lazy: () => import('./tags') },
+			{ path: 'nodes', lazy: () => import('./nodes') },
+			{ path: 'locations', lazy: () => import('./locations') }
 		]
 	},
-	{ path: 'locations/:id', element: lazyEl(() => import('./locations/$id')) }
+	{ path: 'locations/:id', lazy: () => import('./locations/$id') }
 ] satisfies RouteObject[];

interface/app/$libraryId/settings/library/keys/index.tsx

@@ -72,7 +72,7 @@ export const KeyMounterDropdown = ({
 	);
 };
 
-export default () => {
+export const Component = () => {
 	const platform = usePlatform();
 	const isUnlocked = useLibraryQuery(['keys.isUnlocked']);
 	const keyringSk = useLibraryQuery(['keys.getSecretKey'], { initialData: '' }); // assume true by default, as it will often be the case. need to fix this with an rspc subscription+such

interface/app/$libraryId/settings/library/locations/$id.tsx

@@ -24,7 +24,7 @@ const schema = z.object({
 	hidden: z.boolean()
 });
 
-export default function EditLocation() {
+export const Component = () => {
 	const queryClient = useQueryClient();
 	const { id } = useParams<{
 		id: string;
@@ -182,4 +182,4 @@ export default function EditLocation() {
 			</ModalLayout>
 		</Form>
 	);
-}
+};

interface/app/$libraryId/settings/library/locations/index.tsx

@@ -6,7 +6,7 @@ import { Heading } from '../../Layout';
 import AddDialog from './AddDialog';
 import ListItem from './ListItem';
 
-export default () => {
+export const Component = () => {
 	const platform = usePlatform();
 	const locations = useLibraryQuery(['locations.list']);
 	const createLocation = useLibraryMutation('locations.create');

interface/app/$libraryId/settings/library/nodes.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '../Layout';
 
-export default () => {
+export const Component = () => {
 	return (
 		<>
 			<Heading

interface/app/$libraryId/settings/library/security.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '../Layout';
 
-export default () => {
+export const Component = () => {
 	return (
 		<>
 			<Heading title="Security" description="Keep your client safe." />

interface/app/$libraryId/settings/library/sharing.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '../Layout';
 
-export default () => {
+export const Component = () => {
 	return (
 		<>
 			<Heading title="Sharing" description="Manage who has access to your libraries." />

interface/app/$libraryId/settings/library/sync.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '../Layout';
 
-export default () => {
+export const Component = () => {
 	return (
 		<>
 			<Heading title="Sync" description="Manage how Spacedrive syncs." />

interface/app/$libraryId/settings/library/tags/index.tsx

@@ -6,7 +6,7 @@ import { Heading } from '../../Layout';
 import CreateDialog from './CreateDialog';
 import EditForm from './EditForm';
 
-export default function TagsSettings() {
+export const Component = () => {
 	const tags = useLibraryQuery(['tags.list']);
 
 	const [selectedTag, setSelectedTag] = useState<null | Tag>(tags.data?.[0] ?? null);
@@ -54,4 +54,4 @@ export default function TagsSettings() {
 			)}
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/node/index.tsx

@@ -1,7 +1,6 @@
 import { RouteObject } from "react-router";
-import { lazyEl } from "~/util";
 
 export default [
-	{ path: 'p2p', element: lazyEl(() => import('./p2p')) },
-	{ path: 'libraries', element: lazyEl(() => import('./libraries')) },
+	{ path: 'p2p', lazy: () => import('./p2p') },
+	{ path: 'libraries', lazy: () => import('./libraries') },
 ] satisfies RouteObject[]

interface/app/$libraryId/settings/node/libraries/index.tsx

@@ -4,7 +4,7 @@ import { Heading } from '../../Layout';
 import CreateDialog from './CreateDialog';
 import ListItem from './ListItem';
 
-export default () => {
+export const Component = () => {
 	const libraries = useBridgeQuery(['library.list']);
 
 	const { library } = useLibraryContext();

interface/app/$libraryId/settings/node/p2p.tsx

@@ -2,7 +2,7 @@ import { Input, Switch } from '@sd/ui';
 import { Heading } from '../Layout';
 import Setting from '../Setting';
 
-export default function P2PSettings() {
+export const Component = () => {
 	return (
 		<>
 			<Heading
@@ -31,4 +31,4 @@ export default function P2PSettings() {
 			</Setting>
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/resources/about.tsx

@@ -2,7 +2,7 @@ import { AppLogo } from '@sd/assets/images';
 import { useBridgeQuery } from '@sd/client';
 import { useOperatingSystem } from '~/hooks/useOperatingSystem';
 
-export default function AboutSpacedrive() {
+export const Component = () => {
 	const buildInfo = useBridgeQuery(['buildInfo']);
 
 	const os = useOperatingSystem();
@@ -26,4 +26,4 @@ export default function AboutSpacedrive() {
 			</div>
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/resources/changelog.tsx

@@ -1,9 +1,9 @@
 import { Heading } from '../Layout';
 
-export default function Changelog() {
+export const Component = () => {
 	return (
 		<>
 			<Heading title="Changelog" description="See what cool new features we're making" />
 		</>
 	);
-}
+};

interface/app/$libraryId/settings/resources/dependencies.tsx

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { ScreenHeading } from '@sd/ui';
 import { usePlatform } from '~/util/Platform';
 
-export default function DependenciesScreen() {
+export const Component = () => {
 	const frontEnd = useQuery(['frontend-deps'], () => import('@sd/assets/deps/frontend-deps.json'));
 	const backEnd = useQuery(['backend-deps'], () => import('@sd/assets/deps/backend-deps.json'));
 	const platform = usePlatform();
@@ -44,4 +44,4 @@ export default function DependenciesScreen() {
 			</div>
 		</div>
 	);
-}
+};

interface/app/$libraryId/settings/resources/index.tsx

@@ -1,9 +1,8 @@
 import { RouteObject } from "react-router";
-import { lazyEl } from "~/util";
 
 export default [
-	{ path: 'about', element: lazyEl(() => import('./about')) },
-	{ path: 'changelog', element: lazyEl(() => import('./changelog')) },
-	{ path: 'dependencies', element: lazyEl(() => import('./dependencies')) },
-	{ path: 'support', element: lazyEl(() => import('./support')) },
+	{ path: 'about', lazy: () => import('./about') },
+	{ path: 'changelog', lazy: () => import('./changelog') },
+	{ path: 'dependencies', lazy: () => import('./dependencies') },
+	{ path: 'support', lazy: () => import('./support') },
 ] satisfies RouteObject[]

interface/app/$libraryId/settings/resources/support.tsx

@@ -1,9 +1,9 @@
 import { Heading } from '../Layout';
 
-export default function Support() {
+export const Component = () => {
 	return (
 		<>
 			<Heading title="Support" description="" />
 		</>
 	);
-}
+};

interface/app/$libraryId/spacedrop.tsx

@@ -136,7 +136,7 @@ function TemporarySpacedropDemo() {
 	);
 }
 
-export default () => {
+export const Component = () => {
 	const searchRef = useRef<HTMLInputElement>(null);
 
 	return (

interface/app/$libraryId/spaces.tsx

@@ -1,5 +1,5 @@
 import { ScreenHeading } from '@sd/ui';
 
-export default function SpacesScreen() {
+export const Component = () => {
 	return <ScreenHeading>Spaces</ScreenHeading>;
-}
+};

interface/app/$libraryId/tag/$id.tsx

@@ -2,10 +2,10 @@ import { useParams } from 'react-router-dom';
 import { useLibraryQuery } from '@sd/client';
 import Explorer from '../Explorer';
 
-export default function TagExplorer() {
+export const Component = () => {
 	const { id } = useParams<{ id: string }>();
 
 	const explorerData = useLibraryQuery(['tags.getExplorerData', Number(id)]);
 
 	return <div className="w-full">{explorerData.data && <Explorer data={explorerData.data} />}</div>;
-}
+};

interface/app/index.tsx

@@ -1,10 +1,9 @@
-import { Navigate, RouteObject, useRoutes } from 'react-router-dom';
+import { Navigate, Outlet, RouteObject } from 'react-router-dom';
 import { currentLibraryCache, useCachedLibraries, useInvalidateQuery } from '@sd/client';
-import { useKeybindHandler } from '~/hooks/useKeyboardHandler';
-import { lazyEl } from '~/util';
 import libraryRoutes from './$libraryId';
 import onboardingRoutes from './onboarding';
 import './style.scss';
+import { useKeybindHandler } from '~/hooks/useKeyboardHandler';
 
 const Index = () => {
 	const libraries = useCachedLibraries();
@@ -21,30 +20,32 @@ const Index = () => {
 };
 
 
+const Wrapper = () => {
+	useKeybindHandler();
+	useInvalidateQuery();
+
+	return <Outlet/>
+}
+
 // NOTE: all route `Layout`s below should contain
 // the `usePlausiblePageViewMonitor` hook, as early as possible (ideally within the layout itself).
 // the hook should only be included if there's a valid `ClientContext` (so not onboarding)
 
-const routes = [
+export const routes = [{
+	element: <Wrapper/>,
+	children: [
 	{
 		index: true,
 		element: <Index />
 	},
 	{
 		path: 'onboarding',
-		element: lazyEl(() => import('./onboarding/Layout')),
+		lazy: () => import('./onboarding/Layout'),
 		children: onboardingRoutes
 	},
 	{
 		path: ':libraryId',
-		element: lazyEl(() => import('./$libraryId/Layout')),
-		children: libraryRoutes
-	}
-] satisfies RouteObject[];
-
-export default () => {
-	useKeybindHandler();
-	useInvalidateQuery();
-
-	return useRoutes(routes);
-};
+		lazy: () => import('./$libraryId/Layout'),
+		children: libraryRoutes,
+	}]
+}] satisfies RouteObject[];

interface/app/onboarding/Layout.tsx

@@ -14,7 +14,7 @@ export const OnboardingTitle = tw.h2`mb-2 text-3xl font-bold`;
 export const OnboardingDescription = tw.p`max-w-xl text-center text-ink-dull`;
 export const OnboardingImg = tw.img`w-20 h-20 mb-2`;
 
-export default () => {
+export const Component = () => {
 	const os = useOperatingSystem();
 	const debugState = useDebugState();
 	const navigate = useNavigate();

interface/index.tsx

@@ -7,15 +7,15 @@ import advancedFormat from 'dayjs/plugin/advancedFormat';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { ErrorBoundary } from 'react-error-boundary';
-import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+import { RouterProvider, RouterProviderProps } from 'react-router-dom';
 import { useDebugState } from '@sd/client';
 import { Dialogs } from '@sd/ui';
 import ErrorFallback from './ErrorFallback';
-import App from './app';
 
 export * from './util/keybind';
 export * from './util/Platform';
 export { ErrorPage } from './ErrorFallback';
+export * from './app';
 
 dayjs.extend(advancedFormat);
 dayjs.extend(relativeTime);
@@ -44,15 +44,11 @@ const Devtools = () => {
 	) : null;
 };
 
-export const SpacedriveInterface = ({ router }: { router: 'memory' | 'browser' }) => {
-	const Router = router === 'memory' ? MemoryRouter : BrowserRouter;
-
+export const SpacedriveInterface = (props: { router: RouterProviderProps['router'] }) => {
 	return (
 		<ErrorBoundary FallbackComponent={ErrorFallback}>
 			<Devtools />
-			<Router>
-				<App />
-			</Router>
+			<RouterProvider router={props.router} />
 			<Dialogs />
 		</ErrorBoundary>
 	);

interface/package.json

@@ -19,11 +19,11 @@
 		"@fontsource/inter": "^4.5.13",
 		"@headlessui/react": "^1.7.3",
 		"@hookform/resolvers": "^2.9.10",
-		"@loadable/component": "^5.15.2",
 		"@radix-ui/react-progress": "^1.0.1",
 		"@radix-ui/react-slider": "^1.1.0",
 		"@radix-ui/react-toast": "^1.1.2",
 		"@radix-ui/react-tooltip": "^1.0.2",
+		"@remix-run/router": "^1.4.0",
 		"@sd/assets": "workspace:*",
 		"@sd/client": "workspace:*",
 		"@sd/ui": "workspace:*",
@@ -52,8 +52,8 @@
 		"react-json-view": "^1.21.3",
 		"react-loading-skeleton": "^3.1.0",
 		"react-qr-code": "^2.0.11",
-		"react-router": "6.4.2",
-		"react-router-dom": "6.4.2",
+		"react-router": "6.9.0",
+		"react-router-dom": "6.9.0",
 		"rooks": "^5.14.0",
 		"tailwindcss": "^3.1.8",
 		"use-count-up": "^3.0.1",

interface/util/index.tsx

@@ -1,7 +0,0 @@
-import { lazy } from '@loadable/component';
-import { ReactNode } from 'react';
-
-export function lazyEl(fn: Parameters<typeof lazy>[0]): ReactNode {
-	const Element = lazy(fn);
-	return <Element />;
-}

packages/ui/package.json

@@ -26,8 +26,8 @@
 		"@radix-ui/react-context-menu": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-dropdown-menu": "^1.0.0",
-		"@radix-ui/react-radio-group": "^1.1.0",
 		"@radix-ui/react-popover": "^1.0.3",
+		"@radix-ui/react-radio-group": "^1.1.0",
 		"@radix-ui/react-select": "^1.1.2",
 		"@radix-ui/react-switch": "^1.0.1",
 		"@radix-ui/react-tabs": "^1.0.1",
@@ -40,7 +40,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-loading-icons": "^1.1.0",
-		"react-router-dom": "6.4.2",
+		"react-router-dom": "6.9.0",
 		"react-spring": "^9.5.5",
 		"tailwindcss-radix": "^2.6.0"
 	},