diff --git a/apps/desktop/index.html b/apps/desktop/index.html index b1c4c4ed..39bb9c2f 100644 --- a/apps/desktop/index.html +++ b/apps/desktop/index.html @@ -5,7 +5,7 @@ Lume
diff --git a/apps/desktop/src/app.tsx b/apps/desktop/src/app.tsx index baf2d279..ad5e2c88 100644 --- a/apps/desktop/src/app.tsx +++ b/apps/desktop/src/app.tsx @@ -1,270 +1,23 @@ -import { useStorage } from "@lume/ark"; -import { LoaderIcon } from "@lume/icons"; -import { AppLayout, AuthLayout, HomeLayout, SettingsLayout } from "@lume/ui"; -import { fetch } from "@tauri-apps/plugin-http"; -import { - RouterProvider, - createBrowserRouter, - defer, - redirect, -} from "react-router-dom"; -import { ErrorScreen } from "./routes/error"; +import { LumeProvider } from "@lume/ark"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { Toaster } from "sonner"; +import Router from "./router"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds + }, + }, +}); export default function App() { - const storage = useStorage(); - - const router = createBrowserRouter([ - { - element: , - children: [ - { - path: "/", - element: , - errorElement: , - loader: async () => { - if (!storage.account) return redirect("auth/welcome"); - return null; - }, - children: [ - { - index: true, - async lazy() { - const { HomeScreen } = await import("./routes/home"); - return { Component: HomeScreen }; - }, - }, - { - path: "nwc", - async lazy() { - const { NWCScreen } = await import("./routes/nwc"); - return { Component: NWCScreen }; - }, - }, - { - path: "relays", - async lazy() { - const { RelaysScreen } = await import("./routes/relays"); - return { Component: RelaysScreen }; - }, - }, - { - path: "relays/:url", - loader: async ({ params }) => { - return defer({ - relay: fetch(`https://${params.url}`, { - method: "GET", - headers: { - Accept: "application/nostr+json", - }, - }).then((res) => res.json()), - }); - }, - async lazy() { - const { RelayScreen } = await import("./routes/relays/relay"); - return { Component: RelayScreen }; - }, - }, - { - path: "settings", - element: , - children: [ - { - index: true, - async lazy() { - const { UserSettingScreen } = await import( - "./routes/settings" - ); - return { Component: UserSettingScreen }; - }, - }, - { - path: "edit-profile", - async lazy() { - const { EditProfileScreen } = await import( - "./routes/settings/editProfile" - ); - return { Component: EditProfileScreen }; - }, - }, - { - path: "edit-contact", - async lazy() { - const { EditContactScreen } = await import( - "./routes/settings/editContact" - ); - return { Component: EditContactScreen }; - }, - }, - { - path: "general", - async lazy() { - const { GeneralSettingScreen } = await import( - "./routes/settings/general" - ); - return { Component: GeneralSettingScreen }; - }, - }, - { - path: "backup", - async lazy() { - const { BackupSettingScreen } = await import( - "./routes/settings/backup" - ); - return { Component: BackupSettingScreen }; - }, - }, - { - path: "advanced", - async lazy() { - const { AdvancedSettingScreen } = await import( - "./routes/settings/advanced" - ); - return { Component: AdvancedSettingScreen }; - }, - }, - { - path: "about", - async lazy() { - const { AboutScreen } = await import( - "./routes/settings/about" - ); - return { Component: AboutScreen }; - }, - }, - ], - }, - ], - }, - { - path: "depot", - children: [ - { - index: true, - loader: () => { - const depot = storage.checkDepot(); - if (!depot) return redirect("/depot/onboarding/"); - return null; - }, - async lazy() { - const { DepotScreen } = await import("./routes/depot"); - return { Component: DepotScreen }; - }, - }, - { - path: "onboarding", - async lazy() { - const { DepotOnboardingScreen } = await import( - "./routes/depot/onboarding" - ); - return { Component: DepotOnboardingScreen }; - }, - }, - ], - }, - ], - }, - { - path: "auth", - element: , - errorElement: , - children: [ - { - path: "welcome", - async lazy() { - const { WelcomeScreen } = await import("./routes/auth/welcome"); - return { Component: WelcomeScreen }; - }, - }, - { - path: "create", - async lazy() { - const { CreateAccountScreen } = await import( - "./routes/auth/create" - ); - return { Component: CreateAccountScreen }; - }, - }, - { - path: "import", - async lazy() { - const { ImportAccountScreen } = await import( - "./routes/auth/import" - ); - return { Component: ImportAccountScreen }; - }, - }, - { - path: "onboarding", - async lazy() { - const { OnboardingScreen } = await import( - "./routes/auth/onboarding" - ); - return { Component: OnboardingScreen }; - }, - }, - { - path: "follow", - async lazy() { - const { FollowScreen } = await import("./routes/auth/follow"); - return { Component: FollowScreen }; - }, - }, - { - path: "finish", - async lazy() { - const { FinishScreen } = await import("./routes/auth/finish"); - return { Component: FinishScreen }; - }, - }, - { - path: "tutorials/note", - async lazy() { - const { TutorialNoteScreen } = await import( - "./routes/auth/tutorials/note" - ); - return { Component: TutorialNoteScreen }; - }, - }, - { - path: "tutorials/widget", - async lazy() { - const { TutorialWidgetScreen } = await import( - "./routes/auth/tutorials/widget" - ); - return { Component: TutorialWidgetScreen }; - }, - }, - { - path: "tutorials/posting", - async lazy() { - const { TutorialPostingScreen } = await import( - "./routes/auth/tutorials/posting" - ); - return { Component: TutorialPostingScreen }; - }, - }, - { - path: "tutorials/finish", - async lazy() { - const { TutorialFinishScreen } = await import( - "./routes/auth/tutorials/finish" - ); - return { Component: TutorialFinishScreen }; - }, - }, - ], - }, - ]); - return ( - - - - } - future={{ v7_startTransition: true }} - /> + + + + + + ); } diff --git a/apps/desktop/src/main.jsx b/apps/desktop/src/main.jsx index 16384eb9..01e6aed0 100644 --- a/apps/desktop/src/main.jsx +++ b/apps/desktop/src/main.jsx @@ -1,26 +1,8 @@ -import { LumeProvider } from '@lume/ark'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { createRoot } from 'react-dom/client'; -import { Toaster } from 'sonner'; -import App from './app'; -import './app.css'; +import { createRoot } from "react-dom/client"; +import App from "./app"; +import "./app.css"; -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000), // 10 seconds - }, - }, -}); - -const container = document.getElementById('root'); +const container = document.getElementById("root"); const root = createRoot(container); -root.render( - - - - - - -); +root.render(); diff --git a/apps/desktop/src/router.tsx b/apps/desktop/src/router.tsx new file mode 100644 index 00000000..4a0662f8 --- /dev/null +++ b/apps/desktop/src/router.tsx @@ -0,0 +1,272 @@ +import { useArk, useStorage } from "@lume/ark"; +import { LoaderIcon } from "@lume/icons"; +import { AppLayout, AuthLayout, HomeLayout, SettingsLayout } from "@lume/ui"; +import { NDKKind } from "@nostr-dev-kit/ndk"; +import { fetch } from "@tauri-apps/plugin-http"; +import { + RouterProvider, + createBrowserRouter, + defer, + redirect, +} from "react-router-dom"; +import { ErrorScreen } from "./routes/error"; + +export default function Router() { + const ark = useArk(); + const storage = useStorage(); + + const router = createBrowserRouter([ + { + element: , + children: [ + { + path: "/", + element: , + errorElement: , + loader: async () => { + if (!storage.account) return redirect("auth/welcome"); + return null; + }, + children: [ + { + index: true, + async lazy() { + const { HomeScreen } = await import("./routes/home"); + return { Component: HomeScreen }; + }, + }, + { + path: "nwc", + async lazy() { + const { NWCScreen } = await import("./routes/nwc"); + return { Component: NWCScreen }; + }, + }, + { + path: "relays", + async lazy() { + const { RelaysScreen } = await import("./routes/relays"); + return { Component: RelaysScreen }; + }, + }, + { + path: "relays/:url", + loader: async ({ params }) => { + return defer({ + relay: fetch(`https://${params.url}`, { + method: "GET", + headers: { + Accept: "application/nostr+json", + }, + }).then((res) => res.json()), + }); + }, + async lazy() { + const { RelayScreen } = await import("./routes/relays/relay"); + return { Component: RelayScreen }; + }, + }, + { + path: "settings", + element: , + children: [ + { + index: true, + async lazy() { + const { UserSettingScreen } = await import( + "./routes/settings" + ); + return { Component: UserSettingScreen }; + }, + }, + { + path: "edit-profile", + async lazy() { + const { EditProfileScreen } = await import( + "./routes/settings/editProfile" + ); + return { Component: EditProfileScreen }; + }, + }, + { + path: "edit-contact", + async lazy() { + const { EditContactScreen } = await import( + "./routes/settings/editContact" + ); + return { Component: EditContactScreen }; + }, + }, + { + path: "general", + async lazy() { + const { GeneralSettingScreen } = await import( + "./routes/settings/general" + ); + return { Component: GeneralSettingScreen }; + }, + }, + { + path: "backup", + async lazy() { + const { BackupSettingScreen } = await import( + "./routes/settings/backup" + ); + return { Component: BackupSettingScreen }; + }, + }, + { + path: "advanced", + async lazy() { + const { AdvancedSettingScreen } = await import( + "./routes/settings/advanced" + ); + return { Component: AdvancedSettingScreen }; + }, + }, + { + path: "about", + async lazy() { + const { AboutScreen } = await import( + "./routes/settings/about" + ); + return { Component: AboutScreen }; + }, + }, + ], + }, + ], + }, + { + path: "depot", + children: [ + { + index: true, + loader: () => { + const depot = storage.checkDepot(); + if (!depot) return redirect("/depot/onboarding/"); + return null; + }, + async lazy() { + const { DepotScreen } = await import("./routes/depot"); + return { Component: DepotScreen }; + }, + }, + { + path: "onboarding", + async lazy() { + const { DepotOnboardingScreen } = await import( + "./routes/depot/onboarding" + ); + return { Component: DepotOnboardingScreen }; + }, + }, + ], + }, + ], + }, + { + path: "auth", + element: , + errorElement: , + children: [ + { + path: "welcome", + async lazy() { + const { WelcomeScreen } = await import("./routes/auth/welcome"); + return { Component: WelcomeScreen }; + }, + }, + { + path: "create", + async lazy() { + const { CreateAccountScreen } = await import( + "./routes/auth/create" + ); + return { Component: CreateAccountScreen }; + }, + }, + { + path: "import", + async lazy() { + const { ImportAccountScreen } = await import( + "./routes/auth/import" + ); + return { Component: ImportAccountScreen }; + }, + }, + { + path: "onboarding", + async lazy() { + const { OnboardingScreen } = await import( + "./routes/auth/onboarding" + ); + return { Component: OnboardingScreen }; + }, + }, + { + path: "follow", + async lazy() { + const { FollowScreen } = await import("./routes/auth/follow"); + return { Component: FollowScreen }; + }, + }, + { + path: "finish", + async lazy() { + const { FinishScreen } = await import("./routes/auth/finish"); + return { Component: FinishScreen }; + }, + }, + { + path: "tutorials/note", + async lazy() { + const { TutorialNoteScreen } = await import( + "./routes/auth/tutorials/note" + ); + return { Component: TutorialNoteScreen }; + }, + }, + { + path: "tutorials/widget", + async lazy() { + const { TutorialWidgetScreen } = await import( + "./routes/auth/tutorials/widget" + ); + return { Component: TutorialWidgetScreen }; + }, + }, + { + path: "tutorials/posting", + async lazy() { + const { TutorialPostingScreen } = await import( + "./routes/auth/tutorials/posting" + ); + return { Component: TutorialPostingScreen }; + }, + }, + { + path: "tutorials/finish", + async lazy() { + const { TutorialFinishScreen } = await import( + "./routes/auth/tutorials/finish" + ); + return { Component: TutorialFinishScreen }; + }, + }, + ], + }, + ]); + + return ( + + + + } + future={{ v7_startTransition: true }} + /> + ); +}