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

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next'
 import { OptionsButton } from '../components/controls/Options/OptionsButton'
 import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
 import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
 
 /** @public */
 export type ControlBarControls = {
@@ -183,6 +184,7 @@ export function ControlBar({
             )}
         </TrackToggle>
       )}
+      <HandToggle />
       <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />

src/frontend/src/locales/de/rooms.json

@@ -32,6 +32,10 @@
       "open": "",
       "closed": ""
     },
+    "hand": {
+      "raise": "",
+      "lower": ""
+    },
     "leave": "",
     "participants": {
       "open": "",

src/frontend/src/locales/en/rooms.json

@@ -32,6 +32,10 @@
       "open": "Close the chat",
       "closed": "Open the chat"
     },
+    "hand": {
+      "raise": "Raise hand",
+      "lower": "Lower hand"
+    },
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",

src/frontend/src/locales/fr/rooms.json

@@ -32,6 +32,10 @@
       "open": "Masquer le chat",
       "closed": "Afficher le chat"
     },
+    "hand": {
+      "raise": "Lever la main",
+      "lower": "Baisser la main"
+    },
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",