♻️(frontend) refactor Chat toggle

This commit refactor the default chat toggle to enhance few details:

- styling (e.g. button's size, icon's style, etc)
- accessibility (e.g. tooltip, aria label, keyboard controls)
- notifications (enhanced contrast on the red dot, feedback from Arnaud)

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

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+import { RiChat1Line } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useLayoutContext } from '@livekit/components-react'
+
+export const ChatToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const { dispatch, state } = useLayoutContext().widget
+  const tooltipLabel = state?.showChat ? 'open' : 'closed'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.chat.${tooltipLabel}`)}
+        tooltip={t(`controls.chat.${tooltipLabel}`)}
+        isSelected={state?.showChat}
+        onPress={() => {
+          if (dispatch) dispatch({ msg: 'toggle_chat' })
+        }}
+      >
+        <RiChat1Line />
+      </Button>
+      {!!state?.unreadMessages && (
+        <div
+          className={css({
+            position: 'absolute',
+            top: '-.25rem',
+            right: '-.25rem',
+            width: '1rem',
+            height: '1rem',
+            backgroundColor: 'red',
+            borderRadius: '50%',
+            zIndex: 1,
+            border: '2px solid #d1d5db',
+          })}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -4,8 +4,6 @@ import * as React from 'react'
 import { supportsScreenSharing } from '@livekit/components-core'
 
 import {
-  ChatIcon,
-  ChatToggle,
   DisconnectButton,
   LeaveIcon,
   MediaDeviceMenu,
@@ -19,7 +17,8 @@ import { StartMediaButton } from '../components/controls/StartMediaButton'
 import { useMediaQuery } from '../hooks/useMediaQuery'
 import { useTranslation } from 'react-i18next'
 import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx'
+import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
 
 /** @public */
 export type ControlBarControls = {
@@ -184,10 +183,7 @@ export function ControlBar({
             )}
         </TrackToggle>
       )}
-      <ChatToggle>
+      <ChatToggle />
-        {showIcon && <ChatIcon />}
-        {showText && t('controls.chat')}
-      </ChatToggle>
       <ParticipantsToggle />
       <OptionsButton />
       <DisconnectButton>

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

@@ -28,7 +28,10 @@
     "camera": "",
     "shareScreen": "",
     "stopScreenShare": "",
-    "chat": "",
+    "chat": {
+      "open": "",
+      "closed": ""
+    },
     "leave": "",
     "participants": {
       "open": "",

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

@@ -28,7 +28,10 @@
     "camera": "Camera",
     "shareScreen": "Share screen",
     "stopScreenShare": "Stop screen share",
-    "chat": "Chat",
+    "chat": {
+      "open": "Close the chat",
+      "closed": "Open the chat"
+    },
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",

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

@@ -28,7 +28,10 @@
     "camera": "Camera",
     "shareScreen": "Partager l'écran",
     "stopScreenShare": "Arrêter le partage",
-    "chat": "Chat",
+    "chat": {
+      "open": "Masquer le chat",
+      "closed": "Afficher le chat"
+    },
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",