update settings screen

src/shared/accounts/active.tsx

@@ -1,14 +1,15 @@
 import { NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
 import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { AccountMoreActions } from '@shared/accounts/more';
 import { Image } from '@shared/image';
 
 import { useNostr } from '@utils/hooks/useNostr';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
+import { displayNpub } from '@utils/shortenKey';
 
 export function ActiveAccount() {
   const { db } = useStorage();
@@ -57,16 +58,23 @@ export function ActiveAccount() {
   }
 
   return (
-    <Link
-      to={`/users/${db.account.pubkey}`}
-      className="flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
-    >
-      <Image
-        src={user?.picture || user?.image}
-        alt={db.account.npub}
-        className="h-7 w-7 shrink-0 rounded object-cover"
-      />
-      <p className="text-white/80">Your profile</p>
-    </Link>
+    <div className="flex h-16 items-center justify-between border-l-2 border-transparent pb-2 pl-4 pr-2">
+      <div className="flex items-center gap-2.5">
+        <Image
+          src={user?.picture || user?.image}
+          alt={db.account.npub}
+          className="h-10 w-10 shrink-0 rounded-lg object-cover"
+        />
+        <div className="flex w-full flex-1 flex-col items-start gap-1.5">
+          <p className="max-w-[10rem] truncate font-bold leading-none text-white">
+            {user?.name || user?.display_name || user?.nip05}
+          </p>
+          <span className="max-w-[8rem] truncate text-sm leading-none text-white/50">
+            {displayNpub(db.account.pubkey, 16)}
+          </span>
+        </div>
+      </div>
+      <AccountMoreActions pubkey={db.account.pubkey} />
+    </div>
   );
 }

src/shared/accounts/inactive.tsx

@@ -1,13 +0,0 @@
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-
-export function InactiveAccount({ data }: { data: any }) {
-  const { user } = useProfile(data.npub);
-
-  return (
-    <div className="relative h-9 w-9 shrink-0">
-      <Image src={user?.image} alt={data.npub} className="h-9 w-9 rounded object-cover" />
-    </div>
-  );
-}

src/shared/accounts/more.tsx

@@ -0,0 +1,55 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { HorizontalDotsIcon } from '@shared/icons';
+
+export function AccountMoreActions({ pubkey }: { pubkey: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          className="group ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-white/10"
+        >
+          <HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-white" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
+          <DropdownMenu.Item asChild>
+            <Link
+              to={`/users/${pubkey}`}
+              className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
+            >
+              Profile
+            </Link>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild>
+            <Link
+              to={`/settings/backup`}
+              className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
+            >
+              Backup
+            </Link>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild>
+            <Link
+              to={`/settings/`}
+              className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
+            >
+              Settings
+            </Link>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild>
+            <button className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10">
+              Logout
+            </button>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}