♻️(frontend) rename useWidget to useSidePanel

Rename useWidget interaction to useSidePanel. Remove LiveKit-specific naming
as we no longer use LiveKit elements in the layout context. This change
improves clarity and reflects the current functionality of the hook.

src/frontend/src/features/notifications/components/ToastRaised.tsx

@@ -6,7 +6,7 @@ import { HStack } from '@/styled-system/jsx'
 import { Button, Div } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine, RiHand } from '@remixicon/react'
-import { useWidgetInteraction } from '@/features/rooms/livekit/hooks/useWidgetInteraction'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 export function ToastRaised({ state, ...props }: ToastProps) {
   const { t } = useTranslation('notifications')
@@ -17,7 +17,7 @@ export function ToastRaised({ state, ...props }: ToastProps) {
     ref
   )
   const participant = props.toast.content.participant
-  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
+  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
 
   return (
     <StyledToastContainer {...toastProps} ref={ref}>

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

@@ -7,7 +7,7 @@ import { Box, Button, Div } from '@/primitives'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useWidgetInteraction } from '../hooks/useWidgetInteraction'
+import { useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
 import { Effects } from './Effects'
 import { Chat } from '../prefabs/Chat'
@@ -103,8 +103,7 @@ export const SidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
   const sidePanel = layoutSnap.sidePanel
 
-  const { isParticipantsOpen, isEffectsOpen, isChatOpen } =
+  const { isParticipantsOpen, isEffectsOpen, isChatOpen } = useSidePanel()
-    useWidgetInteraction()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
   return (

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

@@ -3,15 +3,15 @@ import { RiChat1Line } from '@remixicon/react'
 import { useSnapshot } from 'valtio'
 import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
-import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
 import { chatStore } from '@/stores/chat'
+import { useSidePanel } from '../../hooks/useSidePanel'
 
 export const ChatToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
   const chatSnap = useSnapshot(chatStore)
 
-  const { isChatOpen, toggleChat } = useWidgetInteraction()
+  const { isChatOpen, toggleChat } = useSidePanel()
   const tooltipLabel = isChatOpen ? 'open' : 'closed'
 
   return (

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { Dispatch, SetStateAction } from 'react'
 import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
-import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
+import { useSidePanel } from '../../../hooks/useSidePanel'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
@@ -18,7 +18,7 @@ export const OptionsMenuItems = ({
   onOpenDialog: Dispatch<SetStateAction<DialogState>>
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useWidgetInteraction()
+  const { toggleEffects } = useSidePanel()
   return (
     <RACMenu
       style={{

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

@@ -3,7 +3,7 @@ import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
-import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
+import { useSidePanel } from '../../../hooks/useSidePanel'
 
 export const ParticipantsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
@@ -16,7 +16,7 @@ export const ParticipantsToggle = () => {
   const participants = useParticipants()
   const numParticipants = participants?.length
 
-  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
+  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
 
   const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
 

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

@@ -7,7 +7,7 @@ export enum SidePanel {
   CHAT = 'chat',
 }
 
-export const useWidgetInteraction = () => {
+export const useSidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
   const sidePanel = layoutSnap.sidePanel
 

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

@@ -11,7 +11,7 @@ import { chatStore } from '@/stores/chat'
 import { Div, Text } from '@/primitives'
 import { ChatInput } from '../components/chat/Input'
 import { ChatEntry } from '../components/chat/Entry'
-import { useWidgetInteraction } from '../hooks/useWidgetInteraction'
+import { useSidePanel } from '../hooks/useSidePanel'
 
 export interface ChatProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -29,7 +29,7 @@ export function Chat({ ...props }: ChatProps) {
 
   const { send, chatMessages, isSending } = useChat()
 
-  const { isChatOpen } = useWidgetInteraction()
+  const { isChatOpen } = useSidePanel()
   const chatSnap = useSnapshot(chatStore)
 
   // Use useParticipants hook to trigger a re-render when the participant list changes.

src/frontend/src/stores/layout.ts

@@ -1,5 +1,5 @@
 import { proxy } from 'valtio'
-import { SidePanel } from '@/features/rooms/livekit/hooks/useWidgetInteraction'
+import { SidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 type State = {
   showHeader: boolean