rendering identity data

app/client/web/src/identity/Identity.module.css

@@ -9,9 +9,47 @@
 
 .identity {
   width: 100%;
-  height: 48px;
+  height: 64px;
   cursor: pointer;
   background: var(--mantine-color-surface-4);
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 8px;
+
+  .image {
+    width: 48px;
+    height: 48px;
+  }
+
+  .icon {
+    width: 32px;
+  }
+
+  .text {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 8px;
+    padding-right: 8px;
+
+    .nameSet {
+      font-size: 20px;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .nameUnset {
+      font-size: 20px;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-style: italic;
+      color: var(--mantine-color-text-9);
+    }
+  }
 }
 
 .menu {

app/client/web/src/identity/Identity.tsx

@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import classes from './Identity.module.css';
 import { useIdentity } from './useIdentity.hook';
-import { Menu, Switch } from '@mantine/core';
+import { Text, Image, Menu, Switch } from '@mantine/core';
 import {
   IconLogout,
+  IconChevronRight,
   IconSettings,
   IconAddressBook
 } from '@tabler/icons-react'
 import { modals } from '@mantine/modals';
+import avatar from '../images/avatar.png'
 
 export function Identity({ settings, contacts }: { settings: () => void, contacts: () => void }) {
   const { state, actions } = useIdentity();
@@ -26,7 +28,19 @@ export function Identity({ settings, contacts }: { settings: () => void, contact
   return (
     <Menu shadow="md" position="right">
       <Menu.Target>
-        <div className={classes.identity}>IDENTITY</div>
+        <div className={classes.identity}>
+          <Image radius="sm" className={classes.image} src={state.profile.imageSet ? state.imageUrl : avatar} />
+          <div className={classes.text}>
+            { !state.profile.name && (
+              <Text className={classes.nameUnset}>{state.strings.name}</Text>
+            )}
+            { state.profile.name && (
+              <Text className={classes.nameSet}>{state.profile.name}</Text>
+            )}
+           <Text className={classes.handle}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
+          </div>
+          <IconChevronRight className={classes.icon} />
+        </div>
       </Menu.Target>
 
       <Menu.Dropdown>

app/client/web/src/identity/useIdentity.hook.ts

@@ -9,6 +9,9 @@ export function useIdentity() {
   const [state, setState] = useState({
     all: false,
     strings: display.state.strings,
+    profile: {} as Profile,
+    profileSet: false,
+    imageUrl: null,
   });
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16,6 +19,22 @@ export function useIdentity() {
     setState((s) => ({ ...s, ...value }))
   }
 
+  useEffect(() => {
+    const identity = app.state.session?.getIdentity();
+    if (!identity) {
+      console.log('session not set in identity hook');
+    }
+    else {
+      const setProfile = (profile: Profile) => {
+        updateState({ profile, profileSet: true, imageUrl: identity.getProfileImageUrl() })
+      }
+      identity.addProfileListener(setProfile)
+      return () => {
+        identity.removeProfileListener(setProfile);
+      }
+    }
+  }, []);
+
   const actions = {
     setAll: (all: boolean) => {
       updateState({ all });