New profile

src/App.tsx

@@ -1,6 +1,7 @@
 import { useRef } from "react";
 import Enclave from "@/app/app";
 import ServerList from "./components/view/serverList";
+import { NewProfilePage } from "./components/view/NewProfileView";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -16,7 +17,12 @@ export default function App() {
 
   return (
     <main className="size-screen">
-      <ServerList appRef={appRef} />
+      {!appRef.current.accounts ||
+      appRef.current.accounts.accounts.length === 0 ? (
+        <NewProfilePage appRef={appRef} />
+      ) : (
+        <ServerList appRef={appRef} />
+      )}
     </main>
   );
 }

src/app/app.ts

@@ -11,6 +11,7 @@ import { sha512 } from "@noble/hashes/sha2.js";
 import { base58 } from "@scure/base";
 
 import axios from "axios";
+import { AccountsFile, getAccounts } from "@/lib/accounts";
 
 ed.hashes.sha512 = sha512;
 
@@ -30,6 +31,7 @@ ed.hashes.sha512 = sha512;
 export default class Enclave {
   private clientSecretKey: Uint8Array;
   private clientPublicKey: Uint8Array;
+  public accounts?: AccountsFile;
   public server?: EnclaveServer;
   public serverList: ServerList;
 
@@ -41,6 +43,7 @@ export default class Enclave {
 
   public async init() {
     this.serverList = await getServerList();
+    this.accounts = await getAccounts();
   }
 
   public async connectToServer(hostname: string, isSecure: boolean) {

src/components/view/NewProfileView.tsx

@@ -0,0 +1,89 @@
+import * as ed from "@noble/ed25519";
+import { base58 } from "@scure/base";
+
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { saveAccounts } from "@/lib/accounts";
+import Enclave from "@/app/app";
+
+export function NewProfilePage({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  const [displayName, setDisplayName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleCreate() {
+    const name = displayName.trim();
+    if (!name) {
+      setError("Display name is required");
+      return;
+    }
+
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      if (!appRef.current) {
+        console.error("AppRef is not initialized yet");
+        return;
+      }
+
+      if (!appRef.current.accounts) {
+        appRef.current.accounts = { activeAccount: 0, accounts: [] };
+      }
+
+      const { secretKey } = ed.keygen();
+
+      const newAccount = {
+        displayName: name,
+        privateKey: base58.encode(secretKey),
+      };
+
+      appRef.current.accounts.activeAccount =
+        appRef.current.accounts.accounts.length;
+
+      appRef.current.accounts.accounts.push(newAccount);
+
+      saveAccounts(appRef.current.accounts);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to create profile");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="space-y-2 text-center">
+          <h1 className="text-2xl font-semibold">Create your profile</h1>
+          <p className="text-sm text-muted-foreground">
+            Enclave generates a keypair for your identity — no email or password
+            required.
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="display-name">Display name</Label>
+          <Input
+            id="display-name"
+            placeholder="e.g. John Doe"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+          />
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+
+        <Button className="w-full" onClick={handleCreate} disabled={submitting}>
+          {submitting ? "Creating..." : "Create Profile"}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/lib/accounts.ts

@@ -0,0 +1,19 @@
+import { invoke } from "@tauri-apps/api/core";
+
+export interface Account {
+  displayName: string;
+  privateKey: string;
+}
+
+export interface AccountsFile {
+  activeAccount: number | null;
+  accounts: Account[];
+}
+
+export async function getAccounts(): Promise<AccountsFile> {
+  return await invoke("get_accounts");
+}
+
+export async function saveAccounts(data: AccountsFile): Promise<void> {
+  await invoke("save_accounts", { data });
+}