♻️(frontend) extract action icon button in a component

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.

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>
+  )
+}

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
+        {isMuted ? (
-          isDisabled={isDisabled}
+          <RiMicOffLine color="gray" />
-          className={css({
+        ) : (
-            padding: '10px',
+          <ActiveSpeaker isSpeaking={isSpeaking} />
-            minWidth: '24px',
+        )}
-            minHeight: '24px',
+      </ListItemActionButton>
-            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>
       <MuteAlertDialog
         isOpen={isAlertOpen}
         onSubmit={() =>