💩(frontend) indicate when a participant raises her hand

Height was varying when muting/unmuting the mic, so I added a minimum height to
avoid layout shift.

Proof of concept for the future UX: a raised hand would be placed on
the left side of the participant's name.

Having the mic indicator and raised hand side by side is temporary and totally
undesired (it feels super weird). I'll refactor the whole UX of the participant
tile in a dedicated PR.

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

@@ -25,6 +25,8 @@ import {
 } from '@livekit/components-core'
 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'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -84,6 +86,10 @@ export const ParticipantTile: (
     [trackReference, layoutContext]
   )
 
+  const { isHandRaised } = useRaisedHand({
+    participant: trackReference.participant,
+  })
+
   return (
     <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
@@ -113,9 +119,23 @@ export const ParticipantTile: (
                 />
               </div>
               <div className="lk-participant-metadata">
-                <div className="lk-participant-metadata-item">
+                <div
+                  className="lk-participant-metadata-item"
+                  style={{
+                    minHeight: '24px',
+                  }}
+                >
                   {trackReference.source === Track.Source.Camera ? (
                     <>
+                      {isHandRaised && (
+                        <RiHand
+                          color="white"
+                          size={16}
+                          style={{
+                            marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
+                          }}
+                        />
+                      )}
                       {isEncrypted && (
                         <LockLockedIcon style={{ marginRight: '0.25rem' }} />
                       )}