From 875225591a61ad73ecdaef0104d737ecf17c46be Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Wed, 15 Nov 2023 14:20:45 +0700
Subject: [PATCH] wip: settings screen

---
 src/app.tsx                                   |  74 ++--
 src/app/personal/editContact.tsx              |  55 ---
 src/app/personal/editProfile.tsx              | 323 ------------------
 src/app/personal/index.tsx                    |  26 --
 src/app/settings/about.tsx                    |   3 +
 src/app/settings/advanced.tsx                 |   3 +
 src/app/settings/backup.tsx                   |   3 +
 .../components/contactCard.tsx                |   2 +-
 .../components/postCard.tsx                   |   0
 .../components/profileCard.tsx                |   2 +-
 .../components/relayCard.tsx                  |   0
 .../components/zapCard.tsx                    |   0
 src/app/settings/editContact.tsx              |  41 +++
 src/app/settings/editProfile.tsx              | 303 ++++++++++++++++
 src/app/settings/general.tsx                  |   3 +
 src/app/settings/index.tsx                    |  20 +-
 src/shared/accounts/active.tsx                |   2 +-
 src/shared/accounts/more.tsx                  |  14 +-
 src/shared/layouts/settings.tsx               |  79 ++++-
 19 files changed, 500 insertions(+), 453 deletions(-)
 delete mode 100644 src/app/personal/editContact.tsx
 delete mode 100644 src/app/personal/editProfile.tsx
 delete mode 100644 src/app/personal/index.tsx
 create mode 100644 src/app/settings/about.tsx
 create mode 100644 src/app/settings/advanced.tsx
 create mode 100644 src/app/settings/backup.tsx
 rename src/app/{personal => settings}/components/contactCard.tsx (97%)
 rename src/app/{personal => settings}/components/postCard.tsx (100%)
 rename src/app/{personal => settings}/components/profileCard.tsx (98%)
 rename src/app/{personal => settings}/components/relayCard.tsx (100%)
 rename src/app/{personal => settings}/components/zapCard.tsx (100%)
 create mode 100644 src/app/settings/editContact.tsx
 create mode 100644 src/app/settings/editProfile.tsx
 create mode 100644 src/app/settings/general.tsx

diff --git a/src/app.tsx b/src/app.tsx
index bdc93bd4..2c4d295a 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -113,34 +113,6 @@ export default function App() {
         },
       ],
     },
-    {
-      path: '/personal',
-      element: <AppLayout />,
-      errorElement: <ErrorScreen />,
-      children: [
-        {
-          path: '',
-          async lazy() {
-            const { PersonalScreen } = await import('@app/personal');
-            return { Component: PersonalScreen };
-          },
-        },
-        {
-          path: 'edit-profile',
-          async lazy() {
-            const { EditProfileScreen } = await import('@app/personal/editProfile');
-            return { Component: EditProfileScreen };
-          },
-        },
-        {
-          path: 'edit-contact',
-          async lazy() {
-            const { EditContactScreen } = await import('@app/personal/editContact');
-            return { Component: EditContactScreen };
-          },
-        },
-      ],
-    },
     {
       path: '/new',
       element: <NewScreen />,
@@ -260,8 +232,50 @@ export default function App() {
         {
           path: '',
           async lazy() {
-            const { SettingsScreen } = await import('@app/settings');
-            return { Component: SettingsScreen };
+            const { UserSettingScreen } = await import('@app/settings');
+            return { Component: UserSettingScreen };
+          },
+        },
+        {
+          path: 'edit-profile',
+          async lazy() {
+            const { EditProfileScreen } = await import('@app/settings/editProfile');
+            return { Component: EditProfileScreen };
+          },
+        },
+        {
+          path: 'edit-contact',
+          async lazy() {
+            const { EditContactScreen } = await import('@app/settings/editContact');
+            return { Component: EditContactScreen };
+          },
+        },
+        {
+          path: 'general',
+          async lazy() {
+            const { GeneralSettingScreen } = await import('@app/settings/general');
+            return { Component: GeneralSettingScreen };
+          },
+        },
+        {
+          path: 'backup',
+          async lazy() {
+            const { BackupSettingScreen } = await import('@app/settings/backup');
+            return { Component: BackupSettingScreen };
+          },
+        },
+        {
+          path: 'advanced',
+          async lazy() {
+            const { AdvancedSettingScreen } = await import('@app/settings/advanced');
+            return { Component: AdvancedSettingScreen };
+          },
+        },
+        {
+          path: 'about',
+          async lazy() {
+            const { AboutScreen } = await import('@app/settings/about');
+            return { Component: AboutScreen };
           },
         },
       ],
diff --git a/src/app/personal/editContact.tsx b/src/app/personal/editContact.tsx
deleted file mode 100644
index 3cb871f1..00000000
--- a/src/app/personal/editContact.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-export function EditContactScreen() {
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-  const { status, data } = useQuery({
-    queryKey: ['contacts'],
-    queryFn: async () => {
-      const user = ndk.getUser({ pubkey: db.account.pubkey });
-
-      const follows = await user.follows();
-      return [...follows];
-    },
-    refetchOnWindowFocus: false,
-  });
-
-  return (
-    <div className="flex h-full w-full flex-col overflow-y-auto pb-10">
-      <div className="flex h-14 shrink-0 items-center justify-between px-3">
-        <Link
-          to="/personal"
-          className="inline-flex h-10 w-20 items-center justify-center gap-2 font-medium text-neutral-700 dark:text-neutral-300"
-        >
-          <ArrowLeftIcon className="h-4 w-4" />
-          Back
-        </Link>
-        <h1 className="font-semibold">Contact Manager</h1>
-        <div className="w-20" />
-      </div>
-      <div className="mx-auto flex  w-full max-w-xl flex-col gap-3">
-        {status === 'pending' ? (
-          <div className="flex h-10 w-full items-center justify-center">
-            <LoaderIcon className="h-4 w-4 animate-spin" />
-          </div>
-        ) : (
-          data.map((item) => (
-            <div
-              key={item.pubkey}
-              className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
-            >
-              <User pubkey={item.pubkey} variant="simple" />
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/personal/editProfile.tsx b/src/app/personal/editProfile.tsx
deleted file mode 100644
index 8d2d1a5d..00000000
--- a/src/app/personal/editProfile.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-import { NDKEvent, NDKKind, NDKUserProfile } from '@nostr-dev-kit/ndk';
-import { useQueryClient } from '@tanstack/react-query';
-import { message } from '@tauri-apps/plugin-dialog';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { Link } from 'react-router-dom';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import {
-  ArrowLeftIcon,
-  CheckCircleIcon,
-  LoaderIcon,
-  PlusIcon,
-  UnverifiedIcon,
-} from '@shared/icons';
-
-import { useNostr } from '@utils/hooks/useNostr';
-
-export function EditProfileScreen() {
-  const queryClient = useQueryClient();
-
-  const [loading, setLoading] = useState(false);
-  const [picture, setPicture] = useState('');
-  const [banner, setBanner] = useState('');
-  const [nip05, setNIP05] = useState({ verified: true, text: '' });
-
-  const { db } = useStorage();
-  const { ndk } = useNDK();
-  const { upload } = useNostr();
-  const {
-    register,
-    handleSubmit,
-    reset,
-    setError,
-    formState: { isValid, errors },
-  } = useForm({
-    defaultValues: async () => {
-      const res: NDKUserProfile = queryClient.getQueryData(['user', db.account.pubkey]);
-      if (res.image) {
-        setPicture(res.image);
-      }
-      if (res.banner) {
-        setBanner(res.banner);
-      }
-      if (res.nip05) {
-        setNIP05((prev) => ({ ...prev, text: res.nip05 }));
-      }
-      return res;
-    },
-  });
-
-  const uploadAvatar = async () => {
-    try {
-      setLoading(true);
-
-      const image = await upload();
-
-      if (image) {
-        setPicture(image);
-        setLoading(false);
-      }
-    } catch (e) {
-      setLoading(false);
-      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  const uploadBanner = async () => {
-    try {
-      setLoading(true);
-
-      const image = await upload();
-
-      if (image) {
-        setBanner(image);
-        setLoading(false);
-      }
-    } catch (e) {
-      setLoading(false);
-      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
-    }
-  };
-
-  const onSubmit = async (data: NDKUserProfile) => {
-    // start loading
-    setLoading(true);
-
-    const content = {
-      ...data,
-      username: data.name,
-      display_name: data.name,
-      bio: data.about,
-      image: data.picture,
-    };
-
-    const event = new NDKEvent(ndk);
-    event.kind = NDKKind.Metadata;
-    event.tags = [];
-
-    if (data.nip05) {
-      const user = ndk.getUser({ pubkey: db.account.pubkey });
-      const verify = await user.validateNip05(data.nip05);
-      if (verify) {
-        event.content = JSON.stringify({ ...content, nip05: data.nip05 });
-      } else {
-        setNIP05((prev) => ({ ...prev, verified: false }));
-        setError('nip05', {
-          type: 'manual',
-          message: "Can't verify your Lume ID / NIP-05, please check again",
-        });
-      }
-    } else {
-      event.content = JSON.stringify(content);
-    }
-
-    const publishedRelays = await event.publish();
-
-    if (publishedRelays) {
-      // invalid cache
-      queryClient.invalidateQueries({
-        queryKey: ['user', db.account.pubkey],
-      });
-      // reset form
-      reset();
-      // reset state
-      setLoading(false);
-      setPicture(null);
-      setBanner(null);
-    } else {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col overflow-y-auto">
-      <div className="flex h-14 shrink-0 items-center justify-between px-3">
-        <Link
-          to="/personal"
-          className="inline-flex h-10 w-20 items-center justify-center gap-2 font-medium text-neutral-700 dark:text-neutral-300"
-        >
-          <ArrowLeftIcon className="h-4 w-4" />
-          Back
-        </Link>
-        <h1 className="font-semibold">Edit Profile</h1>
-        <div className="w-20" />
-      </div>
-      <div className="mx-auto w-full max-w-md">
-        <form onSubmit={handleSubmit(onSubmit)} className="mb-0">
-          <input type={'hidden'} {...register('picture')} value={picture} />
-          <input type={'hidden'} {...register('banner')} value={banner} />
-          <div className="flex flex-col items-center justify-center">
-            <div className="relative h-36 w-full">
-              {banner ? (
-                <img
-                  src={banner}
-                  alt="user's banner"
-                  className="h-full w-full rounded-xl object-cover"
-                />
-              ) : (
-                <div className="h-full w-full rounded-xl bg-neutral-200 dark:bg-neutral-900" />
-              )}
-              <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-xl">
-                <button
-                  type="button"
-                  onClick={() => uploadBanner()}
-                  className="inline-flex h-full w-full items-center justify-center bg-black/20 text-white"
-                >
-                  <PlusIcon className="h-5 w-5" />
-                </button>
-              </div>
-            </div>
-            <div className="mb-5 px-4">
-              <div className="relative z-10 -mt-7 h-14 w-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
-                <img
-                  src={picture}
-                  alt="user's avatar"
-                  className="h-14 w-14 rounded-xl object-cover"
-                />
-                <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
-                  <button
-                    type="button"
-                    onClick={() => uploadAvatar()}
-                    className="inline-flex h-full w-full items-center justify-center rounded-xl bg-black/50 text-white"
-                  >
-                    <PlusIcon className="h-5 w-5" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="display_name"
-                className="text-sm font-semibold uppercase tracking-wider"
-              >
-                Display Name
-              </label>
-              <input
-                type={'text'}
-                {...register('display_name', {
-                  required: true,
-                  minLength: 4,
-                })}
-                spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
-              />
-            </div>
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="name"
-                className="text-sm font-semibold uppercase tracking-wider"
-              >
-                Name
-              </label>
-              <input
-                type={'text'}
-                {...register('name', {
-                  required: true,
-                  minLength: 4,
-                })}
-                spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
-              />
-            </div>
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="nip05"
-                className="text-sm font-semibold uppercase tracking-wider"
-              >
-                NIP-05
-              </label>
-              <div className="relative">
-                <input
-                  {...register('nip05', {
-                    required: true,
-                    minLength: 4,
-                  })}
-                  spellCheck={false}
-                  className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
-                />
-                <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
-                  {nip05.verified ? (
-                    <span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
-                      <CheckCircleIcon className="h-4 w-4" />
-                      Verified
-                    </span>
-                  ) : (
-                    <span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
-                      <UnverifiedIcon className="h-4 w-4" />
-                      Unverified
-                    </span>
-                  )}
-                </div>
-                {errors.nip05 && (
-                  <p className="mt-1 text-sm text-red-400">
-                    {errors.nip05.message.toString()}
-                  </p>
-                )}
-              </div>
-            </div>
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="website"
-                className="text-sm font-semibold uppercase tracking-wider"
-              >
-                Website
-              </label>
-              <input
-                type={'text'}
-                {...register('website', { required: false })}
-                spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
-              />
-            </div>
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="website"
-                className="text-sm font-semibold uppercase tracking-wider"
-              >
-                Lightning address
-              </label>
-              <input
-                type={'text'}
-                {...register('lud16', { required: false })}
-                spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
-              />
-            </div>
-            <div className="flex flex-col gap-1">
-              <label
-                htmlFor="about"
-                className="text-sm font-semibold uppercase tracking-wider"
-              >
-                Bio
-              </label>
-              <textarea
-                {...register('about')}
-                spellCheck={false}
-                className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
-              />
-            </div>
-            <div>
-              <button
-                type="submit"
-                disabled={!isValid}
-                className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
-              >
-                {loading ? (
-                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
-                ) : (
-                  'Update'
-                )}
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/personal/index.tsx b/src/app/personal/index.tsx
deleted file mode 100644
index d84191e7..00000000
--- a/src/app/personal/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ContactCard } from '@app/personal/components/contactCard';
-import { PostCard } from '@app/personal/components/postCard';
-import { ProfileCard } from '@app/personal/components/profileCard';
-import { RelayCard } from '@app/personal/components/relayCard';
-import { ZapCard } from '@app/personal/components/zapCard';
-
-export function PersonalScreen() {
-  return (
-    <div className="flex h-full w-full flex-col overflow-y-auto">
-      <div className="flex h-14 shrink-0 items-center justify-between px-3">
-        <div className="w-20" />
-        <h1 className="font-semibold">Personal Dashboard</h1>
-        <div className="w-20" />
-      </div>
-      <div className="mx-auto w-full max-w-xl">
-        <ProfileCard />
-        <div className="grid grid-cols-2 gap-4">
-          <ContactCard />
-          <RelayCard />
-          <PostCard />
-          <ZapCard />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/settings/about.tsx b/src/app/settings/about.tsx
new file mode 100644
index 00000000..166794bc
--- /dev/null
+++ b/src/app/settings/about.tsx
@@ -0,0 +1,3 @@
+export function AboutScreen() {
+  return <div></div>;
+}
diff --git a/src/app/settings/advanced.tsx b/src/app/settings/advanced.tsx
new file mode 100644
index 00000000..fb2d693d
--- /dev/null
+++ b/src/app/settings/advanced.tsx
@@ -0,0 +1,3 @@
+export function AdvancedSettingScreen() {
+  return <div></div>;
+}
diff --git a/src/app/settings/backup.tsx b/src/app/settings/backup.tsx
new file mode 100644
index 00000000..b1c1c94b
--- /dev/null
+++ b/src/app/settings/backup.tsx
@@ -0,0 +1,3 @@
+export function BackupSettingScreen() {
+  return <div></div>;
+}
diff --git a/src/app/personal/components/contactCard.tsx b/src/app/settings/components/contactCard.tsx
similarity index 97%
rename from src/app/personal/components/contactCard.tsx
rename to src/app/settings/components/contactCard.tsx
index 3bc4ba75..29d3da76 100644
--- a/src/app/personal/components/contactCard.tsx
+++ b/src/app/settings/components/contactCard.tsx
@@ -37,7 +37,7 @@ export function ContactCard() {
               Contacts
             </p>
             <Link
-              to="/personal/edit-contact"
+              to="/settings/edit-contact"
               className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
             >
               <EditIcon className="h-3 w-3" />
diff --git a/src/app/personal/components/postCard.tsx b/src/app/settings/components/postCard.tsx
similarity index 100%
rename from src/app/personal/components/postCard.tsx
rename to src/app/settings/components/postCard.tsx
diff --git a/src/app/personal/components/profileCard.tsx b/src/app/settings/components/profileCard.tsx
similarity index 98%
rename from src/app/personal/components/profileCard.tsx
rename to src/app/settings/components/profileCard.tsx
index 34823d55..a4756199 100644
--- a/src/app/personal/components/profileCard.tsx
+++ b/src/app/settings/components/profileCard.tsx
@@ -27,7 +27,7 @@ export function ProfileCard() {
         <div className="flex h-full w-full flex-col justify-between p-4">
           <div className="flex h-10 w-full justify-end">
             <Link
-              to="/personal/edit-profile"
+              to="/settings/edit-profile"
               className="inline-flex h-8 w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-600"
             >
               <EditIcon className="h-4 w-4" />
diff --git a/src/app/personal/components/relayCard.tsx b/src/app/settings/components/relayCard.tsx
similarity index 100%
rename from src/app/personal/components/relayCard.tsx
rename to src/app/settings/components/relayCard.tsx
diff --git a/src/app/personal/components/zapCard.tsx b/src/app/settings/components/zapCard.tsx
similarity index 100%
rename from src/app/personal/components/zapCard.tsx
rename to src/app/settings/components/zapCard.tsx
diff --git a/src/app/settings/editContact.tsx b/src/app/settings/editContact.tsx
new file mode 100644
index 00000000..30dcd118
--- /dev/null
+++ b/src/app/settings/editContact.tsx
@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+export function EditContactScreen() {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+  const { status, data } = useQuery({
+    queryKey: ['contacts'],
+    queryFn: async () => {
+      const user = ndk.getUser({ pubkey: db.account.pubkey });
+
+      const follows = await user.follows();
+      return [...follows];
+    },
+    refetchOnWindowFocus: false,
+  });
+
+  return (
+    <div className="mx-auto flex w-full max-w-xl flex-col gap-3">
+      {status === 'pending' ? (
+        <div className="flex h-10 w-full items-center justify-center">
+          <LoaderIcon className="h-4 w-4 animate-spin" />
+        </div>
+      ) : (
+        data.map((item) => (
+          <div
+            key={item.pubkey}
+            className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
+          >
+            <User pubkey={item.pubkey} variant="simple" />
+          </div>
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/src/app/settings/editProfile.tsx b/src/app/settings/editProfile.tsx
new file mode 100644
index 00000000..90e784a0
--- /dev/null
+++ b/src/app/settings/editProfile.tsx
@@ -0,0 +1,303 @@
+import { NDKEvent, NDKKind, NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { useQueryClient } from '@tanstack/react-query';
+import { message } from '@tauri-apps/plugin-dialog';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { CheckCircleIcon, LoaderIcon, PlusIcon, UnverifiedIcon } from '@shared/icons';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function EditProfileScreen() {
+  const queryClient = useQueryClient();
+
+  const [loading, setLoading] = useState(false);
+  const [picture, setPicture] = useState('');
+  const [banner, setBanner] = useState('');
+  const [nip05, setNIP05] = useState({ verified: true, text: '' });
+
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+  const { upload } = useNostr();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setError,
+    formState: { isValid, errors },
+  } = useForm({
+    defaultValues: async () => {
+      const res: NDKUserProfile = queryClient.getQueryData(['user', db.account.pubkey]);
+      if (res.image) {
+        setPicture(res.image);
+      }
+      if (res.banner) {
+        setBanner(res.banner);
+      }
+      if (res.nip05) {
+        setNIP05((prev) => ({ ...prev, text: res.nip05 }));
+      }
+      return res;
+    },
+  });
+
+  const uploadAvatar = async () => {
+    try {
+      setLoading(true);
+
+      const image = await upload();
+
+      if (image) {
+        setPicture(image);
+        setLoading(false);
+      }
+    } catch (e) {
+      setLoading(false);
+      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
+    }
+  };
+
+  const uploadBanner = async () => {
+    try {
+      setLoading(true);
+
+      const image = await upload();
+
+      if (image) {
+        setBanner(image);
+        setLoading(false);
+      }
+    } catch (e) {
+      setLoading(false);
+      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
+    }
+  };
+
+  const onSubmit = async (data: NDKUserProfile) => {
+    // start loading
+    setLoading(true);
+
+    const content = {
+      ...data,
+      username: data.name,
+      display_name: data.name,
+      bio: data.about,
+      image: data.picture,
+    };
+
+    const event = new NDKEvent(ndk);
+    event.kind = NDKKind.Metadata;
+    event.tags = [];
+
+    if (data.nip05) {
+      const user = ndk.getUser({ pubkey: db.account.pubkey });
+      const verify = await user.validateNip05(data.nip05);
+      if (verify) {
+        event.content = JSON.stringify({ ...content, nip05: data.nip05 });
+      } else {
+        setNIP05((prev) => ({ ...prev, verified: false }));
+        setError('nip05', {
+          type: 'manual',
+          message: "Can't verify your Lume ID / NIP-05, please check again",
+        });
+      }
+    } else {
+      event.content = JSON.stringify(content);
+    }
+
+    const publishedRelays = await event.publish();
+
+    if (publishedRelays) {
+      // invalid cache
+      queryClient.invalidateQueries({
+        queryKey: ['user', db.account.pubkey],
+      });
+      // reset form
+      reset();
+      // reset state
+      setLoading(false);
+      setPicture(null);
+      setBanner(null);
+    } else {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-md">
+      <form onSubmit={handleSubmit(onSubmit)} className="mb-0">
+        <input type={'hidden'} {...register('picture')} value={picture} />
+        <input type={'hidden'} {...register('banner')} value={banner} />
+        <div className="flex flex-col items-center justify-center">
+          <div className="relative h-36 w-full">
+            {banner ? (
+              <img
+                src={banner}
+                alt="user's banner"
+                className="h-full w-full rounded-xl object-cover"
+              />
+            ) : (
+              <div className="h-full w-full rounded-xl bg-neutral-200 dark:bg-neutral-900" />
+            )}
+            <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-xl">
+              <button
+                type="button"
+                onClick={() => uploadBanner()}
+                className="inline-flex h-full w-full items-center justify-center bg-black/20 text-white"
+              >
+                <PlusIcon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+          <div className="mb-5 px-4">
+            <div className="relative z-10 -mt-7 h-14 w-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
+              <img
+                src={picture}
+                alt="user's avatar"
+                className="h-14 w-14 rounded-xl object-cover"
+              />
+              <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
+                <button
+                  type="button"
+                  onClick={() => uploadAvatar()}
+                  className="inline-flex h-full w-full items-center justify-center rounded-xl bg-black/50 text-white"
+                >
+                  <PlusIcon className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="display_name"
+              className="text-sm font-semibold uppercase tracking-wider"
+            >
+              Display Name
+            </label>
+            <input
+              type={'text'}
+              {...register('display_name', {
+                required: true,
+                minLength: 4,
+              })}
+              spellCheck={false}
+              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="name"
+              className="text-sm font-semibold uppercase tracking-wider"
+            >
+              Name
+            </label>
+            <input
+              type={'text'}
+              {...register('name', {
+                required: true,
+                minLength: 4,
+              })}
+              spellCheck={false}
+              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="nip05"
+              className="text-sm font-semibold uppercase tracking-wider"
+            >
+              NIP-05
+            </label>
+            <div className="relative">
+              <input
+                {...register('nip05', {
+                  required: true,
+                  minLength: 4,
+                })}
+                spellCheck={false}
+                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              />
+              <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
+                {nip05.verified ? (
+                  <span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
+                    <CheckCircleIcon className="h-4 w-4" />
+                    Verified
+                  </span>
+                ) : (
+                  <span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
+                    <UnverifiedIcon className="h-4 w-4" />
+                    Unverified
+                  </span>
+                )}
+              </div>
+              {errors.nip05 && (
+                <p className="mt-1 text-sm text-red-400">
+                  {errors.nip05.message.toString()}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="website"
+              className="text-sm font-semibold uppercase tracking-wider"
+            >
+              Website
+            </label>
+            <input
+              type={'text'}
+              {...register('website', { required: false })}
+              spellCheck={false}
+              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="website"
+              className="text-sm font-semibold uppercase tracking-wider"
+            >
+              Lightning address
+            </label>
+            <input
+              type={'text'}
+              {...register('lud16', { required: false })}
+              spellCheck={false}
+              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label
+              htmlFor="about"
+              className="text-sm font-semibold uppercase tracking-wider"
+            >
+              Bio
+            </label>
+            <textarea
+              {...register('about')}
+              spellCheck={false}
+              className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+            />
+          </div>
+          <div>
+            <button
+              type="submit"
+              disabled={!isValid}
+              className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+            >
+              {loading ? (
+                <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
+              ) : (
+                'Update'
+              )}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/app/settings/general.tsx b/src/app/settings/general.tsx
new file mode 100644
index 00000000..b6f089a9
--- /dev/null
+++ b/src/app/settings/general.tsx
@@ -0,0 +1,3 @@
+export function GeneralSettingScreen() {
+  return <div></div>;
+}
diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx
index 93ea91e9..fb272c15 100644
--- a/src/app/settings/index.tsx
+++ b/src/app/settings/index.tsx
@@ -1,3 +1,19 @@
-export function SettingsScreen() {
-  return <div></div>;
+import { ContactCard } from '@app/settings/components/contactCard';
+import { PostCard } from '@app/settings/components/postCard';
+import { ProfileCard } from '@app/settings/components/profileCard';
+import { RelayCard } from '@app/settings/components/relayCard';
+import { ZapCard } from '@app/settings/components/zapCard';
+
+export function UserSettingScreen() {
+  return (
+    <div className="mx-auto w-full max-w-xl">
+      <ProfileCard />
+      <div className="grid grid-cols-2 gap-4">
+        <ContactCard />
+        <RelayCard />
+        <PostCard />
+        <ZapCard />
+      </div>
+    </div>
+  );
 }
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index 3c734827..23d97d3a 100644
--- a/src/shared/accounts/active.tsx
+++ b/src/shared/accounts/active.tsx
@@ -25,7 +25,7 @@ export function ActiveAccount() {
 
   return (
     <div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 ring-1 ring-transparent hover:bg-neutral-200 hover:ring-blue-500 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-      <Link to="/personal" className="relative inline-block">
+      <Link to="/settings/" className="relative inline-block">
         <Avatar.Root>
           <Avatar.Image
             src={user?.picture || user?.image}
diff --git a/src/shared/accounts/more.tsx b/src/shared/accounts/more.tsx
index c541d9c1..4e7f2b2b 100644
--- a/src/shared/accounts/more.tsx
+++ b/src/shared/accounts/more.tsx
@@ -19,23 +19,13 @@ export function AccountMoreActions() {
         <DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
           <DropdownMenu.Item asChild>
             <Link
-              to="/personal"
-              className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
-            >
-              Dashboard
-            </Link>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item asChild>
-            <Link
-              to="/settings"
+              to="/settings/"
               className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
             >
               Settings
             </Link>
           </DropdownMenu.Item>
-          <DropdownMenu.Item asChild>
-            <Logout />
-          </DropdownMenu.Item>
+          <Logout />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
diff --git a/src/shared/layouts/settings.tsx b/src/shared/layouts/settings.tsx
index 1c3e5d57..7280d4bb 100644
--- a/src/shared/layouts/settings.tsx
+++ b/src/shared/layouts/settings.tsx
@@ -1,8 +1,11 @@
-import { Outlet, ScrollRestoration } from 'react-router-dom';
+import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 import { WindowTitlebar } from 'tauri-controls';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { SecureIcon, SettingsIcon } from '@shared/icons';
+
 export function SettingsLayout() {
   const { db } = useStorage();
 
@@ -13,7 +16,79 @@ export function SettingsLayout() {
       ) : (
         <div data-tauri-drag-region className="h-9" />
       )}
-      <div className="flex h-full min-h-0 w-full">
+      <div className="flex h-full min-h-0 w-full flex-col gap-8 overflow-y-auto pb-10">
+        <div className="flex h-20 w-full items-end justify-center gap-0.5 border-b border-neutral-200 pb-2 dark:border-neutral-800">
+          <NavLink
+            to="/settings/"
+            className={({ isActive }) =>
+              twMerge(
+                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900',
+                isActive
+                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                  : ''
+              )
+            }
+          >
+            <SettingsIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">User</p>
+          </NavLink>
+          <NavLink
+            to="/settings/general"
+            className={({ isActive }) =>
+              twMerge(
+                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                isActive
+                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                  : ''
+              )
+            }
+          >
+            <SettingsIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">General</p>
+          </NavLink>
+          <NavLink
+            to="/settings/backup"
+            className={({ isActive }) =>
+              twMerge(
+                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                isActive
+                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                  : ''
+              )
+            }
+          >
+            <SecureIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">Backup</p>
+          </NavLink>
+          <NavLink
+            to="/settings/advanced"
+            className={({ isActive }) =>
+              twMerge(
+                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                isActive
+                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                  : ''
+              )
+            }
+          >
+            <SettingsIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">Advanced</p>
+          </NavLink>
+          <NavLink
+            to="/settings/about"
+            className={({ isActive }) =>
+              twMerge(
+                'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900',
+                isActive
+                  ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800'
+                  : ''
+              )
+            }
+          >
+            <SettingsIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">About</p>
+          </NavLink>
+        </div>
         <Outlet />
         <ScrollRestoration />
       </div>