feat: finish settings screen

apps/desktop2/src/routes/__root.tsx

@@ -2,7 +2,7 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import { type Ark } from "@lume/ark";
 import { type QueryClient } from "@tanstack/react-query";
 import { type Platform } from "@tauri-apps/plugin-os";
-import type { Account, Interests, Settings } from "@lume/types";
+import type { Account, Interests, Metadata, Settings } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { type Descendant } from "slate";
 
@@ -21,6 +21,7 @@ interface RouterContext {
   interests?: Interests;
   accounts?: Account[];
   initialValue?: EditorElement[];
+  profile?: Metadata;
 }
 
 export const Route = createRootRouteWithContext<RouterContext>()({

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

@@ -82,7 +82,7 @@ function Screen() {
       setLoading(true);
 
       // publish settings
-      const eventId = await ark.set_settings(settings);
+      const eventId = await ark.set_settings(newSettings);
 
       if (eventId) {
         console.log("event_id: ", eventId);

apps/desktop2/src/routes/settings.tsx

@@ -97,9 +97,7 @@ function Screen() {
         </div>
       </div>
       <div className="w-full flex-1 overflow-y-auto px-5 py-4">
-        <div className="mx-auto w-full max-w-xl">
+        <Outlet />
-          <Outlet />
-        </div>
       </div>
     </div>
   );

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

@@ -30,15 +30,12 @@ function Screen() {
   const accounts = Route.useLoaderData();
 
   return (
-    <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+    <div className="mx-auto w-full max-w-xl">
-      {accounts.map((account, index) => (
+      <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
-        <div key={account.npub} className="flex items-start gap-6 py-3">
+        {accounts.map((account) => (
-          <div className="w-36 shrink-0 text-end font-medium">
-            Account {index}
-          </div>
           <Account account={account} />
-        </div>
+        ))}
-      ))}
+      </div>
     </div>
   );
 }
@@ -66,7 +63,7 @@ function Account({ account }: { account: Account }) {
   };
 
   return (
-    <div className="flex flex-1 flex-col gap-2">
+    <div className="flex flex-1 flex-col gap-2 py-3">
       <User.Provider pubkey={account.npub}>
         <User.Root className="flex items-center gap-2">
           <User.Avatar className="size-8 rounded-full object-cover" />
@@ -77,20 +74,29 @@ function Account({ account }: { account: Account }) {
         </User.Root>
       </User.Provider>
       <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2">
+        <div className="flex w-full flex-col gap-1">
-          <input
+          <label
-            readOnly
+            htmlFor="nsec"
-            type="text"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-            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"}
+            Private Key
-          </button>
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              readOnly
+              name="nsec"
+              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>
         <div className="flex w-full flex-col gap-1">
           <label

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

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

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

@@ -0,0 +1,159 @@
+import { Settings } from "@lume/types";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  isPermissionGranted,
+  requestPermission,
+} from "@tauri-apps/plugin-notification";
+import { useEffect, useState } from "react";
+import * as Switch from "@radix-ui/react-switch";
+import { useDebouncedCallback } from "use-debounce";
+
+export const Route = createFileRoute("/settings/general")({
+  beforeLoad: async ({ context }) => {
+    const permissionGranted = await isPermissionGranted(); // get notification permission
+    const ark = context.ark;
+    const settings = await ark.get_settings();
+
+    return {
+      settings: { ...settings, notification: permissionGranted },
+    };
+  },
+  component: Screen,
+});
+
+function Screen() {
+  const { ark, settings } = Route.useRouteContext();
+  const [newSettings, setNewSettings] = useState<Settings>(settings);
+
+  const toggleNofitication = async () => {
+    await requestPermission();
+    setNewSettings((prev) => ({
+      ...prev,
+      notification: !newSettings.notification,
+    }));
+  };
+
+  const toggleAutoUpdate = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      autoUpdate: !newSettings.autoUpdate,
+    }));
+  };
+
+  const toggleEnhancedPrivacy = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      enhancedPrivacy: !newSettings.enhancedPrivacy,
+    }));
+  };
+
+  const toggleZap = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      zap: !newSettings.zap,
+    }));
+  };
+
+  const toggleNsfw = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      nsfw: !newSettings.nsfw,
+    }));
+  };
+
+  const updateSettings = useDebouncedCallback(() => {
+    ark.set_settings(newSettings);
+  }, 200);
+
+  useEffect(() => {
+    updateSettings();
+  }, [newSettings]);
+
+  return (
+    <div className="mx-auto w-full max-w-xl">
+      <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+        <div className="flex flex-col">
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.notification}
+              onClick={() => toggleNofitication()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Push Notification</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Enabling push notifications will allow you to receive
+                notifications from Lume.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.enhancedPrivacy}
+              onClick={() => toggleEnhancedPrivacy()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Enhanced Privacy</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Lume will display external resources like image, video or link
+                preview as plain text.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.autoUpdate}
+              onClick={() => toggleAutoUpdate()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Auto Update</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Automatically download and install new version.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.zap}
+              onClick={() => toggleZap()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Zap</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Show the Zap button in each note and user's profile screen, use
+                for send Bitcoin tip to other users.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.nsfw}
+              onClick={() => toggleNsfw()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Filter sensitive content</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                By default, Lume will display all content which have Content
+                Warning tag, it's may include NSFW content.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,186 @@
+import { AvatarUploader } from "@/components/avatarUploader";
+import { PlusIcon } from "@lume/icons";
+import { Metadata } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/settings/user")({
+  beforeLoad: async ({ context }) => {
+    const ark = context.ark;
+    const profile = await ark.get_current_user_profile();
+    return { profile };
+  },
+  component: Screen,
+});
+
+function Screen() {
+  const { ark, profile } = Route.useRouteContext();
+  const { register, handleSubmit } = useForm();
+
+  const [loading, setLoading] = useState(false);
+  const [picture, setPicture] = useState<string>("");
+
+  const onSubmit = async (data: Metadata) => {
+    try {
+      setLoading(true);
+
+      const profile = { ...data };
+      await ark.create_profile(profile);
+
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      toast.error(String(e));
+    }
+  };
+
+  return (
+    <div className="flex w-full h-full">
+      <div className="flex-1 h-full flex items-center flex-col justify-center gap-3">
+        <div className="relative size-24 rounded-full bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
+          {profile.picture ? (
+            <img
+              src={profile.picture}
+              alt="avatar"
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 z-10 h-full w-full rounded-full object-cover"
+            />
+          ) : null}
+          <AvatarUploader
+            setPicture={setPicture}
+            className="absolute inset-0 z-20 flex h-full w-full items-center justify-center rounded-full bg-black/10 text-white hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+          >
+            <PlusIcon className="size-8" />
+          </AvatarUploader>
+        </div>
+        <div className="text-center flex flex-col items-center">
+          <div className="text-lg font-semibold">{profile.display_name}</div>
+          <div className="text-neutral-800 dark:text-neutral-200">
+            {profile.nip05}
+          </div>
+          <div className="mt-4">
+            <Link
+              to="/settings/backup"
+              className="px-5 h-9 border border-blue-300 text-sm font-medium hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 rounded-full bg-blue-100 text-blue-500 inline-flex items-center justify-center"
+            >
+              Backup Account
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 h-full">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-3 mb-0"
+        >
+          <div className="flex w-full flex-col gap-1">
+            <label
+              htmlFor="display_name"
+              className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Display Name
+            </label>
+            <input
+              name="display_name"
+              {...register("display_name", { required: true, minLength: 1 })}
+              value={profile.display_name}
+              spellCheck={false}
+              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"
+            />
+          </div>
+          <div className="flex w-full flex-col gap-1">
+            <label
+              htmlFor="name"
+              className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Name
+            </label>
+            <input
+              name="name"
+              {...register("name")}
+              spellCheck={false}
+              value={profile.name}
+              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"
+            />
+          </div>
+          <div className="flex w-full flex-col gap-1">
+            <label
+              htmlFor="website"
+              className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Website
+            </label>
+            <input
+              name="website"
+              type="url"
+              {...register("website")}
+              spellCheck={false}
+              value={profile.website}
+              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"
+            />
+          </div>
+          <div className="flex w-full flex-col gap-1">
+            <label
+              htmlFor="banner"
+              className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Cover
+            </label>
+            <input
+              name="banner"
+              type="url"
+              {...register("banner")}
+              spellCheck={false}
+              value={profile.banner}
+              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"
+            />
+          </div>
+          <div className="flex w-full flex-col gap-1">
+            <label
+              htmlFor="nip05"
+              className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              NIP-05
+            </label>
+            <input
+              name="nip05"
+              type="email"
+              {...register("nip05")}
+              spellCheck={false}
+              value={profile.nip05}
+              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"
+            />
+          </div>
+          <div className="flex w-full flex-col gap-1">
+            <label
+              htmlFor="lnaddress"
+              className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Lightning Address
+            </label>
+            <input
+              name="lnaddress"
+              type="email"
+              {...register("lud16")}
+              value={profile.lud16}
+              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"
+            />
+          </div>
+          <div className="flex items-center justify-end">
+            <button
+              type="submit"
+              className="inline-flex h-9 w-32 px-2 items-center justify-center rounded-lg bg-blue-500 font-medium text-sm text-white hover:bg-blue-600 disabled:opacity-50"
+            >
+              {loading ? <Spinner className="size-4" /> : "Update Profile"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -9,10 +9,12 @@ export const Route = createLazyFileRoute("/settings/zap")({
 
 function Screen() {
   return (
-    <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+    <div className="mx-auto w-full max-w-xl">
-      <div className="flex flex-col gap-6 py-3">
+      <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
-        <Connection />
+        <div className="flex flex-col gap-6 py-3">
-        <DefaultAmount />
+          <Connection />
+          <DefaultAmount />
+        </div>
       </div>
     </div>
   );
@@ -31,7 +33,9 @@ function Connection() {
 
   return (
     <div className="flex items-start gap-6">
-      <div className="w-36 shrink-0 text-end font-medium">Connection</div>
+      <div className="w-36 shrink-0 text-end font-medium text-sm">
+        Connection
+      </div>
       <div className="flex-1">
         <div className="flex w-full flex-col gap-1">
           <label
@@ -66,7 +70,9 @@ function Connection() {
 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="w-36 shrink-0 text-end font-medium text-sm">
+        Default amount
+      </div>
       <div className="flex-1">
         <div className="flex w-full flex-col gap-1">
           <label

packages/ark/src/ark.ts

@@ -415,6 +415,15 @@ export class Ark {
 		}
 	}
 
+	public async get_current_user_profile() {
+		try {
+			const cmd: Metadata = await invoke("get_current_user_profile");
+			return cmd;
+		} catch {
+			return null;
+		}
+	}
+
 	public async create_profile(profile: Metadata) {
 		try {
 			const event: string = await invoke("create_profile", {

src-tauri/src/main.rs

@@ -106,6 +106,7 @@ fn main() {
       nostr::keys::event_to_bech32,
       nostr::keys::user_to_bech32,
       nostr::keys::verify_nip05,
+      nostr::metadata::get_current_user_profile,
       nostr::metadata::get_profile,
       nostr::metadata::get_contact_list,
       nostr::metadata::get_contact_metadata,

src-tauri/src/nostr/metadata.rs

@@ -11,6 +11,35 @@ pub struct CacheContact {
   profile: Metadata,
 }
 
+#[tauri::command]
+pub async fn get_current_user_profile(state: State<'_, Nostr>) -> Result<Metadata, String> {
+  let client = &state.client;
+  let signer = client.signer().await.unwrap();
+  let public_key = signer.public_key().await.unwrap();
+  let filter = Filter::new()
+    .author(public_key)
+    .kind(Kind::Metadata)
+    .limit(1);
+
+  match client
+    .get_events_of(vec![filter], Some(Duration::from_secs(10)))
+    .await
+  {
+    Ok(events) => {
+      if let Some(event) = events.first() {
+        if let Ok(metadata) = Metadata::from_json(&event.content) {
+          Ok(metadata)
+        } else {
+          Err("Parse metadata failed".into())
+        }
+      } else {
+        Err("Not found".into())
+      }
+    }
+    Err(_) => Err("Not found".into()),
+  }
+}
+
 #[tauri::command]
 pub async fn get_profile(id: &str, state: State<'_, Nostr>) -> Result<Metadata, String> {
   let client = &state.client;

src-tauri/src/tray.rs

@@ -81,26 +81,41 @@ pub fn create_tray<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
       println!("todo!")
     }
     "settings" => {
-      #[cfg(target_os = "macos")]
+      if let Some(window) = app.get_window("settings") {
-      let _ = WebviewWindowBuilder::new(
+        if window.is_visible().unwrap_or_default() {
-        app,
+          let _ = window.set_focus();
-        "settings",
+        } else {
-        WebviewUrl::App(PathBuf::from("settings/general")),
+          let _ = window.show();
-      )
+          let _ = window.set_focus();
-      .title("Editor")
+        };
-      .min_inner_size(600., 500.)
+      } else {
-      .inner_size(800., 500.)
+        #[cfg(target_os = "macos")]
-      .hidden_title(true)
+        let _ = WebviewWindowBuilder::new(
-      .title_bar_style(TitleBarStyle::Overlay)
+          app,
-      .build()
+          "settings",
-      .unwrap();
+          WebviewUrl::App(PathBuf::from("settings/general")),
-      #[cfg(not(target_os = "macos"))]
+        )
-      let _ = WebviewWindowBuilder::new(app, "editor-0", WebviewUrl::App(PathBuf::from("editor")))
+        .title("Settings")
-        .title("Editor")
+        .inner_size(800., 500.)
-        .min_inner_size(500., 400.)
+        .hidden_title(true)
-        .inner_size(600., 400.)
+        .title_bar_style(TitleBarStyle::Overlay)
+        .resizable(false)
+        .minimizable(false)
         .build()
         .unwrap();
+        #[cfg(not(target_os = "macos"))]
+        let _ = WebviewWindowBuilder::new(
+          app,
+          "settings",
+          WebviewUrl::App(PathBuf::from("settings/general")),
+        )
+        .title("Settings")
+        .inner_size(800., 500.)
+        .resizable(false)
+        .minimizable(false)
+        .build()
+        .unwrap();
+      }
     }
     "quit" => {
       app.exit(0);