fix: in setting page display admin tab to only admin users

src/pages/settings.tsx

@@ -14,6 +14,8 @@ import '../styles/settings.css'
 import '../styles/styles.css'
 import '../styles/write.css'
 import { copyTextToClipboard } from '../utils'
+import { MetadataController } from '../controllers'
+import { useEffect, useState } from 'react'
 
 export const SettingsPage = () => {
   const location = useLocation()
@@ -47,8 +49,21 @@ export const SettingsPage = () => {
 
 const SettingTabs = () => {
   const location = useLocation()
+  const [isAdmin, setIsAdmin] = useState(false)
   const userState = useAppSelector((state) => state.user)
 
+  useEffect(() => {
+    MetadataController.getInstance().then((controller) => {
+      if (userState.auth && userState.user?.npub) {
+        setIsAdmin(
+          controller.adminNpubs.includes(userState.user.npub as string)
+        )
+      } else {
+        setIsAdmin(false)
+      }
+    })
+  }, [userState])
+
   const handleSignOut = () => {
     logout()
   }
@@ -120,26 +135,28 @@ const SettingTabs = () => {
             </svg>
             Preference
           </Link>
-          <Link
+          {isAdmin && (
-            className={`btn btnMain btnMainAltText btnMainClear ${
+            <Link
-              location.pathname === appRoutes.settingsAdmin
+              className={`btn btnMain btnMainAltText btnMainClear ${
-                ? 'btnMainClearActive'
+                location.pathname === appRoutes.settingsAdmin
-                : ''
+                  ? 'btnMainClearActive'
-            }`}
+                  : ''
-            role='button'
+              }`}
-            to={appRoutes.settingsAdmin}
+              role='button'
-          >
+              to={appRoutes.settingsAdmin}
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 -32 576 576'
-              width='1em'
-              height='1em'
-              fill='currentColor'
             >
-              <path d='M560 448H512V113.5c0-27.25-21.5-49.5-48-49.5L352 64.01V128h96V512h112c8.875 0 16-7.125 16-15.1v-31.1C576 455.1 568.9 448 560 448zM280.3 1.007l-192 49.75C73.1 54.51 64 67.76 64 82.88V448H16c-8.875 0-16 7.125-16 15.1v31.1C0 504.9 7.125 512 16 512H320V33.13C320 11.63 300.5-4.243 280.3 1.007zM232 288c-13.25 0-24-14.37-24-31.1c0-17.62 10.75-31.1 24-31.1S256 238.4 256 256C256 273.6 245.3 288 232 288z'></path>
+              <svg
-            </svg>
+                xmlns='http://www.w3.org/2000/svg'
-            Admin
+                viewBox='0 -32 576 576'
-          </Link>
+                width='1em'
+                height='1em'
+                fill='currentColor'
+              >
+                <path d='M560 448H512V113.5c0-27.25-21.5-49.5-48-49.5L352 64.01V128h96V512h112c8.875 0 16-7.125 16-15.1v-31.1C576 455.1 568.9 448 560 448zM280.3 1.007l-192 49.75C73.1 54.51 64 67.76 64 82.88V448H16c-8.875 0-16 7.125-16 15.1v31.1C0 504.9 7.125 512 16 512H320V33.13C320 11.63 300.5-4.243 280.3 1.007zM232 288c-13.25 0-24-14.37-24-31.1c0-17.62 10.75-31.1 24-31.1S256 238.4 256 256C256 273.6 245.3 288 232 288z'></path>
+              </svg>
+              Admin
+            </Link>
+          )}
         </div>
 
         {userState.auth &&