From 59ec88e84a95e1bc39538cfc3212acd7c0fef96e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 2 Sep 2024 19:06:10 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20extract=20action?=
 =?UTF-8?q?=20icon=20button=20in=20a=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Will need it for lower hand action.
Actually, this piece of code should be enhanced. It'll act
as a corner stone of all actions dispatched in the interface.

I'll continue refactoring it later on.
---
 .../Participants/ListItemActionButton.tsx     | 39 +++++++++++++++++++
 .../Participants/ParticipantListItem.tsx      | 39 +++++--------------
 2 files changed, 49 insertions(+), 29 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx
new file mode 100644
index 00000000..aa885a42
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ListItemActionButton.tsx
@@ -0,0 +1,39 @@
+import { styled } from '@/styled-system/jsx'
+import {
+  Button as RACButton,
+  ButtonProps as RACButtonsProps,
+} from 'react-aria-components'
+import {
+  TooltipWrapper,
+  TooltipWrapperProps,
+} from '@/primitives/TooltipWrapper'
+
+const StyledButton = styled(RACButton, {
+  base: {
+    padding: '10px',
+    minWidth: '24px',
+    minHeight: '24px',
+    borderRadius: '50%',
+    backgroundColor: 'transparent',
+    transition: 'background 200ms',
+    '&[data-hovered]': {
+      backgroundColor: '#f5f5f5',
+    },
+    '&[data-focused]': {
+      backgroundColor: '#f5f5f5',
+    },
+  },
+})
+
+export const ListItemActionButton = ({
+  tooltip,
+  tooltipType = 'instant',
+  children,
+  ...props
+}: RACButtonsProps & TooltipWrapperProps) => {
+  return (
+    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+      <StyledButton {...props}>{children}</StyledButton>
+    </TooltipWrapper>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index f0f88fe8..3dfa7a82 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -7,7 +7,6 @@ import { Avatar } from '@/components/Avatar'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 import { Participant, Track } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
-import { Button as RACButton } from 'react-aria-components'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
   useIsSpeaking,
@@ -15,10 +14,10 @@ import {
 } from '@livekit/components-react'
 import Source = Track.Source
 import { RiMicOffLine } from '@remixicon/react'
-import { TooltipWrapper } from '@/primitives/TooltipWrapper.tsx'
 import { Button, Dialog, P } from '@/primitives'
 import { useState } from 'react'
 import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
+import { ListItemActionButton } from '@/features/rooms/livekit/components/controls/Participants/ListItemActionButton'
 
 const MuteAlertDialog = ({
   isOpen,
@@ -67,37 +66,19 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
 
   return (
     <>
-      <TooltipWrapper
+      <ListItemActionButton
         tooltip={t('participants.muteParticipant', {
           name,
         })}
-        tooltipType="instant"
+        isDisabled={isDisabled}
+        onPress={() => !isMuted && setIsAlertOpen(true)}
       >
-        <RACButton
-          isDisabled={isDisabled}
-          className={css({
-            padding: '10px',
-            minWidth: '24px',
-            minHeight: '24px',
-            borderRadius: '50%',
-            backgroundColor: 'transparent',
-            transition: 'background 200ms',
-            '&[data-hovered]': {
-              backgroundColor: '#f5f5f5',
-            },
-            '&[data-focused]': {
-              backgroundColor: '#f5f5f5',
-            },
-          })}
-          onPress={() => !isMuted && setIsAlertOpen(true)}
-        >
-          {isMuted ? (
-            <RiMicOffLine color="gray" />
-          ) : (
-            <ActiveSpeaker isSpeaking={isSpeaking} />
-          )}
-        </RACButton>
-      </TooltipWrapper>
+        {isMuted ? (
+          <RiMicOffLine color="gray" />
+        ) : (
+          <ActiveSpeaker isSpeaking={isSpeaking} />
+        )}
+      </ListItemActionButton>
       <MuteAlertDialog
         isOpen={isAlertOpen}
         onSubmit={() =>