feat: add admin link to top navigation, manage identities link to pro…

…file page
pubkeyapp · Mar 7, 2024 · 3d7514e · 3d7514e
1 parent 4326f5e
commit 3d7514e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/libs/web/shell/feature/src/lib/shell-layout.tsx b/libs/web/shell/feature/src/lib/shell-layout.tsx
@@ -2,33 +2,35 @@ import { ActionIcon, Group } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { useAuth } from '@pubkey-link/web-auth-data-access'
 import { UiHeaderProfile } from '@pubkey-link/web-ui-core'
-import { UiHeader, UiLayout, UiLoader, UiLogoType } from '@pubkey-ui/core'
-import { IconBug, IconSettings, IconShield } from '@tabler/icons-react'
-import { ReactNode, Suspense } from 'react'
+import { UiHeader, UiHeaderLink, UiLayout, UiLoader, UiLogoType } from '@pubkey-ui/core'
+import { IconBug, IconSettings } from '@tabler/icons-react'
+import { ReactNode, Suspense, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 
 export function ShellLayout({ children }: { children: ReactNode }) {
   const { isAdmin, isDeveloper, user } = useAuth()
   const [opened, { toggle }] = useDisclosure(false)
+  const links: UiHeaderLink[] = useMemo(() => {
+    const items: UiHeaderLink[] = [
+      { link: '/c', label: 'Communities' },
+      { link: `${user?.profileUrl}`, label: 'Profile' },
+      { link: '/settings', label: 'Settings' },
+    ]
+    if (isAdmin) {
+      items.push({ link: '/admin', label: 'Admin' })
+    }
+    return items
+  }, [isAdmin, isDeveloper, user])
   return (
     <UiLayout
       header={
         <UiHeader
           logoSmall={<UiLogoType height={28} />}
           opened={opened}
           toggle={toggle}
-          links={[
-            { link: '/c', label: 'Communities' },
-            { link: `${user?.profileUrl}`, label: 'Profile' },
-            { link: '/settings', label: 'Settings' },
-          ]}
+          links={links}
           profile={
             <Group gap="xs">
-              {isAdmin && (
-                <ActionIcon component={Link} to="/admin" variant="light" size="lg">
-                  <IconShield />
-                </ActionIcon>
-              )}
               {isAdmin && isDeveloper && (
                 <ActionIcon component={Link} to="/admin/development" variant="light" size="lg">
                   <IconBug />

diff --git a/libs/web/user/feature/src/lib/user-user-detail-feature.tsx b/libs/web/user/feature/src/lib/user-user-detail-feature.tsx
@@ -36,6 +36,7 @@ export function UserUserDetailFeature() {
   }
 
   const isAuthAdmin = authUser?.role === UserRole.Admin
+  const isSelf = authUser?.id === user.id
 
   return (
     <UiContainer>
@@ -78,6 +79,13 @@ export function UserUserDetailFeature() {
                 </UiGroup>
               </UiCard>
             ))}
+            {isSelf && (
+              <Group justify="flex-end">
+                <Button size="xs" variant="light" component={Link} to="/settings">
+                  Manage Identities
+                </Button>
+              </Group>
+            )}
           </UiStack>
         }
       >