update settings screen

src-tauri/Cargo.lock

@@ -2677,7 +2677,7 @@ dependencies = [
 
 [[package]]
 name = "lume"
-version = "1.2.0"
+version = "1.2.1"
 dependencies = [
  "rust-argon2",
  "serde",

src-tauri/tauri.linux.conf.json

@@ -25,22 +25,6 @@
         "hiddenTitle": true,
         "visible": false,
         "fileDropEnabled": true
-      },
-      {
-        "width": 1080,
-        "height": 800,
-        "resizable": false,
-        "theme": "Dark",
-        "label": "settings",
-        "url": "settings",
-        "title": "Settings",
-        "titleBarStyle": "Overlay",
-        "transparent": false,
-        "center": true,
-        "fullscreen": false,
-        "hiddenTitle": true,
-        "visible": false,
-        "fileDropEnabled": false
       }
     ]
   }

src-tauri/tauri.macos.conf.json

@@ -32,26 +32,6 @@
           "effects": ["hudWindow"],
           "state": "followsWindowActiveState"
         }
-      },
-      {
-        "width": 1080,
-        "height": 800,
-        "resizable": false,
-        "theme": "Dark",
-        "label": "settings",
-        "url": "settings",
-        "title": "Settings",
-        "titleBarStyle": "Overlay",
-        "transparent": true,
-        "center": true,
-        "fullscreen": false,
-        "hiddenTitle": true,
-        "visible": false,
-        "fileDropEnabled": false,
-        "windowEffects": {
-          "effects": ["hudWindow"],
-          "state": "followsWindowActiveState"
-        }
       }
     ]
   }

src-tauri/tauri.windows.conf.json

@@ -29,26 +29,6 @@
           "effects": ["micaDark", "micaLight", "acrylic"],
           "state": "followsWindowActiveState"
         }
-      },
-      {
-        "width": 1080,
-        "height": 800,
-        "resizable": false,
-        "theme": "Dark",
-        "label": "settings",
-        "url": "settings",
-        "title": "Settings",
-        "titleBarStyle": "Overlay",
-        "transparent": true,
-        "center": true,
-        "fullscreen": false,
-        "hiddenTitle": true,
-        "visible": false,
-        "fileDropEnabled": false,
-        "windowEffects": {
-          "effects": ["micaDark", "micaLight", "acrylic"],
-          "state": "followsWindowActiveState"
-        }
       }
     ]
   }

src/app.tsx

@@ -110,6 +110,7 @@ const router = createBrowserRouter([
   {
     path: '/auth',
     element: <AuthLayout />,
+    errorElement: <ErrorScreen />,
     children: [
       {
         path: 'welcome',
@@ -121,6 +122,7 @@ const router = createBrowserRouter([
       {
         path: 'import',
         element: <AuthImportScreen />,
+        errorElement: <ErrorScreen />,
         children: [
           {
             path: '',
@@ -148,6 +150,7 @@ const router = createBrowserRouter([
       {
         path: 'create',
         element: <AuthCreateScreen />,
+        errorElement: <ErrorScreen />,
         children: [
           {
             path: '',
@@ -175,6 +178,7 @@ const router = createBrowserRouter([
       {
         path: 'onboarding',
         element: <OnboardingScreen />,
+        errorElement: <ErrorScreen />,
         children: [
           {
             path: '',
@@ -232,23 +236,17 @@ const router = createBrowserRouter([
   {
     path: '/settings',
     element: <SettingsLayout />,
+    errorElement: <ErrorScreen />,
     children: [
       {
-        path: 'general',
+        path: '',
         async lazy() {
           const { GeneralSettingsScreen } = await import('@app/settings/general');
           return { Component: GeneralSettingsScreen };
         },
       },
       {
-        path: 'shortcuts',
-        async lazy() {
-          const { ShortcutsSettingsScreen } = await import('@app/settings/shortcuts');
-          return { Component: ShortcutsSettingsScreen };
-        },
-      },
-      {
-        path: 'account',
+        path: 'backup',
         async lazy() {
           const { AccountSettingsScreen } = await import('@app/settings/account');
           return { Component: AccountSettingsScreen };

src/app/chats/components/list.tsx

@@ -32,11 +32,11 @@ export function ChatsList() {
   if (status === 'loading') {
     return (
       <div className="flex flex-col">
-        <div className="inline-flex h-10 items-center gap-2.5 pl-4 border-l-2 border-transparent">
+        <div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
           <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
           <div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         </div>
-        <div className="inline-flex h-10 items-center gap-2.5 pl-4 border-l-2 border-transparent">
+        <div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
           <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
           <div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         </div>

src/app/settings/account.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { nip19 } from 'nostr-tools';
+import { useMemo, useState } from 'react';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -7,84 +8,119 @@ import { EyeOffIcon, EyeOnIcon } from '@shared/icons';
 import { useStronghold } from '@stores/stronghold';
 
 export function AccountSettingsScreen() {
-  const [type, setType] = useState('password');
-  const privkey = useStronghold((state) => state.privkey);
   const { db } = useStorage();
 
-  const showPrivateKey = () => {
-    if (type === 'password') {
-      setType('text');
+  const [privType, setPrivType] = useState('password');
+  const [nsecType, setNsecType] = useState('password');
+
+  const privkey = useStronghold((state) => state.privkey);
+  const nsec = useMemo(() => nip19.nsecEncode(privkey), [privkey]);
+
+  const showPrivkey = () => {
+    if (privType === 'password') {
+      setPrivType('text');
     } else {
-      setType('password');
+      setPrivType('password');
+    }
+  };
+
+  const showNsec = () => {
+    if (nsecType === 'password') {
+      setNsecType('text');
+    } else {
+      setNsecType('password');
     }
   };
 
   return (
-    <div className="h-full w-full px-3 pt-12">
+    <div className="h-full w-full px-3 pt-11">
       <div className="flex flex-col gap-2">
-        <h1 className="text-lg font-semibold text-white">Account</h1>
-        <div className="">
-          {status === 'loading' ? (
-            <p>Loading...</p>
-          ) : (
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-col gap-1">
-                <label htmlFor="pubkey" className="text-base font-semibold text-white/50">
-                  Public Key
-                </label>
-                <input
-                  readOnly
-                  value={db.account.pubkey}
-                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                />
-              </div>
-              <div className="flex flex-col gap-1">
-                <label htmlFor="npub" className="text-base font-semibold text-white/50">
-                  Npub
-                </label>
-                <input
-                  readOnly
-                  value={db.account.npub}
-                  className="relative w-2/3 rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
-                />
-              </div>
-              <div className="flex flex-col gap-1">
-                <label
-                  htmlFor="privkey"
-                  className="text-base font-semibold text-white/50"
-                >
-                  Private Key
-                </label>
-                <div className="relative w-2/3">
-                  <input
-                    readOnly
-                    type={type}
-                    value={privkey}
-                    className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+        <h1 className="text-xl font-semibold text-white">Account</h1>
+        <div className="flex flex-col gap-4 rounded-xl bg-white/10 p-3 backdrop-blur-xl">
+          <div className="flex flex-col gap-1">
+            <label htmlFor="pubkey" className="text-base font-semibold text-white/50">
+              Public Key
+            </label>
+            <input
+              readOnly
+              value={db.account.pubkey}
+              className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label htmlFor="npub" className="text-base font-semibold text-white/50">
+              Npub
+            </label>
+            <input
+              readOnly
+              value={db.account.npub}
+              className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label htmlFor="privkey" className="text-base font-semibold text-white/50">
+              Private Key
+            </label>
+            <div className="relative w-full">
+              <input
+                readOnly
+                type={privType}
+                value={privkey}
+                className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+              />
+              <button
+                type="button"
+                onClick={() => showPrivkey()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+              >
+                {privType === 'password' ? (
+                  <EyeOffIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
                   />
-                  <button
-                    type="button"
-                    onClick={() => showPrivateKey()}
-                    className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
-                  >
-                    {type === 'password' ? (
-                      <EyeOffIcon
-                        width={20}
-                        height={20}
-                        className="text-white/50 group-hover:text-white"
-                      />
-                    ) : (
-                      <EyeOnIcon
-                        width={20}
-                        height={20}
-                        className="text-white/50 group-hover:text-white"
-                      />
-                    )}
-                  </button>
-                </div>
-              </div>
+                ) : (
+                  <EyeOnIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
+                )}
+              </button>
             </div>
-          )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <label htmlFor="privkey" className="text-base font-semibold text-white/50">
+              Nsec
+            </label>
+            <div className="relative w-full">
+              <input
+                readOnly
+                type={nsecType}
+                value={nsec}
+                className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+              />
+              <button
+                type="button"
+                onClick={() => showNsec()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+              >
+                {privType === 'password' ? (
+                  <EyeOffIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
+                ) : (
+                  <EyeOnIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
+                )}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/app/settings/components/dataPath.tsx

@@ -0,0 +1,28 @@
+import { appConfigDir } from '@tauri-apps/api/path';
+import { useEffect, useState } from 'react';
+
+export function DataPath() {
+  const [path, setPath] = useState<string>('');
+
+  useEffect(() => {
+    async function getPath() {
+      const dir = await appConfigDir();
+      setPath(dir);
+    }
+    getPath();
+  }, []);
+
+  return (
+    <div className="inline-flex items-center justify-between px-5 py-4">
+      <div className="flex flex-col gap-1">
+        <span className="font-medium leading-none text-zinc-200">App data path</span>
+        <span className="text-sm leading-none text-white/50">
+          Where the local data is stored
+        </span>
+      </div>
+      <div className="inline-flex items-center gap-2">
+        <span className="font-medium text-zinc-300">{path}</span>
+      </div>
+    </div>
+  );
+}

src/app/settings/components/version.tsx

@@ -1,8 +1,6 @@
 import { getVersion } from '@tauri-apps/plugin-app';
 import { useEffect, useState } from 'react';
 
-import { RefreshIcon } from '@shared/icons';
-
 export function VersionSetting() {
   const [version, setVersion] = useState<string>('');
 
@@ -24,12 +22,6 @@ export function VersionSetting() {
       </div>
       <div className="inline-flex items-center gap-2">
         <span className="font-medium text-zinc-300">{version}</span>
-        <button
-          type="button"
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
-        >
-          <RefreshIcon className="h-4 w-4 text-white" />
-        </button>
       </div>
     </div>
   );

src/app/settings/general.tsx

@@ -1,16 +1,16 @@
 import { AutoStartSetting } from '@app/settings/components/autoStart';
-import { CacheTimeSetting } from '@app/settings/components/cacheTime';
+import { DataPath } from '@app/settings/components/dataPath';
 import { VersionSetting } from '@app/settings/components/version';
 
 export function GeneralSettingsScreen() {
   return (
-    <div className="h-full w-full px-3 pt-12">
+    <div className="h-full w-full px-3 pt-11">
       <div className="flex flex-col gap-2">
-        <h1 className="text-lg font-semibold text-white">General</h1>
+        <h1 className="text-xl font-semibold text-white">General</h1>
         <div className="w-full rounded-xl bg-white/10 backdrop-blur-xl">
           <div className="flex h-full w-full flex-col divide-y divide-white/5">
             <AutoStartSetting />
-            <CacheTimeSetting />
+            <DataPath />
             <VersionSetting />
           </div>
         </div>

src/app/space/components/widgetList.tsx

@@ -42,7 +42,7 @@ export function WidgetList({ params }: { params: Widget }) {
 
   return (
     <div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden">
-      <TitleBar title="Add widget" />
+      <TitleBar id={params.id} title="Add widget" />
       <div className="flex flex-col gap-8 px-3">
         {DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
       </div>

src/libs/ndk/instance.ts

@@ -58,7 +58,7 @@ export const NDKInstance = () => {
       // return all validate relays
       return verifiedRelays;
     } catch (e) {
-      e.forEach((error) => console.error(error));
+      console.error('ndk instance error: ', e);
     }
   }
 

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>
+  );
+}

src/shared/icons/index.ts

@@ -55,3 +55,4 @@ export * from './share';
 export * from './expand';
 export * from './focus';
 export * from './chevronUp';
+export * from './secure';

src/shared/icons/secure.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function SecureIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M20.25 6.22a1 1 0 00-.684-.948l-7.25-2.417a1 1 0 00-.632 0l-7.25 2.417a1 1 0 00-.684.949v5.691c0 4.973 4.25 7.338 8.25 9.496 4-2.158 8.25-4.523 8.25-9.496V6.221z"
+      ></path>
+    </svg>
+  );
+}

src/shared/layouts/settings.tsx

@@ -1,60 +1,58 @@
-import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
+import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
+import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons';
+
 export function SettingsLayout() {
   return (
     <div className="flex h-screen w-screen">
-      <div className="relative flex shrink-0 flex-row bg-black/80 pt-12">
-        <div className="relative flex w-[232px] flex-col gap-3">
-          <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
-            <div className="flex flex-col gap-0.5 px-1.5">
-              <div className="px-2.5">
-                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
-                  Settings
-                </h3>
-              </div>
-              <div className="flex flex-col">
-                <NavLink
-                  to="/settings/general"
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive
-                        ? 'bg-white/10 text-white backdrop-blur-xl'
-                        : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="font-medium">General</span>
-                </NavLink>
-                <NavLink
-                  to="/settings/shortcuts"
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive
-                        ? 'bg-white/10 text-white backdrop-blur-xl'
-                        : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="font-medium">Shortcuts</span>
-                </NavLink>
-                <NavLink
-                  to="/settings/account"
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive
-                        ? 'bg-white/10 text-white backdrop-blur-xl'
-                        : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="font-medium">Account</span>
-                </NavLink>
-              </div>
-            </div>
+      <div className="relative flex h-full w-[232px] flex-col bg-black/80">
+        <div data-tauri-drag-region className="h-11 w-full shrink-0" />
+        <div className="scrollbar-hide flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32">
+          <div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
+            <Link
+              to="/"
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
+            >
+              <ArrowLeftIcon className="h-4 w-4 text-white/50" />
+            </Link>
+            <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
+              Settings
+            </h3>
+          </div>
+          <div className="flex flex-col pr-2">
+            <NavLink
+              to="/settings/"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                  isActive
+                    ? 'border-fuchsia-500 bg-white/5 text-white'
+                    : 'border-transparent text-white/80'
+                )
+              }
+            >
+              <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+                <SettingsIcon className="h-4 w-4 text-white" />
+              </span>
+              <span className="font-medium">General</span>
+            </NavLink>
+            <NavLink
+              to="/settings/backup"
+              className={({ isActive }) =>
+                twMerge(
+                  'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                  isActive
+                    ? 'border-fuchsia-500 bg-white/5 text-white'
+                    : 'border-transparent text-white/80'
+                )
+              }
+            >
+              <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+                <SecureIcon className="h-4 w-4 text-white" />
+              </span>
+              <span className="font-medium">Backup</span>
+            </NavLink>
           </div>
         </div>
       </div>

src/shared/navigation.tsx

@@ -6,7 +6,7 @@ import { ChatsList } from '@app/chats/components/list';
 
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
-import { BellIcon, NavArrowDownIcon, SettingsIcon, SpaceIcon } from '@shared/icons';
+import { BellIcon, NavArrowDownIcon, SpaceIcon } from '@shared/icons';
 
 import { useSidebar } from '@stores/sidebar';
 
@@ -14,9 +14,9 @@ export function Navigation() {
   const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
 
   return (
-    <div className="relative h-full w-[232px] bg-black/80">
-      <div data-tauri-drag-region className="h-11 w-full" />
-      <div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
+    <div className="relative flex h-full w-[232px] flex-col bg-black/80">
+      <div data-tauri-drag-region className="h-11 w-full shrink-0" />
+      <div className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32">
         <div className="flex flex-col pr-2">
           <ComposerModal />
           <NavLink
@@ -53,24 +53,6 @@ export function Navigation() {
             </span>
             Notifications
           </NavLink>
-          <NavLink
-            to="/settings"
-            preventScrollReset={true}
-            className={({ isActive }) =>
-              twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
-                isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/80'
-              )
-            }
-          >
-            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
-              <SettingsIcon className="h-4 w-4 text-white" />
-            </span>
-            Settings
-          </NavLink>
-          <ActiveAccount />
         </div>
         <Collapsible.Root open={chats} onOpenChange={toggleChats}>
           <div className="flex flex-col gap-1 pr-2">
@@ -95,6 +77,9 @@ export function Navigation() {
           </div>
         </Collapsible.Root>
       </div>
+      <div className="shrink-0">
+        <ActiveAccount />
+      </div>
     </div>
   );
 }

src/shared/notes/actions/more.tsx

@@ -45,7 +45,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
         </Tooltip.Portal>
       </Tooltip.Root>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
+        <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>
             <button
               type="button"