Display acount status in the member drawer and profile card

src/app/components/presence/Presence.tsx

@@ -22,10 +22,10 @@
 
 type PresenceBadgeProps = {
   presence: Presence;
   status?: string;
   size?: '200' | '300' | '400' | '500';
 };
-export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
+export function PresenceBadge({ presence, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
   const badgeLabelId = useId();
 
@@ -39,8 +39,6 @@
         <Tooltip id={badgeLabelId}>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
             <Text size="L400">{label[presence]}</Text>
-            {status && <Text size="T200">•</Text>}
-            {status && <Text size="T200">{status}</Text>}
           </Box>
         </Tooltip>
       }

src/app/components/user-profile/UserHero.tsx

@@ -9,14 +9,15 @@
   OverlayBackdrop,
   OverlayCenter,
   Text,
+  Tooltip,
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import colorMXID from '$utils/colorMXID';
 import { getMxIdLocalPart } from '$utils/matrix';
 import { BreakWord, LineClamp3 } from '$styles/Text.css';
-import { UserPresence } from '$hooks/useUserPresence';
-import { stopPropagation } from '$utils/keyboard';
+import { Presence, UserPresence } from '$hooks/useUserPresence';
+import { stopPropagation } from '$appUtils/keyboard';
 import { useRoom } from '$hooks/useRoom';
 import { useSableCosmetics } from '$hooks/useSableCosmetics';
 import { useNickname } from '$hooks/useNickname';
@@ -58,51 +59,58 @@
           />
         )}
       </div>
-      <div className={css.UserHeroAvatarContainer}>
-        <AvatarPresence
-          className={css.UserAvatarContainer}
-          badge={
-            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
-          }
-        >
-          <Avatar
-            as={avatarUrl ? 'button' : 'div'}
-            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-            className={css.UserHeroAvatar}
-            size="500"
+      <Box direction="Row" className={css.UserHeroAvatarStatusContainer}>
+        <div className={css.UserHeroAvatarContainer}>
+          <AvatarPresence
+            className={css.UserAvatarContainer}
+            badge={presence && <PresenceBadge presence={presence.presence} />}
           >
-            <UserAvatar
-              className={css.UserHeroAvatarImg}
-              userId={userId}
-              src={avatarUrl}
-              alt={userId}
-              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-            />
-          </Avatar>
-        </AvatarPresence>
-        {viewAvatar && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setViewAvatar(undefined),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
-                  <ImageViewer
-                    src={viewAvatar}
-                    alt={userId}
-                    requestClose={() => setViewAvatar(undefined)}
-                  />
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
+            <Avatar
+              as={avatarUrl ? 'button' : 'div'}
+              onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+              className={css.UserHeroAvatar}
+              size="500"
+            >
+              <UserAvatar
+                className={css.UserHeroAvatarImg}
+                userId={userId}
+                src={avatarUrl}
+                alt={userId}
+                renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+              />
+            </Avatar>
+          </AvatarPresence>
+          {viewAvatar && (
+            <Overlay open backdrop={<OverlayBackdrop />}>
+              <OverlayCenter>
+                <FocusTrap
+                  focusTrapOptions={{
+                    initialFocus: false,
+                    onDeactivate: () => setViewAvatar(undefined),
+                    clickOutsideDeactivates: true,
+                    escapeDeactivates: stopPropagation,
+                  }}
+                >
+                  <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+                    <ImageViewer
+                      src={viewAvatar}
+                      alt={userId}
+                      requestClose={() => setViewAvatar(undefined)}
+                    />
+                  </Modal>
+                </FocusTrap>
+              </OverlayCenter>
+            </Overlay>
+          )}
+        </div>
+        {presence?.status?.length && (
+          <div className={css.UserHeroStatusContainer}>
+            <Tooltip style={{ maxWidth: '90%', justifySelf: 'left' }}>
+              <Text size="T200"> {presence.status} </Text>
+            </Tooltip>
+          </div>
         )}
-      </div>
+      </Box>
     </Box>
   );
 }

src/app/components/user-profile/styles.css.ts

@@ -30,18 +30,29 @@ export const UserHeroCoverFallback = style({
   filter: 'blur(16px) brightness(50%)',
   transform: 'scale(2)',
 });
-
-export const UserHeroAvatarContainer = style({
+export const UserHeroAvatarStatusContainer = style({
   position: 'relative',
   height: toRem(29),
+  width: '100%',
+});
+export const UserHeroAvatarContainer = style({
+  position: 'relative',
+  paddingLeft: config.space.S400,
 });
 export const UserAvatarContainer = style({
-  position: 'absolute',
-  left: config.space.S400,
+  position: 'relative',
   top: 0,
   transform: 'translateY(-50%)',
   backgroundColor: color.Surface.Container,
 });
+export const UserHeroStatusContainer = style({
+  position: 'relative',
+  transform: 'translateY(-50%)',
+  textAlign: 'justify',
+  display: 'grid',
+  width: '100%',
+  paddingLeft: '2%',
+});
 export const UserHeroAvatar = style({
   outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
   selectors: {

src/app/features/room/MembersDrawer.tsx

@@ -57,8 +57,11 @@
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '$hooks/useMemberPowerTag';
 import { useRoomCreators } from '$hooks/useRoomCreators';
 import { useSableCosmetics } from '$hooks/useSableCosmetics';
 import * as css from './MembersDrawer.css';
 
+import { AvatarPresence, PresenceBadge } from '$components/presence';
+import { useUserPresence } from '$hooks/useUserPresence';
+
 type MemberDrawerHeaderProps = {
   room: Room;
 };
@@ -128,6 +131,8 @@
     ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
     : undefined;
 
+  const presence = useUserPresence(member.userId);
+
   const { color, font } = useSableCosmetics(member.userId, room);
 
   return (
@@ -139,14 +144,18 @@
       radii="400"
       onClick={onClick}
       before={
-        <Avatar size="200">
-          <UserAvatar
-            userId={member.userId}
-            src={avatarUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-          />
-        </Avatar>
+        <AvatarPresence
+          badge={presence && <PresenceBadge presence={presence.presence} size="200" />}
+        >
+          <Avatar size="200">
+            <UserAvatar
+              userId={member.userId}
+              src={avatarUrl ?? undefined}
+              alt={name}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </AvatarPresence>
       }
       after={
         typing && (
@@ -156,10 +165,16 @@
         )
       }
     >
-      <Box grow="Yes">
+      <Box direction="Column" grow="Yes">
         <Text size="T400" truncate style={{ color, fontFamily: font }}>
           {name}
         </Text>
+        {presence?.status && (
+          /*THE COLOR SHOULD BE BASED ON SOMETHING I CANT FIND*/
+          <Text size="T300" truncate style={{ color: '#888888', fontFamily: font }}>
+            {presence.status}
+          </Text>
+        )}
       </Box>
     </MenuItem>
   );