From bea33d29d3a1613caf18ab2253619f4f6af0590b Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Thu, 9 Apr 2026 12:17:55 -0700
Subject: [PATCH] use green border for presence avatar

---
 js/src/features/particles/playback-page-indicator.tsx | 7 ++-----
 js/src/features/particles/stream-view.tsx             | 5 ++---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/js/src/features/particles/playback-page-indicator.tsx b/js/src/features/particles/playback-page-indicator.tsx
index d7d1bee..89b4c6f 100644
--- a/js/src/features/particles/playback-page-indicator.tsx
+++ b/js/src/features/particles/playback-page-indicator.tsx
@@ -1,4 +1,4 @@
-import { Avatar, AvatarBadge, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
   Tooltip,
   TooltipContent,
@@ -90,13 +90,10 @@ function SegmentPresenceAvatars({
       {visible.map((human) => (
         <Tooltip key={human.humanId}>
           <TooltipTrigger asChild>
-            <Avatar size="xs" className="ring-1 ring-black/50">
+            <Avatar size="xs" className={onlineHumanIds?.has(human.humanId) ? "ring-2 ring-green-500" : "ring-1 ring-black/50"}>
               <AvatarFallback>
                 {human.emailPrefix.slice(0, 2).toUpperCase()}
               </AvatarFallback>
-              {onlineHumanIds?.has(human.humanId) && (
-                <AvatarBadge className="bg-green-500" />
-              )}
             </Avatar>
           </TooltipTrigger>
           <TooltipContent side="top" className="text-xs">
diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index 54f21c0..a1d3024 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -9,7 +9,7 @@ import { PlaybackPageIndicator } from "@/features/particles/playback-page-indica
 import { MediaParticleView, type MediaParticleHandle } from "@/features/particles/media-particle-view";
 import { TextParticleView } from "@/features/particles/text-particle-view";
 import { FallbackParticleView } from "@/features/particles/fallback-particle-view";
-import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { VideoAudioToggle } from "@/components/video-audio-toggle";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
 import { KeybindingsOverlay, type KeybindingGroup } from "@/components/keybindings-overlay";
@@ -764,11 +764,10 @@ function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle
 
   return (
     <span className="flex items-center gap-1.5">
-      <Avatar size="sm">
+      <Avatar size="sm" className={isOnline ? "ring-2 ring-green-500" : ""}>
         <AvatarFallback>
           {initials}
         </AvatarFallback>
-        {isOnline && <AvatarBadge className="bg-green-500" />}
       </Avatar>
       {prefix} - <RelativeTimestamp date={particle.created_at} />
     </span>