feat: add PresenceAvatar component with presence indicator styles

src/app/components/presence/PresenceAvatar.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import * as css from './styles.css';
+import { Presence } from '../../hooks/useUserPresence';
+
+type PresenceAvatarProps = {
+  /** The presence state to display */
+  presence?: Presence;
+  /** The avatar element to wrap */
+  children: ReactNode;
+  /** Additional className */
+  className?: string;
+};
+
+/**
+ * Wraps an avatar with a left-side presence indicator border.
+ * Shows green for online, yellow/orange for unavailable/away, grey for offline.
+ */
+export function PresenceAvatar({ presence, children, className }: PresenceAvatarProps) {
+  if (!presence) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      className={classNames(css.PresenceAvatarContainer, css.PresenceIndicator, className, {
+        [css.PresenceOnline]: presence === Presence.Online,
+        [css.PresenceUnavailable]: presence === Presence.Unavailable,
+        [css.PresenceOffline]: presence === Presence.Offline,
+      })}
+    >
+      {children}
+    </div>
+  );
+}

src/app/components/presence/index.ts

@@ -1 +1,2 @@
 export * from './Presence';
+export * from './PresenceAvatar';

src/app/components/presence/styles.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { config, color } from 'folds';
 
 export const AvatarPresence = style({
   display: 'flex',
@@ -20,3 +20,41 @@ export const AvatarPresenceBadge = style({
   borderRadius: config.radii.Pill,
   overflow: 'hidden',
 });
+
+export const PresenceAvatarContainer = style({
+  display: 'flex',
+  position: 'relative',
+  flexShrink: 0,
+  alignSelf: 'flex-start',
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    left: 0,
+    top: '10%',
+    height: '80%',
+    width: '3px',
+    borderTopRightRadius: '2px',
+    borderBottomRightRadius: '2px',
+    zIndex: 1,
+  },
+});
+
+export const PresenceIndicator = style({});
+
+export const PresenceOnline = style({
+  '::before': {
+    backgroundColor: color.Success.Main,
+  },
+});
+
+export const PresenceUnavailable = style({
+  '::before': {
+    backgroundColor: color.Warning.Main,
+  },
+});
+
+export const PresenceOffline = style({
+  '::before': {
+    backgroundColor: color.Secondary.Main,
+  },
+});