♻️(frontend) disable participant's tile metadata

Inspired by the props disableSpeakingIndicator, used the same
logic for all metadata displayed on hover on a participant's tile.

Why? I'll need to render the joining participant tile without any
metadata, so the participant see who is joining the room.

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

@@ -44,19 +44,24 @@ export function TrackRefContextIfNeeded(
   )
 }
 
+interface ParticipantTileExtendedProps extends ParticipantTileProps {
+  disableMetadata?: boolean
+}
+
 export const ParticipantTile: (
-  props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>
+  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
   HTMLDivElement,
-  ParticipantTileProps
+  ParticipantTileExtendedProps
 >(function ParticipantTile(
   {
     trackRef,
     children,
     onParticipantClick,
     disableSpeakingIndicator,
+    disableMetadata,
     ...htmlProps
-  }: ParticipantTileProps,
+  }: ParticipantTileExtendedProps,
   ref
 ) {
   const trackReference = useEnsureTrackRef(trackRef)
@@ -119,9 +124,12 @@ export const ParticipantTile: (
                   participant={trackReference.participant}
                 />
               </div>
+              {!disableMetadata && (
                 <div className="lk-participant-metadata">
                   <HStack gap={0.25}>
-                  <MutedMicIndicator participant={trackReference.participant} />
+                    <MutedMicIndicator
+                      participant={trackReference.participant}
+                    />
                     <div
                       className="lk-participant-metadata-item"
                       style={{
@@ -146,7 +154,9 @@ export const ParticipantTile: (
                             />
                           )}
                           {isEncrypted && (
-                          <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+                            <LockLockedIcon
+                              style={{ marginRight: '0.25rem' }}
+                            />
                           )}
                           <ParticipantName />
                         </>
@@ -160,9 +170,10 @@ export const ParticipantTile: (
                   </HStack>
                   <ConnectionQualityIndicator className="lk-participant-metadata-item" />
                 </div>
+              )}
             </>
           )}
-          <FocusToggle trackRef={trackReference} />
+          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
     </div>