From c23ac843b5f659f4aa813718a84d6e747552f23e Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 3 Mar 2026 05:20:46 +0200 Subject: [PATCH 1/5] added basic status besides the user avatar on hero --- src/app/components/user-profile/UserHero.tsx | 98 ++++++++++--------- src/app/components/user-profile/styles.css.ts | 17 +++- 2 files changed, 67 insertions(+), 48 deletions(-) diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index a538c803ce..66d11543cc 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -9,6 +9,7 @@ import { OverlayBackdrop, OverlayCenter, Text, + Tooltip, } from 'folds'; import classNames from 'classnames'; import FocusTrap from 'focus-trap-react'; @@ -17,7 +18,7 @@ import { UserAvatar } from '../user-avatar'; import colorMXID from '$util/colorMXID'; import { getMxIdLocalPart } from '$appUtils/matrix'; import { BreakWord, LineClamp3 } from '$styles/Text.css'; -import { UserPresence } from '$hooks/useUserPresence'; +import { Presence, UserPresence } from '$hooks/useUserPresence'; import { AvatarPresence, PresenceBadge } from '../presence'; import { ImageViewer } from '../image-viewer'; import { stopPropagation } from '$appUtils/keyboard'; @@ -58,51 +59,60 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroPro /> )} -
- - } - > - setViewAvatar(avatarUrl) : undefined} - className={css.UserHeroAvatar} - size="500" + +
+ + } > - } - /> - - - {viewAvatar && ( - }> - - setViewAvatar(undefined), - clickOutsideDeactivates: true, - escapeDeactivates: stopPropagation, - }} - > - evt.stopPropagation()}> - setViewAvatar(undefined)} - /> - - - - + setViewAvatar(avatarUrl) : undefined} + className={css.UserHeroAvatar} + size="500" + > + } + /> + + + {viewAvatar && ( + }> + + setViewAvatar(undefined), + clickOutsideDeactivates: true, + escapeDeactivates: stopPropagation, + }} + > + evt.stopPropagation()}> + setViewAvatar(undefined)} + /> + + + + + )} +
+ {presence?.status?.length && ( +
+ + {presence.status} + +
)} -
+ ); } diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 33fcd0965b..eaa3af5a22 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -30,18 +30,27 @@ 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', +}); export const UserHeroAvatar = style({ outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`, selectors: { From 25412baaa637f787c22f7bb53fe07baf0a0fdf35 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 3 Mar 2026 05:38:58 +0200 Subject: [PATCH 2/5] cleared the hover presence message --- src/app/components/presence/Presence.tsx | 2 -- src/app/components/user-profile/UserHero.tsx | 4 +--- src/app/components/user-profile/styles.css.ts | 1 + 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx index 7bd8757906..0edf4af736 100644 --- a/src/app/components/presence/Presence.tsx +++ b/src/app/components/presence/Presence.tsx @@ -39,8 +39,6 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) { {label[presence]} - {status && •} - {status && {status}} } diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index 66d11543cc..e58e1070fd 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -63,9 +63,7 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroPro
- } + badge={presence && } > Date: Tue, 3 Mar 2026 06:25:29 +0200 Subject: [PATCH 3/5] added presence badge on member drawer --- src/app/components/presence/Presence.tsx | 2 +- src/app/features/room/MembersDrawer.tsx | 25 ++++++++++++++++-------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx index 0edf4af736..f578dbcd50 100644 --- a/src/app/components/presence/Presence.tsx +++ b/src/app/components/presence/Presence.tsx @@ -25,7 +25,7 @@ type PresenceBadgeProps = { 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(); diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index 5384484cd7..3d6d17c103 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -59,6 +59,9 @@ import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '$hooks/useMembe import { useRoomCreators } from '$hooks/useRoomCreators'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; +import { AvatarPresence, PresenceBadge } from '$components/presence'; +import { useUserPresence } from '$hooks/useUserPresence'; + type MemberDrawerHeaderProps = { room: Room; }; @@ -128,6 +131,8 @@ function MemberItem({ ? 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 @@ function MemberItem({ radii="400" onClick={onClick} before={ - - } - /> - + } + > + + } + /> + + } after={ typing && ( From 72a7a2070fd68a5fc1457a81ac60ef68ffa02115 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 3 Mar 2026 06:47:33 +0200 Subject: [PATCH 4/5] added the status to the member drawer if present per person --- src/app/features/room/MembersDrawer.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index 3d6d17c103..6e7453a744 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -165,10 +165,16 @@ function MemberItem({ ) } > - + {name} + {presence?.status && ( + /*THE COLOR SHOULD BE BASED ON SOMETHING I CANT FIND*/ + + {presence.status} + + )} ); From f677571d69173cb3451623c84dbbe1522d22068a Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 3 Mar 2026 06:53:11 +0200 Subject: [PATCH 5/5] left justified the status text in the hero --- src/app/components/user-profile/UserHero.tsx | 2 +- src/app/components/user-profile/styles.css.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index e58e1070fd..26d1e90871 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -105,7 +105,7 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroPro
{presence?.status?.length && (
- + {presence.status}
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 020b3da9fc..748a7e3ca0 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -51,6 +51,7 @@ export const UserHeroStatusContainer = style({ textAlign: 'justify', display: 'grid', width: '100%', + paddingLeft: '2%', }); export const UserHeroAvatar = style({ outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,