♻️(frontend) extract duplicated logic into reusable hook

This hook manages interactions with the right side widget,
improving maintainability.

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

@@ -2,18 +2,13 @@ import { useTranslation } from 'react-i18next'
 import { RiChat1Line } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useLayoutContext } from '@livekit/components-react'
+import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
-import { useSnapshot } from 'valtio'
-import { participantsStore } from '@/stores/participants'
 
 export const ChatToggle = () => {
   const { t } = useTranslation('rooms')
 
-  const { dispatch, state } = useLayoutContext().widget
+  const { isChatOpen, unreadMessages, toggleChat } = useWidgetInteraction()
-  const tooltipLabel = state?.showChat ? 'open' : 'closed'
+  const tooltipLabel = isChatOpen ? 'open' : 'closed'
-
-  const participantsSnap = useSnapshot(participantsStore)
-  const showParticipants = participantsSnap.showParticipants
 
   return (
     <div
@@ -27,15 +22,12 @@ export const ChatToggle = () => {
         legacyStyle
         aria-label={t(`controls.chat.${tooltipLabel}`)}
         tooltip={t(`controls.chat.${tooltipLabel}`)}
-        isSelected={state?.showChat}
+        isSelected={isChatOpen}
-        onPress={() => {
+        onPress={() => toggleChat()}
-          if (showParticipants) participantsStore.showParticipants = false
-          if (dispatch) dispatch({ msg: 'toggle_chat' })
-        }}
       >
         <RiChat1Line />
       </ToggleButton>
-      {!!state?.unreadMessages && (
+      {!!unreadMessages && (
         <div
           className={css({
             position: 'absolute',

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -2,15 +2,12 @@ import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useLayoutContext, useParticipants } from '@livekit/components-react'
+import { useParticipants } from '@livekit/components-react'
-import { useSnapshot } from 'valtio'
+import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
-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,
@@ -19,10 +16,9 @@ export const ParticipantsToggle = () => {
   const participants = useParticipants()
   const numParticipants = participants?.length
 
-  const participantsSnap = useSnapshot(participantsStore)
+  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
-  const showParticipants = participantsSnap.showParticipants
 
-  const tooltipLabel = showParticipants ? 'open' : 'closed'
+  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
 
   return (
     <div
@@ -36,11 +32,8 @@ export const ParticipantsToggle = () => {
         legacyStyle
         aria-label={t(`controls.participants.${tooltipLabel}`)}
         tooltip={t(`controls.participants.${tooltipLabel}`)}
-        isSelected={showParticipants}
+        isSelected={isParticipantsOpen}
-        onPress={() => {
+        onPress={() => toggleParticipants()}
-          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
-          participantsStore.showParticipants = !showParticipants
-        }}
       >
         <RiGroupLine />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts

@@ -0,0 +1,34 @@
+import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants.ts'
+
+export const useWidgetInteraction = () => {
+  const { dispatch, state } = useLayoutContext().widget
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const isParticipantsOpen = participantsSnap.showParticipants
+
+  const toggleParticipants = () => {
+    if (dispatch && state?.showChat) {
+      dispatch({ msg: 'toggle_chat' })
+    }
+    participantsStore.showParticipants = !isParticipantsOpen
+  }
+
+  const toggleChat = () => {
+    if (isParticipantsOpen) {
+      participantsStore.showParticipants = false
+    }
+    if (dispatch) {
+      dispatch({ msg: 'toggle_chat' })
+    }
+  }
+
+  return {
+    toggleParticipants,
+    toggleChat,
+    isChatOpen: state?.showChat,
+    unreadMessages: state?.unreadMessages,
+    isParticipantsOpen,
+  }
+}