feat: add PresenceAvatar component with presence indicator styles

src/app/features/room/message/Message.tsx

@@ -79,6 +79,7 @@ import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
+import { Presence, useUserPresence } from '../../../hooks/useUserPresence';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -723,6 +724,7 @@ export const Message = as<'div', MessageProps>(
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const senderId = mEvent.getSender() ?? '';
+    const senderPresence = useUserPresence(senderId);
 
     const [hover, setHover] = useState(false);
     const { hoverProps } = useHover({ onHoverChange: setHover });
@@ -790,12 +792,20 @@ export const Message = as<'div', MessageProps>(
       </Box>
     );
 
+    const presenceClass = senderPresence?.presence === Presence.Online
+      ? css.MessageAvatarOnline
+      : senderPresence?.presence === Presence.Unavailable
+        ? css.MessageAvatarUnavailable
+        : senderPresence?.presence === Presence.Offline
+          ? css.MessageAvatarOffline
+          : undefined;
+
     const avatarJSX = !collapse && messageLayout !== MessageLayout.Compact && (
       <AvatarBase
         className={messageLayout === MessageLayout.Bubble ? css.BubbleAvatarBase : undefined}
       >
         <Avatar
-          className={css.MessageAvatar}
+          className={classNames(css.MessageAvatar, presenceClass)}
           as="button"
           size="300"
           data-user-id={senderId}