diff --git a/src/renderer/components/team/MemberBadge.tsx b/src/renderer/components/team/MemberBadge.tsx index fb5981c2..942c6022 100644 --- a/src/renderer/components/team/MemberBadge.tsx +++ b/src/renderer/components/team/MemberBadge.tsx @@ -26,6 +26,8 @@ interface MemberBadgeProps { teamName?: string; /** Avatar + badge size variant */ size?: 'xs' | 'sm' | 'md'; + /** Pre-resolved avatar URL from a caller that already owns the member roster. */ + avatarUrl?: string; /** Hide the avatar icon, show only the name badge */ hideAvatar?: boolean; onClick?: (name: string) => void; @@ -59,6 +61,7 @@ export const MemberBadge = memo( color, teamName, size = 'sm', + avatarUrl, hideAvatar, onClick, disableHoverCard, @@ -66,7 +69,7 @@ export const MemberBadge = memo( const colors = getTeamColorSet(color ?? ''); const { isLight } = useTheme(); const effectiveAvatarTeamName = useStore((s) => - hideAvatar ? null : (teamName ?? s.selectedTeamName) + hideAvatar || avatarUrl != null ? null : (teamName ?? s.selectedTeamName) ); const teamMembers = useStore((s) => effectiveAvatarTeamName @@ -87,7 +90,7 @@ export const MemberBadge = memo( const avatar = ( buildMemberColorMap(members), [members]); + const avatarMap = useMemo(() => buildMemberAvatarMap(members), [members]); const mentionSuggestions = useMemo( () => @@ -1129,6 +1130,7 @@ export const MessageComposer = ({ name={recipient} color={selectedResolvedColor} size="sm" + avatarUrl={avatarMap.get(recipient)} hideAvatar={recipient === 'user'} disableHoverCard /> @@ -1207,6 +1209,7 @@ export const MessageComposer = ({ name={m.name} color={resolvedColor} size="sm" + avatarUrl={avatarMap.get(m.name)} hideAvatar={m.name === 'user'} disableHoverCard />