From caa1dd7404a8a15c0060067f8e67dde5cdaab6bf Mon Sep 17 00:00:00 2001
From: konsalex <konstantinos.alexoglou@grafana.com>
Date: Thu, 29 Jan 2026 21:51:17 +0100
Subject: [PATCH] feat: new muted labels

---
 tauri/src/components/ui/call-center.tsx      |  8 ++++++++
 tauri/src/components/ui/hopp-avatar.tsx      | 10 +++++++++-
 tauri/src/windows/main-window/tabs/Rooms.tsx |  8 ++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/tauri/src/components/ui/call-center.tsx b/tauri/src/components/ui/call-center.tsx
index a1833284..3de57d0e 100644
--- a/tauri/src/components/ui/call-center.tsx
+++ b/tauri/src/components/ui/call-center.tsx
@@ -89,6 +89,13 @@ export function ConnectedActions() {
   const callParticipant = teammates?.find((user) => user.id === callTokens?.participant);
   const [controllerCursorState, setControllerCursorState] = useState(true);
   const [accessibilityPermission, setAccessibilityPermission] = useState(true);
+  const remoteParticipants = useRemoteParticipants();
+
+  // Find the remote audio participant and check if they have microphone enabled
+  const remoteAudioParticipant = remoteParticipants.find(
+    (p) => p.identity.includes("audio") && callParticipant && p.identity.includes(callParticipant.id),
+  );
+  const isRemoteMuted = remoteAudioParticipant ? !remoteAudioParticipant.isMicrophoneEnabled : false;
 
   useScreenShareListener();
   const handleEndCall = useEndCall();
@@ -137,6 +144,7 @@ export function ConnectedActions() {
                   src={callParticipant?.avatar_url || undefined}
                   firstName={callParticipant?.first_name}
                   lastName={callParticipant?.last_name}
+                  isMuted={isRemoteMuted}
                 />
               )}
             </div>
diff --git a/tauri/src/components/ui/hopp-avatar.tsx b/tauri/src/components/ui/hopp-avatar.tsx
index 8d94f117..0374a2c4 100644
--- a/tauri/src/components/ui/hopp-avatar.tsx
+++ b/tauri/src/components/ui/hopp-avatar.tsx
@@ -1,5 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import { clsx } from "clsx";
+import { LuMicOff } from "react-icons/lu";
 
 type Status = "online" | "offline";
 
@@ -9,9 +10,10 @@ interface HoppAvatarProps {
   lastName: string;
   status?: Status;
   className?: string;
+  isMuted?: boolean;
 }
 
-export const HoppAvatar = ({ src, firstName, lastName, status, className }: HoppAvatarProps) => {
+export const HoppAvatar = ({ src, firstName, lastName, status, className, isMuted }: HoppAvatarProps) => {
   return (
     <div className="relative">
       <Avatar
@@ -26,6 +28,12 @@ export const HoppAvatar = ({ src, firstName, lastName, status, className }: Hopp
           {lastName[0]}
         </AvatarFallback>
       </Avatar>
+      {/* Absolute gray blanket for muted indicator */}
+      {isMuted && (
+        <div className="absolute flex items-center justify-center inset-0 bg-gray-500/40 rounded-md w-full h-full">
+          {isMuted && <LuMicOff className="size-4 text-white" />}
+        </div>
+      )}
       {status && (
         <div
           className={clsx("absolute bottom-0 right-0 size-2 outline-solid outline-3 outline-white rounded-full", {
diff --git a/tauri/src/windows/main-window/tabs/Rooms.tsx b/tauri/src/windows/main-window/tabs/Rooms.tsx
index cde3ec44..8878d839 100644
--- a/tauri/src/windows/main-window/tabs/Rooms.tsx
+++ b/tauri/src/windows/main-window/tabs/Rooms.tsx
@@ -33,6 +33,7 @@ import { Button } from "@/components/ui/button";
 import { HiMiniLink, HiMiniUser } from "react-icons/hi2";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { HiMagnifyingGlass, HiOutlinePencil, HiOutlineTrash } from "react-icons/hi2";
+import { LuMicOff } from "react-icons/lu";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { Constants } from "@/constants";
 import { useState } from "react";
@@ -553,6 +554,7 @@ const SelectedRoom = ({ room }: { room: Room }) => {
           participantId,
           user: foundUser,
           isLocal: participant.isLocal,
+          isMicrophoneEnabled: participant.isMicrophoneEnabled,
         };
       });
   }, [participants, teammates, user]);
@@ -597,6 +599,12 @@ const SelectedRoom = ({ room }: { room: Room }) => {
                       {participant.user.first_name} {participant.user.last_name}
                       {participant.isLocal && " (You)"}
                     </span>
+                    {!participant.isMicrophoneEnabled && (
+                      <span className="flex items-center gap-1 text-xs font-medium text-orange-500">
+                        <LuMicOff className="size-3" />
+                        <span className="mt-0.5">Muted</span>
+                      </span>
+                    )}
                   </div>
                 </>
               : <>