From de08a4775c178d863ece3cbe60ee2e3711555134 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Tue, 3 Mar 2026 16:50:54 -0500
Subject: [PATCH] Add a right around user avatar when speaking

---
 src/app/components/VoiceRoomItem.svelte | 12 ++++++++++--
 src/app/voice.ts                        |  8 ++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/components/VoiceRoomItem.svelte b/src/app/components/VoiceRoomItem.svelte
index 2ba3edf9..94e43697 100644
--- a/src/app/components/VoiceRoomItem.svelte
+++ b/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>
diff --git a/src/app/voice.ts b/src/app/voice.ts
index ff7b7f74..884eb3e1 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -46,6 +46,8 @@ export type VoiceSession = {
 
 export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
 
+export const speakingPubkeys = writable<Set<string>>(new Set())
+
 const fetchLivekitToken = async (
   url: string,
   groupId: string,
@@ -157,6 +159,7 @@ export const joinVoiceRoom = async (
   })
 
   room.on(RoomEvent.Disconnected, (reason?: DisconnectReason) => {
+    speakingPubkeys.set(new Set())
     currentVoiceSession.set(undefined)
     stopPresenceHeartbeat()
     if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
@@ -181,6 +184,10 @@ export const joinVoiceRoom = async (
     track.detach().forEach(el => el.remove())
   })
 
+  room.on(RoomEvent.ActiveSpeakersChanged, participants => {
+    speakingPubkeys.set(new Set(participants.map(p => p.identity)))
+  })
+
   const onAbort = () => {
     room.disconnect()
   }
@@ -225,6 +232,7 @@ export const leaveVoiceRoom = async () => {
   const session = get(currentVoiceSession)
   if (!session) return
 
+  speakingPubkeys.set(new Set())
   stopPresenceHeartbeat()
   session.room.disconnect()
   deletePresence(session.url)