♻️(frontend) enhance useSidePanel

Encapsulate all interactions with the layout store concerning the
side panel into a hook. This hook exposes a clear interface.
Each variable has a single responsability, with a clear naming.

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -1,4 +1,3 @@
-import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
@@ -100,20 +99,23 @@ const Panel = ({ isOpen, children }: PanelProps) => (
 )
 
 export const SidePanel = () => {
-  const layoutSnap = useSnapshot(layoutStore)
+  const {
-  const sidePanel = layoutSnap.sidePanel
+    activePanelId,
-
+    isParticipantsOpen,
-  const { isParticipantsOpen, isEffectsOpen, isChatOpen } = useSidePanel()
+    isEffectsOpen,
+    isChatOpen,
+    isSidePanelOpen,
+  } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
   return (
     <StyledSidePanel
-      title={t(`heading.${sidePanel}`)}
+      title={t(`heading.${activePanelId}`)}
-      onClose={() => (layoutStore.sidePanel = null)}
+      onClose={() => (layoutStore.activePanelId = null)}
       closeButtonTooltip={t('closeButton', {
-        content: t(`content.${sidePanel}`),
+        content: t(`content.${activePanelId}`),
       })}
-      isClosed={!sidePanel}
+      isClosed={!isSidePanelOpen}
     >
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />

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

@@ -1,7 +1,7 @@
 import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 
-export enum SidePanel {
+export enum PanelId {
   PARTICIPANTS = 'participants',
   EFFECTS = 'effects',
   CHAT = 'chat',
@@ -9,30 +9,33 @@ export enum SidePanel {
 
 export const useSidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
-  const sidePanel = layoutSnap.sidePanel
+  const activePanelId = layoutSnap.activePanelId
 
-  const isParticipantsOpen = sidePanel == SidePanel.PARTICIPANTS
+  const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
-  const isEffectsOpen = sidePanel == SidePanel.EFFECTS
+  const isEffectsOpen = activePanelId == PanelId.EFFECTS
-  const isChatOpen = sidePanel == SidePanel.CHAT
+  const isChatOpen = activePanelId == PanelId.CHAT
+  const isSidePanelOpen = !!activePanelId
 
   const toggleParticipants = () => {
-    layoutStore.sidePanel = isParticipantsOpen ? null : SidePanel.PARTICIPANTS
+    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
   }
 
   const toggleChat = () => {
-    layoutStore.sidePanel = isChatOpen ? null : SidePanel.CHAT
+    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
   }
 
   const toggleEffects = () => {
-    layoutStore.sidePanel = isEffectsOpen ? null : SidePanel.EFFECTS
+    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
   }
 
   return {
+    activePanelId,
     toggleParticipants,
     toggleChat,
     toggleEffects,
     isChatOpen,
     isParticipantsOpen,
     isEffectsOpen,
+    isSidePanelOpen,
   }
 }

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

@@ -23,12 +23,11 @@ import {
 import { ControlBar } from './ControlBar'
 import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
-import { useSnapshot } from 'valtio'
+import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
-import { layoutStore } from '@/stores/layout'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
-import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
+import { useSidePanel } from '../hooks/useSidePanel'
 
 const LayoutWrapper = styled(
   'div',
@@ -147,10 +146,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  const layoutSnap = useSnapshot(layoutStore)
+  const { isSidePanelOpen } = useSidePanel()
-
-  // todo - rename this variable
-  const sidePanel = layoutSnap.sidePanel
 
   return (
     <div className="lk-video-conference" {...props}>
@@ -163,7 +159,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
             // todo - extract these magic values into constant
             style={{
               position: 'absolute',
-              inset: sidePanel
+              inset: isSidePanelOpen
                 ? 'var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px'
                 : 'var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))',
               transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',

src/frontend/src/stores/layout.ts

@@ -1,12 +1,12 @@
 import { proxy } from 'valtio'
-import { SidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 type State = {
   showHeader: boolean
-  sidePanel: SidePanel | null
+  activePanelId: PanelId | null
 }
 
 export const layoutStore = proxy<State>({
   showHeader: false,
-  sidePanel: null,
+  activePanelId: null,
 })