✨(frontend) notify user when hands are raised

Using toast, first draft of a toast notification inspired by Gmeet.
Users can open the waiting list to see all the raised hands.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RoomEvent } from 'livekit-client'
+import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
@@ -27,6 +27,45 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
+  // fixme - close all related toasters when hands are lowered remotely
+  useEffect(() => {
+    const decoder = new TextDecoder()
+
+    const handleNotificationReceived = (
+      payload: Uint8Array,
+      participant?: RemoteParticipant
+    ) => {
+      if (!participant) {
+        return
+      }
+      const notification = decoder.decode(payload)
+      const existingToast = toastQueue.visibleToasts.find(
+        (toast) =>
+          toast.content.participant === participant &&
+          toast.content.type === NotificationType.Raised
+      )
+      if (existingToast && notification === NotificationType.Lowered) {
+        toastQueue.close(existingToast.key)
+        return
+      }
+      if (!existingToast && notification === NotificationType.Raised) {
+        toastQueue.add(
+          {
+            participant,
+            type: NotificationType.Raised,
+          },
+          { timeout: 5000 }
+        )
+      }
+    }
+
+    room.on(RoomEvent.DataReceived, handleNotificationReceived)
+
+    return () => {
+      room.off(RoomEvent.DataReceived, handleNotificationReceived)
+    }
+  }, [room])
+
   return (
     <Div position="absolute" bottom={20} right={5} zIndex={1000}>
       <ToastProvider />

src/frontend/src/features/notifications/NotificationType.ts

@@ -1,4 +1,6 @@
 export enum NotificationType {
   Joined = 'joined',
   Default = 'default',
+  Raised = 'raised',
+  Lowered = 'lowered',
 }

src/frontend/src/features/notifications/components/ToastRaised.tsx

@@ -0,0 +1,66 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { Button, Div } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine, RiHand } from '@remixicon/react'
+import { useWidgetInteraction } from '@/features/rooms/livekit/hooks/useWidgetInteraction'
+
+export function ToastRaised({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
+    props,
+    state,
+    ref
+  )
+  const participant = props.toast.content.participant
+  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        <RiHand
+          color="white"
+          style={{
+            marginRight: '1rem',
+            animationDuration: '300ms',
+            animationName: 'wave_hand',
+            animationIterationCount: '2',
+          }}
+        />
+        <Div {...titleProps} marginRight={0.5}>
+          {t('raised.description', {
+            name: participant.name || t('defaultName'),
+          })}
+        </Div>
+        {!isParticipantsOpen && (
+          <Button
+            size="sm"
+            variant="text"
+            style={{
+              color: '#60a5fa',
+            }}
+            onPress={(e) => {
+              toggleParticipants()
+              closeButtonProps.onPress?.(e)
+            }}
+          >
+            {t('raised.cta')}
+          </Button>
+        )}
+        <Button square size="sm" invisible {...closeButtonProps}>
+          <RiCloseLine size={18} color="white" />
+        </Button>
+      </HStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -5,6 +5,7 @@ import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
 import { ToastJoined } from './ToastJoined'
 import { ToastData } from './ToastProvider'
+import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -19,6 +20,9 @@ export function ToastRegion({ state, ...props }: ToastRegionProps) {
         if (toast.content?.type === NotificationType.Joined) {
           return <ToastJoined key={toast.key} toast={toast} state={state} />
         }
+        if (toast.content?.type === NotificationType.Raised) {
+          return <ToastRaised key={toast.key} toast={toast} state={state} />
+        }
         return <Toast key={toast.key} toast={toast} state={state} />
       })}
     </div>

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

@@ -2,21 +2,33 @@ import { useTranslation } from 'react-i18next'
 import { RiHand } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useLocalParticipant } from '@livekit/components-react'
+import { useRoomContext } from '@livekit/components-react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { NotificationType } from '@/features/notifications/NotificationType'
 
 export const HandToggle = () => {
   const { t } = useTranslation('rooms')
 
-  const localParticipant = useLocalParticipant().localParticipant
+  const room = useRoomContext()
   const { isHandRaised, toggleRaisedHand } = useRaisedHand({
-    participant: localParticipant,
+    participant: room.localParticipant,
   })
 
   const label = isHandRaised
     ? t('controls.hand.lower')
     : t('controls.hand.raise')
 
+  const notifyOtherParticipants = (isHandRaised: boolean) => {
+    room.localParticipant.publishData(
+      new TextEncoder().encode(
+        !isHandRaised ? NotificationType.Raised : NotificationType.Lowered
+      ),
+      {
+        reliable: true,
+      }
+    )
+  }
+
   return (
     <div
       className={css({
@@ -30,7 +42,10 @@ export const HandToggle = () => {
         aria-label={label}
         tooltip={label}
         isSelected={isHandRaised}
-        onPress={() => toggleRaisedHand()}
+        onPress={() => {
+          notifyOtherParticipants(isHandRaised)
+          toggleRaisedHand()
+        }}
       >
         <RiHand />
       </ToggleButton>

src/frontend/src/locales/de/notifications.json

@@ -2,5 +2,9 @@
   "defaultName": "",
   "joined": {
     "description": ""
+  },
+  "raised": {
+    "description": "",
+    "cta": ""
   }
 }

src/frontend/src/locales/en/notifications.json

@@ -2,5 +2,9 @@
   "defaultName": "A contributor",
   "joined": {
     "description": "{{name}} join the room"
+  },
+  "raised": {
+    "description": "{{name}} raised its hand.",
+    "cta": "Open waiting list"
   }
 }

src/frontend/src/locales/fr/notifications.json

@@ -2,5 +2,9 @@
   "defaultName": "Un contributeur",
   "joined": {
     "description": "{{name}} participe à l'appel"
+  },
+  "raised": {
+    "description": "{{name}} a levé la main.",
+    "cta": "Ouvrir la file d'attente"
   }
 }

src/frontend/src/primitives/buttonRecipe.ts

@@ -77,6 +77,7 @@ export const buttonRecipe = cva({
         color: 'primary',
         '&[data-hovered]': {
           background: 'gray.100 !important',
+          color: 'primary !important',
         },
       },
       danger: {