jared
b5d831cc12
- PresenceRingAvatar: replace circular wrapper div (borderRadius 50%) with React.cloneElement injecting outline+outlineOffset directly onto the child Avatar element — outline follows the child's actual border-radius so the ring matches the avatar shape in every context - EditHistoryModal: use getClearContent() for the Original entry instead of evt.event.content, which is still the ciphertext for E2EE messages and has no body field. getClearContent() returns decrypted content bypassing the _replacingEvent chain, fixing the "(no text)" shown for encrypted originals - MessageQuickReactions: 5 → 3 emoji (toolbar too wide with 5) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { color } from 'folds';
|
|
import { Presence, useUserPresence } from '../../hooks/useUserPresence';
|
|
|
|
function presenceRingColor(presence: Presence | undefined, status?: string): string | null {
|
|
if (!presence || presence === Presence.Offline) return null;
|
|
if (presence === Presence.Unavailable) {
|
|
return status === 'dnd' ? color.Critical.Main : color.Warning.Main;
|
|
}
|
|
return color.Success.Main;
|
|
}
|
|
|
|
type PresenceRingAvatarProps = {
|
|
userId: string;
|
|
children: React.ReactElement<{ style?: CSSProperties }>;
|
|
};
|
|
|
|
export function PresenceRingAvatar({ userId, children }: PresenceRingAvatarProps) {
|
|
const presence = useUserPresence(userId);
|
|
const ringColor = presenceRingColor(presence?.presence, presence?.status);
|
|
|
|
if (!ringColor) return <>{children}</>;
|
|
|
|
// Apply outline directly to the child so it follows the child's actual border-radius.
|
|
// outline follows border-radius in Chrome 94+, Firefox 88+, Safari 16.4+.
|
|
// This avoids the mismatch of a circular wrapper around a rounded-square avatar.
|
|
return React.cloneElement(children, {
|
|
style: {
|
|
...children.props.style,
|
|
outline: `2px solid ${ringColor}`,
|
|
outlineOffset: '2px',
|
|
},
|
|
});
|
|
}
|