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}

src/app/features/room/message/styles.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { DefaultReset, config, toRem } from 'folds';
+import { DefaultReset, config, toRem, color } from 'folds';
 
 export const MessageBase = style({
   position: 'relative',
@@ -30,6 +30,40 @@ export const BubbleAvatarBase = style({
 
 export const MessageAvatar = style({
   cursor: 'pointer',
+  position: 'relative',
+  overflow: 'visible',
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    left: '-6px',
+    top: '0%',
+    height: '100%',
+    width: '4px',
+    borderTopLeftRadius: '5px',
+    borderBottomLeftRadius: '5px',
+    zIndex: 1,
+    backgroundColor: 'transparent',
+  },
+});
+
+export const MessageAvatarOnline = style({
+  '::before': {
+    backgroundColor: '#38842b',
+  },
+});
+
+export const MessageAvatarUnavailable = style({
+  '::before': {
+    backgroundColor: '#959e30',
+  },
+});
+
+export const MessageAvatarOffline = style({
+  '::before': {
+    backgroundColor: '#454545',
+  },
 });
 
 export const MessageQuickReaction = style({