✨(frontend) introduce raise hand control

Inspired by Magnify. Rely on participant metadata to determine,
if the local user has raised its hand.

There is a todo item in LiveKit code, useLocalParticipant is not
subscribed to metadata updates events.

The contrast of the toggled button in legacy Style is poor,
it needs to be urgently improved. User can barely distinguish if
their hands are raised.

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next'
+import { RiHand } from '@remixicon/react'
+import { ToggleButton } from '@/primitives'
+import { css } from '@/styled-system/css'
+import {
+  useLocalParticipant,
+  useParticipantInfo,
+} from '@livekit/components-react'
+
+export const HandToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const localParticipant = useLocalParticipant().localParticipant
+  const { metadata } = useParticipantInfo({ participant: localParticipant })
+
+  const parsedMetadata = JSON.parse(metadata || '{}')
+
+  const sendRaise = () => {
+    parsedMetadata.raised = !parsedMetadata.raised
+    localParticipant.setMetadata(JSON.stringify(parsedMetadata))
+  }
+
+  const label = parsedMetadata.raised
+    ? t('controls.hand.lower')
+    : t('controls.hand.raise')
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <ToggleButton
+        square
+        legacyStyle
+        aria-label={label}
+        tooltip={label}
+        isSelected={parsedMetadata.raised}
+        onPress={() => sendRaise()}
+      >
+        <RiHand />
+      </ToggleButton>
+    </div>
+  )
+}