🚸(frontend) fix widget state management

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.

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' })
         }}
       >

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>