🐛(frontend) fix nested React components in participant list

Refactor participant list to avoid nested React component definitions
that lose state on parent re-renders and cause unnecessary recreation.

Moves component definitions outside render methods to prevent state loss
bugs and improve performance by eliminating redundant component
instantiation on each parent render cycle.

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { ToggleButton } from 'react-aria-components'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
@@ -51,7 +51,7 @@ export type ParticipantsCollapsableListProps<T> = {
   heading: string
   participants: Array<T>
   renderParticipant: (participant: T) => JSX.Element
-  action?: () => JSX.Element
+  action?: ReactNode
 }
 
 export function ParticipantsCollapsableList<T>({
@@ -101,7 +101,7 @@ export function ParticipantsCollapsableList<T>({
       </ToggleHeader>
       {isOpen && (
         <ListContainer>
-          {action && action()}
+          {action}
           {participants.map((participant) => renderParticipant(participant))}
         </ListContainer>
       )}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -75,7 +75,7 @@ export const ParticipantsList = () => {
                 onAction={handleParticipantEntry}
               />
             )}
-            action={() => <></>}
+            action={<></>}
           />
         </Div>
       )}
@@ -90,9 +90,9 @@ export const ParticipantsList = () => {
                 participant={participant}
               />
             )}
-            action={() => (
+            action={
               <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
+            }
           />
         </Div>
       )}
@@ -105,9 +105,7 @@ export const ParticipantsList = () => {
             participant={participant}
           />
         )}
-        action={() => (
-          <MuteEveryoneButton participants={sortedRemoteParticipants} />
-        )}
+        action={<MuteEveryoneButton participants={sortedRemoteParticipants} />}
       />
     </Div>
   )