use green border for presence avatar

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>