wip: refactor

apps/desktop2/src/app.tsx

@@ -1,5 +1,6 @@
-import { ArkProvider } from "@lume/ark";
 import { StorageProvider } from "@lume/storage";
+import { useArk } from "@lume/ark";
+import { ArkProvider } from "./ark";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import React, { StrictMode } from "react";
@@ -12,34 +13,50 @@ import i18n from "./locale";
 import { routeTree } from "./router.gen";
 
 const queryClient = new QueryClient();
+
+// Set up a Router instance
 const router = createRouter({
-	routeTree,
-	context: {
-		queryClient,
-	},
+  routeTree,
+  context: {
+    ark: undefined!,
+    queryClient,
+  },
 });
 
+// Register things for typesafety
 declare module "@tanstack/react-router" {
-	interface Register {
-		router: typeof router;
-	}
+  interface Register {
+    router: typeof router;
+  }
 }
 
-// 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"}>
-			<QueryClientProvider client={queryClient}>
-				<StorageProvider>
-					<ArkProvider>
-						<StrictMode>
-							<RouterProvider router={router} />
-						</StrictMode>
-					</ArkProvider>
-				</StorageProvider>
-			</QueryClientProvider>
-		</I18nextProvider>,
-	);
+function InnerApp() {
+  const ark = useArk();
+  return <RouterProvider router={router} context={{ ark }} />;
+}
+
+function App() {
+  return (
+    <ArkProvider>
+      <InnerApp />
+    </ArkProvider>
+  );
+}
+
+// biome-ignore lint/style/noNonNullAssertion: idk
+const rootElement = document.getElementById("root")!;
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <I18nextProvider i18n={i18n} defaultNS={"translation"}>
+      <QueryClientProvider client={queryClient}>
+        <StorageProvider>
+          <StrictMode>
+            <App />
+          </StrictMode>
+        </StorageProvider>
+      </QueryClientProvider>
+    </I18nextProvider>,
+  );
 }

apps/desktop2/src/ark.tsx

@@ -0,0 +1,7 @@
+import { Ark, ArkContext } from "@lume/ark";
+import { PropsWithChildren, useMemo } from "react";
+
+export const ArkProvider = ({ children }: PropsWithChildren<object>) => {
+  const ark = useMemo(() => new Ark(), []);
+  return <ArkContext.Provider value={ark}>{children}</ArkContext.Provider>;
+};

apps/desktop2/src/routes/__root.tsx

@@ -1,25 +1,32 @@
 import { LoaderIcon } from "@lume/icons";
 import {
-	Outlet,
-	ScrollRestoration,
-	createRootRoute,
+  Outlet,
+  ScrollRestoration,
+  createRootRouteWithContext,
 } from "@tanstack/react-router";
+import { type Ark } from "@lume/ark";
+import { type QueryClient } from "@tanstack/react-query";
 
-export const Route = createRootRoute({
-	component: () => (
-		<>
-			<ScrollRestoration />
-			<Outlet />
-		</>
-	),
-	pendingComponent: Pending,
-	wrapInSuspense: true,
+interface RouterContext {
+  ark: Ark;
+  queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  component: () => (
+    <>
+      <ScrollRestoration />
+      <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>
-	);
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center">
+      <LoaderIcon className="size-5 animate-spin" />
+    </div>
+  );
 }

apps/desktop2/src/routes/index.tsx

@@ -1,19 +1,19 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
 
 export const Route = createFileRoute("/")({
-	beforeLoad: async ({ location }) => {
-		const signer = await invoke("verify_signer");
-		if (!signer) {
-			throw redirect({
-				to: "/landing",
-				search: {
-					redirect: location.href,
-				},
-			});
-		}
-		throw redirect({
-			to: "/app/space",
-		});
-	},
+  beforeLoad: async ({ location, context }) => {
+    const ark = context.ark;
+    const signer = await ark.verify_signer();
+    if (!signer) {
+      throw redirect({
+        to: "/landing",
+        search: {
+          redirect: location.href,
+        },
+      });
+    }
+    throw redirect({
+      to: "/app/space",
+    });
+  },
 });

apps/desktop2/src/routes/landing/index.tsx

@@ -3,57 +3,57 @@ import { Link, createFileRoute } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 
 export const Route = createFileRoute("/landing/")({
-	component: Screen,
+  component: Screen,
 });
 
 function Screen() {
-	const storage = useStorage();
-	const { t } = useTranslation();
+  const storage = useStorage();
+  const { t } = useTranslation();
 
-	return (
-		<div className="flex w-screen h-screen bg-black">
-			<div className="flex flex-col items-center justify-between w-full h-full">
-				<div />
-				<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
-					<div className="flex flex-col items-center text-center">
-						<img
-							src={`/heading-${storage.locale}.png`}
-							srcSet={`/heading-${storage.locale}@2x.png 2x`}
-							alt="lume"
-							className="w-2/3"
-						/>
-						<p className="mt-5 text-lg font-medium leading-snug whitespace-pre-line text-neutral-700">
-							{t("welcome.title")}
-						</p>
-					</div>
-					<div className="flex flex-col w-full max-w-sm gap-2 mx-auto">
-						<Link
-							to="/auth/create"
-							className="inline-flex items-center justify-center w-full text-lg font-medium text-white bg-blue-500 h-11 rounded-xl hover:bg-blue-600"
-						>
-							{t("welcome.signup")}
-						</Link>
-						<Link
-							to="/auth/import"
-							className="inline-flex items-center justify-center w-full text-lg font-medium text-white h-11 rounded-xl bg-neutral-950 hover:bg-neutral-900"
-						>
-							{t("welcome.login")}
-						</Link>
-					</div>
-				</div>
-				<div className="flex items-center justify-center h-11">
-					<p className="text-neutral-800">
-						{t("welcome.footer")}{" "}
-						<Link
-							to="https://nostr.com"
-							target="_blank"
-							className="text-blue-500"
-						>
-							here
-						</Link>
-					</p>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="flex h-screen w-screen bg-black">
+      <div className="flex h-full w-full flex-col items-center justify-between">
+        <div />
+        <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
+          <div className="flex flex-col items-center text-center">
+            <img
+              src={`/heading-${storage.locale}.png`}
+              srcSet={`/heading-${storage.locale}@2x.png 2x`}
+              alt="lume"
+              className="w-2/3"
+            />
+            <p className="mt-5 whitespace-pre-line text-lg font-medium leading-snug text-neutral-700">
+              {t("welcome.title")}
+            </p>
+          </div>
+          <div className="mx-auto flex w-full max-w-sm flex-col gap-2">
+            <Link
+              to="/auth/create"
+              className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
+            >
+              {t("welcome.signup")}
+            </Link>
+            <Link
+              to="/auth/import"
+              className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
+            >
+              {t("welcome.login")}
+            </Link>
+          </div>
+        </div>
+        <div className="flex h-11 items-center justify-center">
+          <p className="text-neutral-800">
+            {t("welcome.footer")}{" "}
+            <Link
+              to="https://nostr.com"
+              target="_blank"
+              className="text-blue-500"
+            >
+              here
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
 }

apps/desktop2/src/routes/splash.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/splash")({
-  component: Screen,
-});
-
-function Screen() {
-  return <div>Loading..</div>;
-}