🚸(frontend) enhance muted mic indicator

Users' feedbacks. Design is inspired from Whereby, a webinars
product. I am not a huge fan of having the indicator on the
left of the participant's name. It causes a shift of the name
when the participant unmute herself.

This should be discussed with the UX designer.

src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx

@@ -0,0 +1,26 @@
+import { useTrackMutedIndicator } from '@livekit/components-react'
+import { Participant, Track } from 'livekit-client'
+import Source = Track.Source
+import { Div } from '@/primitives'
+import { RiMicOffFill } from '@remixicon/react'
+
+export const MutedMicIndicator = ({
+  participant,
+}: {
+  participant: Participant
+}) => {
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Source.Microphone,
+  })
+
+  if (!isMuted) {
+    return null
+  }
+
+  return (
+    <Div padding={0.25} backgroundColor="red" borderRadius="4px">
+      <RiMicOffFill size={16} color="white" />
+    </Div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -6,7 +6,6 @@ import {
   ParticipantName,
   ParticipantTileProps,
   ScreenShareIcon,
-  TrackMutedIndicator,
   useEnsureTrackRef,
   useFeatureContext,
   useIsEncrypted,
@@ -27,6 +26,8 @@ import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
 import { RiHand } from '@remixicon/react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { HStack } from '@/styled-system/jsx'
+import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -119,6 +120,8 @@ export const ParticipantTile: (
                 />
               </div>
               <div className="lk-participant-metadata">
+                <HStack gap={0.25}>
+                  <MutedMicIndicator participant={trackReference.participant} />
                   <div
                     className="lk-participant-metadata-item"
                     style={{
@@ -145,13 +148,6 @@ export const ParticipantTile: (
                         {isEncrypted && (
                           <LockLockedIcon style={{ marginRight: '0.25rem' }} />
                         )}
-                      <TrackMutedIndicator
-                        trackRef={{
-                          participant: trackReference.participant,
-                          source: Track.Source.Microphone,
-                        }}
-                        show={'muted'}
-                      ></TrackMutedIndicator>
                         <ParticipantName />
                       </>
                     ) : (
@@ -161,6 +157,7 @@ export const ParticipantTile: (
                       </>
                     )}
                   </div>
+                </HStack>
                 <ConnectionQualityIndicator className="lk-participant-metadata-item" />
               </div>
             </>