Add a right around user avatar when speaking

src/app/components/VoiceRoomItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {loadProfile, displayProfileByPubkey} from "@welshman/app"
   import Volume from "@assets/icons/volume.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -12,6 +13,7 @@
     joinVoiceRoom,
     leaveVoiceRoom,
     currentVoiceSession,
+    speakingPubkeys,
   } from "@app/voice"
 
   interface Props {
@@ -71,10 +73,16 @@
     <RoomName {url} {h} />
   </SecondaryNavItem>
   {#if $participants.length > 0}
-    <div class="flex flex-col gap-1 pb-1 pl-10">
+    <div class="mt-2 flex flex-col gap-1 pb-1 pl-10">
       {#each $participants as pk (pk)}
         <div class="flex items-center gap-2">
-          <ProfileCircle pubkey={pk} size={5} class="h-5 w-5" />
+          <div
+            class={cx(
+              "inline-flex shrink-0 items-center justify-center rounded-full transition-shadow",
+              isActive && $speakingPubkeys.has(pk) && "ring-2 ring-success",
+            )}>
+            <ProfileCircle pubkey={pk} size={5} class="h-5 w-5" />
+          </div>
           <span class="ellipsize text-xs opacity-70">
             {displayProfileByPubkey(pk)}
           </span>