update settings screen

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>