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>
+  );
+}