From 101be503bf3568c05d2bcbb9d66a43e27e9aa874 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 12 Aug 2024 16:48:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20fix=20widget=20state?=
 =?UTF-8?q?=20management?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The current design is inefficient, using two separate approaches to manage
the app state and determine which widget is open. This inconsistency affects
the user experience and overall design quality.

Soon, only one container will be open/close, and its content will be toggle,
using an extensible system.

As a quick fix, I’ve added basic logic to ensure that opening one widget
automatically closes any other open widgets, such as the chat or participants
widget. This is a temporary measure to fix state management until a
more robust solution can be implemented.
---
 .../rooms/livekit/components/controls/ChatToggle.tsx     | 6 ++++++
 .../controls/Participants/ParticipantsToggle.tsx         | 9 +++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
index d91ab100..9f260643 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
@@ -3,6 +3,8 @@ import { RiChat1Line } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
 
 export const ChatToggle = () => {
   const { t } = useTranslation('rooms')
@@ -10,6 +12,9 @@ export const ChatToggle = () => {
   const { dispatch, state } = useLayoutContext().widget
   const tooltipLabel = state?.showChat ? 'open' : 'closed'
 
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
   return (
     <div
       className={css({
@@ -25,6 +30,7 @@ export const ChatToggle = () => {
         tooltip={t(`controls.chat.${tooltipLabel}`)}
         isSelected={state?.showChat}
         onPress={() => {
+          if (showParticipants) participantsStore.showParticipants = false
           if (dispatch) dispatch({ msg: 'toggle_chat' })
         }}
       >
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
index d8049b46..1f955f52 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
@@ -2,13 +2,15 @@ import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
+import { useLayoutContext, useParticipants } from '@livekit/components-react'
 import { useSnapshot } from 'valtio'
 import { participantsStore } from '@/stores/participants'
 
 export const ParticipantsToggle = () => {
   const { t } = useTranslation('rooms')
 
+  const { dispatch, state } = useLayoutContext().widget
+
   /**
    * Context could not be used due to inconsistent refresh behavior.
    * The 'numParticipant' property on the room only updates when the room's metadata changes,
@@ -36,7 +38,10 @@ export const ParticipantsToggle = () => {
         aria-label={t(`controls.participants.${tooltipLabel}`)}
         tooltip={t(`controls.participants.${tooltipLabel}`)}
         isSelected={showParticipants}
-        onPress={() => (participantsStore.showParticipants = !showParticipants)}
+        onPress={() => {
+          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
+          participantsStore.showParticipants = !showParticipants
+        }}
       >
         <RiGroupLine />
       </Button>