From 47e2d85471b0ac6d563c4acd8dee3096d9b9f261 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 12 Aug 2024 16:41:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refactor=20Chat?=
 =?UTF-8?q?=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 .../components/controls/ChatToggle.tsx        | 50 +++++++++++++++++++
 .../rooms/livekit/prefabs/ControlBar.tsx      | 10 ++--
 src/frontend/src/locales/de/rooms.json        |  5 +-
 src/frontend/src/locales/en/rooms.json        |  5 +-
 src/frontend/src/locales/fr/rooms.json        |  5 +-
 5 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
new file mode 100644
index 00000000..d91ab100
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
index d609fd29..6361eef8 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
+++ b/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>
-        {showIcon && <ChatIcon />}
-        {showText && t('controls.chat')}
-      </ChatToggle>
+      <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />
       <DisconnectButton>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 945cbd39..08429a92 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -28,7 +28,10 @@
     "camera": "",
     "shareScreen": "",
     "stopScreenShare": "",
-    "chat": "",
+    "chat": {
+      "open": "",
+      "closed": ""
+    },
     "leave": "",
     "participants": {
       "open": "",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index b150ac9b..9bf62669 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/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",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 1aefe69e..33ac61ca 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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",