wip: multi accounts

apps/desktop2/src/routes/index.tsx

@@ -1,19 +1,72 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { useArk } from "@lume/ark";
+import { User } from "@lume/ui";
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
   beforeLoad: async ({ location, context }) => {
     const ark = context.ark;
-    const signer = await ark.verify_signer();
-    if (!signer) {
-      throw redirect({
-        to: "/landing",
-        search: {
-          redirect: location.href,
-        },
+    const accounts = await ark.get_all_accounts();
+
+    switch (accounts.length) {
+      // Empty account
+      case 0:
+        throw redirect({
+          to: "/landing",
+          search: {
+            redirect: location.href,
+          },
+        });
+      // Only 1 account, skip account selection screen
+      case 1:
+        const loadAccount = await ark.load_selected_account(accounts[0].npub);
+        if (loadAccount) {
+          throw redirect({
+            to: "/app/home",
+            search: {
+              redirect: location.href,
+            },
+          });
+        }
+      // Account selection
+      default:
+        return;
+    }
+  },
+  component: Screen,
+});
+
+function Screen() {
+  const ark = useArk();
+  const navigate = useNavigate();
+
+  const select = async (npub: string) => {
+    const loadAccount = await ark.load_selected_account(npub);
+    if (loadAccount) {
+      navigate({
+        to: "/app/home",
+        replace: true,
       });
     }
-    throw redirect({
-      to: "/app/space",
-    });
-  },
-});
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex items-center gap-6">
+        {ark.accounts.map((account) => (
+          <button
+            type="button"
+            key={account.npub}
+            onClick={() => select(account.npub)}
+          >
+            <User.Provider pubkey={account.npub}>
+              <User.Root className="flex h-36 w-32 flex-col items-center justify-center gap-4 rounded-xl p-2 hover:bg-neutral-100 dark:bg-neutral-900">
+                <User.Avatar className="size-20 rounded-full object-cover" />
+                <User.Name className="max-w-[5rem] truncate text-lg font-medium leading-tight" />
+              </User.Root>
+            </User.Provider>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/desktop2/src/routes/select.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/select')({
+  component: () => <div>Hello /select!</div>
+})