use green border for presence avatar

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">

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>