chore: upgrade to react 19 rc

biome.json

@@ -1,31 +1,31 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+	"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
-  "organizeImports": {
+	"organizeImports": {
-    "enabled": true
+		"enabled": true
-  },
+	},
-  "files": {
+	"files": {
-    "ignore": [
+		"ignore": [
-      "apps/desktop2/src/router.gen.ts",
+			"./src/routes.gen.ts",
-      "packages/system/src/commands.ts"
+			"./src/commands.gen.ts"
-    ]
+		]
-  },
+	},
-  "linter": {
+	"linter": {
-    "enabled": true,
+		"enabled": true,
-    "rules": {
+		"rules": {
-      "recommended": true,
+			"recommended": true,
-      "style": {
+			"style": {
-        "noNonNullAssertion": "warn",
+				"noNonNullAssertion": "warn",
-        "noUselessElse": "off"
+				"noUselessElse": "off"
-      },
+			},
-      "correctness": {
+			"correctness": {
-        "useExhaustiveDependencies": "off"
+				"useExhaustiveDependencies": "off"
-      },
+			},
-      "a11y": {
+			"a11y": {
-        "noSvgWithoutTitle": "off"
+				"noSvgWithoutTitle": "off"
-      },
+			},
-      "complexity": {
+			"complexity": {
-        "noStaticOnlyClass": "off"
+				"noStaticOnlyClass": "off"
-      }
+			}
-    }
+		}
-  }
+	}
 }

package.json

@@ -21,25 +21,6 @@
 		"@tanstack/query-persist-client-core": "^5.51.21",
 		"@tanstack/react-query": "^5.51.23",
 		"@tanstack/react-router": "^1.47.1",
-		"embla-carousel-react": "^8.1.8",
-		"i18next": "^23.12.2",
-		"i18next-resources-to-backend": "^1.2.1",
-		"minidenticons": "^4.2.1",
-		"nanoid": "^5.0.7",
-		"nostr-tools": "^2.7.2",
-		"react": "^18.3.1",
-		"react-currency-input-field": "^3.8.0",
-		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.52.2",
-		"react-i18next": "^15.0.1",
-		"react-string-replace": "^1.1.1",
-		"slate": "^0.103.0",
-		"slate-react": "^0.107.1",
-		"use-debounce": "^10.0.2",
-		"virtua": "^0.33.4",
-		"bitcoin-units": "^1.0.0",
-		"dayjs": "^1.11.12",
-		"light-bolt11-decoder": "^3.1.1",
 		"@tauri-apps/api": "2.0.0-rc.0",
 		"@tauri-apps/plugin-clipboard-manager": "2.0.0-rc.0",
 		"@tauri-apps/plugin-dialog": "2.0.0-rc.0",
@@ -50,29 +31,53 @@
 		"@tauri-apps/plugin-shell": "2.0.0-rc.0",
 		"@tauri-apps/plugin-updater": "2.0.0-rc.0",
 		"@tauri-apps/plugin-upload": "2.0.0-rc.0",
-		"@tauri-apps/plugin-window-state": "2.0.0-rc.0"
+		"@tauri-apps/plugin-window-state": "2.0.0-rc.0",
+		"bitcoin-units": "^1.0.0",
+		"dayjs": "^1.11.12",
+		"embla-carousel-react": "^8.1.8",
+		"i18next": "^23.12.2",
+		"i18next-resources-to-backend": "^1.2.1",
+		"light-bolt11-decoder": "^3.1.1",
+		"minidenticons": "^4.2.1",
+		"nanoid": "^5.0.7",
+		"nostr-tools": "^2.7.2",
+		"react": "19.0.0-rc-d025ddd3-20240722",
+		"react-dom": "19.0.0-rc-d025ddd3-20240722",
+		"react-currency-input-field": "^3.8.0",
+		"react-hook-form": "^7.52.2",
+		"react-i18next": "^15.0.1",
+		"react-string-replace": "^1.1.1",
+		"slate": "^0.103.0",
+		"slate-react": "^0.107.1",
+		"use-debounce": "^10.0.2",
+		"virtua": "^0.33.5"
 	},
 	"devDependencies": {
-		"clsx": "^2.1.1",
+		"@types/react": "npm:types-react@19.0.0-rc.1",
-		"tailwind-merge": "^2.4.0",
+		"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+		"babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625",
 		"@biomejs/biome": "^1.8.3",
-		"@tauri-apps/cli": "2.0.0-rc.1",
-		"@tanstack/router-devtools": "^1.47.1",
-		"@tanstack/router-vite-plugin": "^1.47.0",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
-		"@vitejs/plugin-react-swc": "^3.7.0",
-		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.41",
 		"@evilmartians/harmony": "^1.2.0",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.14",
+		"@tanstack/router-devtools": "^1.47.1",
+		"@tanstack/router-plugin": "^1.47.0",
+		"@tauri-apps/cli": "2.0.0-rc.1",
+		"@vitejs/plugin-react": "^4.3.1",
+		"autoprefixer": "^10.4.20",
+		"clsx": "^2.1.1",
+		"postcss": "^8.4.41",
 		"tailwind-gradient-mask-image": "^1.2.0",
+		"tailwind-merge": "^2.5.0",
 		"tailwind-scrollbar": "^3.1.0",
 		"tailwindcss": "^3.4.9",
 		"tailwindcss-content-visibility": "^0.2.0",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.0",
 		"vite-tsconfig-paths": "^5.0.1"
+	},
+	"overrides": {
+		"@types/react": "npm:types-react@rc",
+		"@types/react-dom": "npm:types-react-dom@rc"
 	}
 }

src-tauri/src/commands/tray.rs

@@ -36,8 +36,7 @@ pub fn create_tray_panel(account: &str, app: &AppHandle) {
         let _ = window.destroy();
     };
 
-    let mut url = "/panel/".to_owned();
+    let url = format!("/{}/panel", account);
-    url.push_str(account);
 
     let window = WebviewWindowBuilder::new(app, "panel", WebviewUrl::App(PathBuf::from(url)))
         .title("Panel")

src/routes.gen.ts

@@ -26,9 +26,9 @@ import { Route as CreateTopicImport } from './routes/create-topic'
 import { Route as CreateNewsfeedImport } from './routes/create-newsfeed'
 import { Route as CreateGroupImport } from './routes/create-group'
 import { Route as BootstrapRelaysImport } from './routes/bootstrap-relays'
-import { Route as AccountImport } from './routes/$account'
 import { Route as IndexImport } from './routes/index'
 import { Route as EditorIndexImport } from './routes/editor/index'
+import { Route as AccountIndexImport } from './routes/$account/index'
 import { Route as ZapIdImport } from './routes/zap.$id'
 import { Route as UsersPubkeyImport } from './routes/users/$pubkey'
 import { Route as TrendingUsersImport } from './routes/trending.users'
@@ -41,12 +41,12 @@ import { Route as SettingsBitcoinConnectImport } from './routes/settings/bitcoin
 import { Route as SettingsBackupImport } from './routes/settings/backup'
 import { Route as SearchUsersImport } from './routes/search.users'
 import { Route as SearchNotesImport } from './routes/search.notes'
-import { Route as PanelAccountImport } from './routes/panel.$account'
 import { Route as EventsIdImport } from './routes/events/$id'
 import { Route as CreateNewsfeedUsersImport } from './routes/create-newsfeed.users'
 import { Route as CreateNewsfeedF2fImport } from './routes/create-newsfeed.f2f'
 import { Route as AuthCreateProfileImport } from './routes/auth/create-profile'
-import { Route as AccountHomeImport } from './routes/$account.home'
+import { Route as AccountPanelImport } from './routes/$account/panel'
+import { Route as AccountHomeImport } from './routes/$account/home'
 import { Route as AuthAccountBackupImport } from './routes/auth/$account.backup'
 
 // Create Virtual Routes
@@ -133,11 +133,6 @@ const BootstrapRelaysRoute = BootstrapRelaysImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const AccountRoute = AccountImport.update({
-  path: '/$account',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
@@ -148,6 +143,13 @@ const EditorIndexRoute = EditorIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const AccountIndexRoute = AccountIndexImport.update({
+  path: '/$account/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/$account/index.lazy').then((d) => d.Route),
+)
+
 const AuthRemoteLazyRoute = AuthRemoteLazyImport.update({
   path: '/remote',
   getParentRoute: () => AuthLazyRoute,
@@ -218,11 +220,6 @@ const SearchNotesRoute = SearchNotesImport.update({
   getParentRoute: () => SearchRoute,
 } as any)
 
-const PanelAccountRoute = PanelAccountImport.update({
-  path: '/panel/$account',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const EventsIdRoute = EventsIdImport.update({
   path: '/events/$id',
   getParentRoute: () => rootRoute,
@@ -243,10 +240,17 @@ const AuthCreateProfileRoute = AuthCreateProfileImport.update({
   getParentRoute: () => AuthLazyRoute,
 } as any)
 
+const AccountPanelRoute = AccountPanelImport.update({
+  path: '/$account/panel',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/$account/panel.lazy').then((d) => d.Route),
+)
+
 const AccountHomeRoute = AccountHomeImport.update({
-  path: '/home',
+  path: '/$account/home',
-  getParentRoute: () => AccountRoute,
+  getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() => import('./routes/$account/home.lazy').then((d) => d.Route))
 
 const AuthAccountBackupRoute = AuthAccountBackupImport.update({
   path: '/$account/backup',
@@ -264,13 +268,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/$account': {
-      id: '/$account'
-      path: '/$account'
-      fullPath: '/$account'
-      preLoaderRoute: typeof AccountImport
-      parentRoute: typeof rootRoute
-    }
     '/bootstrap-relays': {
       id: '/bootstrap-relays'
       path: '/bootstrap-relays'
@@ -378,10 +375,17 @@ declare module '@tanstack/react-router' {
     }
     '/$account/home': {
       id: '/$account/home'
-      path: '/home'
+      path: '/$account/home'
       fullPath: '/$account/home'
       preLoaderRoute: typeof AccountHomeImport
-      parentRoute: typeof AccountImport
+      parentRoute: typeof rootRoute
+    }
+    '/$account/panel': {
+      id: '/$account/panel'
+      path: '/$account/panel'
+      fullPath: '/$account/panel'
+      preLoaderRoute: typeof AccountPanelImport
+      parentRoute: typeof rootRoute
     }
     '/auth/create-profile': {
       id: '/auth/create-profile'
@@ -411,13 +415,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof EventsIdImport
       parentRoute: typeof rootRoute
     }
-    '/panel/$account': {
-      id: '/panel/$account'
-      path: '/panel/$account'
-      fullPath: '/panel/$account'
-      preLoaderRoute: typeof PanelAccountImport
-      parentRoute: typeof rootRoute
-    }
     '/search/notes': {
       id: '/search/notes'
       path: '/notes'
@@ -516,6 +513,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthRemoteLazyImport
       parentRoute: typeof AuthLazyImport
     }
+    '/$account/': {
+      id: '/$account/'
+      path: '/$account'
+      fullPath: '/$account'
+      preLoaderRoute: typeof AccountIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/editor/': {
       id: '/editor/'
       path: '/editor'
@@ -537,7 +541,6 @@ declare module '@tanstack/react-router' {
 
 export const routeTree = rootRoute.addChildren({
   IndexRoute,
-  AccountRoute: AccountRoute.addChildren({ AccountHomeRoute }),
   BootstrapRelaysRoute,
   CreateGroupRoute,
   CreateNewsfeedRoute: CreateNewsfeedRoute.addChildren({
@@ -571,10 +574,12 @@ export const routeTree = rootRoute.addChildren({
     AuthAccountBackupRoute,
   }),
   LandingLazyRoute,
+  AccountHomeRoute,
+  AccountPanelRoute,
   EventsIdRoute,
-  PanelAccountRoute,
   UsersPubkeyRoute,
   ZapIdRoute,
+  AccountIndexRoute,
   EditorIndexRoute,
 })
 
@@ -587,7 +592,6 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/$account",
         "/bootstrap-relays",
         "/create-group",
         "/create-newsfeed",
@@ -603,22 +607,18 @@ export const routeTree = rootRoute.addChildren({
         "/trending",
         "/auth",
         "/landing",
+        "/$account/home",
+        "/$account/panel",
         "/events/$id",
-        "/panel/$account",
         "/users/$pubkey",
         "/zap/$id",
+        "/$account/",
         "/editor/"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/$account": {
-      "filePath": "$account.tsx",
-      "children": [
-        "/$account/home"
-      ]
-    },
     "/bootstrap-relays": {
       "filePath": "bootstrap-relays.tsx"
     },
@@ -691,8 +691,10 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "landing.lazy.tsx"
     },
     "/$account/home": {
-      "filePath": "$account.home.tsx",
+      "filePath": "$account/home.tsx"
-      "parent": "/$account"
+    },
+    "/$account/panel": {
+      "filePath": "$account/panel.tsx"
     },
     "/auth/create-profile": {
       "filePath": "auth/create-profile.tsx",
@@ -709,9 +711,6 @@ export const routeTree = rootRoute.addChildren({
     "/events/$id": {
       "filePath": "events/$id.tsx"
     },
-    "/panel/$account": {
-      "filePath": "panel.$account.tsx"
-    },
     "/search/notes": {
       "filePath": "search.notes.tsx",
       "parent": "/search"
@@ -766,6 +765,9 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "auth/remote.lazy.tsx",
       "parent": "/auth"
     },
+    "/$account/": {
+      "filePath": "$account/index.tsx"
+    },
     "/editor/": {
       "filePath": "editor/index.tsx"
     },

src/routes/$account/home.lazy.tsx

@@ -3,7 +3,7 @@ import { Column } from "@/components/column";
 import { Toolbar } from "@/components/toolbar";
 import { NostrQuery } from "@/system";
 import type { ColumnEvent, LumeColumn } from "@/types";
-import { createFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import useEmblaCarousel from "embla-carousel-react";
@@ -11,11 +11,7 @@ import { nanoid } from "nanoid";
 import { useCallback, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
-export const Route = createFileRoute("/$account/home")({
+export const Route = createLazyFileRoute("/$account/home")({
-	loader: async () => {
-		const columns = await NostrQuery.getColumns();
-		return columns;
-	},
 	component: Screen,
 });
 

src/routes/$account/home.tsx

@@ -0,0 +1,9 @@
+import { NostrQuery } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/home")({
+	loader: async () => {
+		const columns = await NostrQuery.getColumns();
+		return columns;
+	},
+});

src/routes/$account/index.lazy.tsx

@@ -6,23 +6,14 @@ import {
 	SearchIcon,
 } from "@/components";
 import { User } from "@/components/user";
-import { LumeWindow, NostrAccount, NostrQuery } from "@/system";
+import { LumeWindow, NostrAccount } from "@/system";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
 import { memo, useCallback, useState } from "react";
 
-export const Route = createFileRoute("/$account")({
+export const Route = createLazyFileRoute("/$account/")({
-	beforeLoad: async ({ params }) => {
-		const settings = await NostrQuery.getUserSettings();
-		const accounts = await NostrAccount.getAccounts();
-		const otherAccounts = accounts.filter(
-			(account) => account !== params.account,
-		);
-
-		return { otherAccounts, settings };
-	},
 	component: Screen,
 });
 

src/routes/$account/index.tsx

@@ -0,0 +1,14 @@
+import { NostrAccount, NostrQuery } from "@/system";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/")({
+	beforeLoad: async ({ params }) => {
+		const settings = await NostrQuery.getUserSettings();
+		const accounts = await NostrAccount.getAccounts();
+		const otherAccounts = accounts.filter(
+			(account) => account !== params.account,
+		);
+
+		return { otherAccounts, settings };
+	},
+});

src/routes/$account/panel.lazy.tsx

@@ -12,7 +12,7 @@ import { Kind } from "@/types";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
 import { invoke } from "@tauri-apps/api/core";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
@@ -20,10 +20,7 @@ import { open } from "@tauri-apps/plugin-shell";
 import { type ReactNode, useCallback, useEffect, useRef } from "react";
 import { Virtualizer } from "virtua";
 
-export const Route = createFileRoute("/panel/$account")({
+export const Route = createLazyFileRoute("/$account/panel")({
-	beforeLoad: async ({ context }) => {
-		console.log(context);
-	},
 	component: Screen,
 });
 
@@ -33,7 +30,6 @@ function Screen() {
 	const { isLoading, data } = useQuery({
 		queryKey: ["notification", account],
 		queryFn: async () => {
-			console.log(queryClient);
 			const events = await NostrQuery.getNotifications();
 			return events;
 		},
@@ -72,6 +68,7 @@ function Screen() {
 
 			return { texts, zaps, reactions };
 		},
+		refetchOnWindowFocus: false,
 	});
 
 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
@@ -125,7 +122,7 @@ function Screen() {
 		return () => {
 			unlisten.then((f) => f());
 		};
-	}, []);
+	}, [account]);
 
 	if (isLoading) {
 		return (

vite.config.ts

@@ -1,12 +1,24 @@
-import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
-import react from "@vitejs/plugin-react-swc";
+import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
-import viteTsconfigPaths from "vite-tsconfig-paths";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+const ReactCompilerConfig = {
+	/* ... */
+};
 
 export default defineConfig({
-	plugins: [react(), viteTsconfigPaths(), TanStackRouterVite()],
+	plugins: [
+		TanStackRouterVite(),
+		tsconfigPaths(),
+		react({
+			babel: {
+				plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
+			},
+		}),
+	],
 	build: {
-		outDir: "../../dist",
+		outDir: "./dist",
 	},
 	server: {
 		strictPort: true,