wip: migrate to desktop2

apps/desktop2/package.json

@@ -10,10 +10,15 @@
 	},
 	"dependencies": {
 		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
 		"@lume/storage": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@tanstack/react-query": "^5.18.1",
 		"@tanstack/react-router": "^1.16.0",
 		"i18next": "^23.8.2",
 		"i18next-resources-to-backend": "^1.2.0",
+		"jotai": "^2.6.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-i18next": "^14.0.2"

apps/desktop2/src/app.tsx

@@ -1,5 +1,6 @@
 import { ArkProvider } from "@lume/ark";
 import { StorageProvider } from "@lume/storage";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
@@ -10,30 +11,37 @@ import i18n from "./i18n";
 // Import the generated route tree
 import { routeTree } from "./tree.gen";
 
-// Create a new router instance
-const router = createRouter({ routeTree });
+const queryClient = new QueryClient();
+const router = createRouter({
+	routeTree,
+	context: {
+		queryClient,
+	},
+	defaultPreload: "intent",
+	defaultPreloadStaleTime: 0,
+});
 
-// Register the router instance for type safety
 declare module "@tanstack/react-router" {
 	interface Register {
 		router: typeof router;
 	}
 }
 
-// Render the app
 // biome-ignore lint/style/noNonNullAssertion: <explanation>
 const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
 		<I18nextProvider i18n={i18n} defaultNS={"translation"}>
-			<StorageProvider>
-				<ArkProvider>
-					<StrictMode>
-						<RouterProvider router={router} />
-					</StrictMode>
-				</ArkProvider>
-			</StorageProvider>
+			<QueryClientProvider client={queryClient}>
+				<StorageProvider>
+					<ArkProvider>
+						<StrictMode>
+							<RouterProvider router={router} />
+						</StrictMode>
+					</ArkProvider>
+				</StorageProvider>
+			</QueryClientProvider>
 		</I18nextProvider>,
 	);
 }

apps/desktop2/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { LoaderIcon } from "@lume/icons";
 import {
 	Outlet,
 	ScrollRestoration,
@@ -11,4 +12,14 @@ export const Route = createRootRoute({
 			<Outlet />
 		</>
 	),
+	pendingComponent: Pending,
+	wrapInSuspense: true,
 });
+
+function Pending() {
+	return (
+		<div className="flex flex-col items-center justify-center w-screen h-screen">
+			<LoaderIcon className="size-5 animate-spin" />
+		</div>
+	);
+}

apps/desktop2/src/routes/app.tsx

@@ -0,0 +1,20 @@
+import { Navigation } from "@lume/ui";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/app")({
+	component: App,
+});
+
+function App() {
+	return (
+		<div className="flex flex-col w-screen h-screen bg-gradient-to-tl from-gray-1 to-gray-2 dark:from-graydark-1 dark:to-graydark-2">
+			<div data-tauri-drag-region className="h-9 shrink-0" />
+			<div className="flex w-full h-full min-h-0">
+				<Navigation />
+				<div className="flex-1 h-full pb-2 pl-1 pr-2">
+					<Outlet />
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop2/src/routes/app/space.lazy.tsx

@@ -0,0 +1,13 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/app/space")({
+	component: Space,
+});
+
+function Space() {
+	return (
+		<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
+			<p>Hello</p>
+		</div>
+	);
+}

apps/desktop2/src/routes/index.tsx

@@ -2,7 +2,6 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 
 export const Route = createFileRoute("/")({
-	component: Index,
 	beforeLoad: async ({ location }) => {
 		const signer = await invoke("verify_signer");
 		if (!signer) {
@@ -13,13 +12,8 @@ export const Route = createFileRoute("/")({
 				},
 			});
 		}
+		throw redirect({
+			to: "/app/space",
+		});
 	},
 });
-
-function Index() {
-	return (
-		<div className="p-2">
-			<h3>Welcome Home!</h3>
-		</div>
-	);
-}

apps/desktop2/src/tree.gen.ts

@@ -13,6 +13,7 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as AppImport } from './routes/app'
 import { Route as IndexImport } from './routes/index'
 import { Route as LandingIndexImport } from './routes/landing/index'
 
@@ -20,9 +21,15 @@ import { Route as LandingIndexImport } from './routes/landing/index'
 
 const AuthImportLazyImport = createFileRoute('/auth/import')()
 const AuthCreateLazyImport = createFileRoute('/auth/create')()
+const AppSpaceLazyImport = createFileRoute('/app/space')()
 
 // Create/Update Routes
 
+const AppRoute = AppImport.update({
+  path: '/app',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
@@ -43,6 +50,11 @@ const AuthCreateLazyRoute = AuthCreateLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/auth/create.lazy').then((d) => d.Route))
 
+const AppSpaceLazyRoute = AppSpaceLazyImport.update({
+  path: '/space',
+  getParentRoute: () => AppRoute,
+} as any).lazy(() => import('./routes/app/space.lazy').then((d) => d.Route))
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -51,6 +63,14 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/app': {
+      preLoaderRoute: typeof AppImport
+      parentRoute: typeof rootRoute
+    }
+    '/app/space': {
+      preLoaderRoute: typeof AppSpaceLazyImport
+      parentRoute: typeof AppImport
+    }
     '/auth/create': {
       preLoaderRoute: typeof AuthCreateLazyImport
       parentRoute: typeof rootRoute
@@ -70,6 +90,7 @@ declare module '@tanstack/react-router' {
 
 export const routeTree = rootRoute.addChildren([
   IndexRoute,
+  AppRoute.addChildren([AppSpaceLazyRoute]),
   AuthCreateLazyRoute,
   AuthImportLazyRoute,
   LandingIndexRoute,