feat: settings screens

apps/desktop2/src/routes/settings/backup.tsx

@@ -0,0 +1,122 @@
+import { type Account } from "@lume/types";
+import { User } from "@lume/ui";
+import { displayNsec } from "@lume/utils";
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/settings/backup")({
+  component: Screen,
+  loader: async ({ context }) => {
+    const ark = context.ark;
+    const npubs = await ark.get_all_accounts();
+
+    let accounts: Account[] = [];
+
+    for (const account of npubs) {
+      const nsec: string = await invoke("get_stored_nsec", {
+        npub: account.npub,
+      });
+      accounts.push({ ...account, nsec });
+    }
+
+    return accounts;
+  },
+});
+
+function Screen() {
+  const accounts = Route.useLoaderData();
+
+  return (
+    <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+      {accounts.map((account, index) => (
+        <div key={account.npub} className="flex items-start gap-6 py-3">
+          <div className="w-36 shrink-0 text-end font-medium">
+            Account {index}
+          </div>
+          <Account account={account} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Account({ account }: { account: Account }) {
+  const [key, setKey] = useState(account.nsec);
+  const [copied, setCopied] = useState(false);
+  const [passphase, setPassphase] = useState("");
+
+  const encrypt = async () => {
+    const encrypted: string = await invoke("get_encrypted_key", {
+      npub: account.npub,
+      password: passphase,
+    });
+    setKey(encrypted);
+  };
+
+  const copyKey = async () => {
+    try {
+      await writeText(key);
+      setCopied(true);
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="flex flex-1 flex-col gap-2">
+      <User.Provider pubkey={account.npub}>
+        <User.Root className="flex items-center gap-2">
+          <User.Avatar className="size-8 rounded-full object-cover" />
+          <div className="flex flex-col">
+            <User.Name className="text-sm leading-tight" />
+            <User.NIP05 className="text-sm leading-tight text-neutral-700 dark:text-neutral-300" />
+          </div>
+        </User.Root>
+      </User.Provider>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <input
+            readOnly
+            type="text"
+            value={displayNsec(key, 36)}
+            className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+          <button
+            type="button"
+            onClick={copyKey}
+            className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+          >
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+        <div className="flex w-full flex-col gap-1">
+          <label
+            htmlFor="passphase"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Set a passphase to secure your key
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              name="passphase"
+              type="password"
+              value={passphase}
+              onChange={(e) => setPassphase(e.target.value)}
+              className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+            <button
+              type="button"
+              onClick={encrypt}
+              className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+            >
+              Update
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop2/src/routes/settings/general.lazy.tsx

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

apps/desktop2/src/routes/settings/index.lazy.tsx

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

apps/desktop2/src/routes/settings/user.lazy.tsx

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

apps/desktop2/src/routes/settings/zap.lazy.tsx

@@ -0,0 +1,96 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createLazyFileRoute("/settings/zap")({
+  component: Screen,
+});
+
+function Screen() {
+  return (
+    <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+      <div className="flex flex-col gap-6 py-3">
+        <Connection />
+        <DefaultAmount />
+      </div>
+    </div>
+  );
+}
+
+function Connection() {
+  const [uri, setUri] = useState("");
+
+  const connect = async () => {
+    try {
+      await invoke("set_nwc", { uri });
+    } catch (e) {
+      toast.error(String(e));
+    }
+  };
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-36 shrink-0 text-end font-medium">Connection</div>
+      <div className="flex-1">
+        <div className="flex w-full flex-col gap-1">
+          <label
+            htmlFor="nwc"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Nostr Wallet Connect
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              name="nwc"
+              type="text"
+              value={uri}
+              onChange={(e) => setUri(e.target.value)}
+              placeholder="nostrconnect://"
+              className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+            <button
+              type="button"
+              onClick={connect}
+              className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+            >
+              Connect
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DefaultAmount() {
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-36 shrink-0 text-end font-medium">Default amount</div>
+      <div className="flex-1">
+        <div className="flex w-full flex-col gap-1">
+          <label
+            htmlFor="amount"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Set default amount for quick zapping
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              name="amount"
+              type="number"
+              value={21}
+              className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+            <button
+              type="button"
+              className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+            >
+              Update
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}