♻️(frontend) decouple pip state and simplify pip options

Prevent PiP actions from affecting main panel state and reduce PiP-only noise.

Author: Ovgodd

src/frontend/src/features/pip/components/DocumentPiPPortal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useDocumentPiP } from '../hooks/useDocumentPiP'
 import { UNSAFE_PortalProvider } from '@react-aria/overlays'
@@ -113,7 +113,7 @@ export const DocumentPiPPortal = ({
   height?: number
   children: React.ReactNode
   onClose?: () => void
-}) => {
+}): ReactNode => {
   const { openPiP, closePiP, pipWindow, isSupported } = useDocumentPiP({
     width,
     height,
@@ -189,5 +189,5 @@ export const DocumentPiPPortal = ({
     )
   }, [children, container])
 
-  return portal
+  return portal as unknown as ReactNode
 }

src/frontend/src/features/pip/components/PipControlBar.tsx

@@ -3,12 +3,11 @@ import { AudioDevicesControl } from '@/features/rooms/livekit/components/control
 import { VideoDeviceControl } from '@/features/rooms/livekit/components/controls/Device/VideoDeviceControl'
 import { ScreenShareToggle } from '@/features/rooms/livekit/components/controls/ScreenShareToggle'
 import { LeaveButton } from '@/features/rooms/livekit/components/controls/LeaveButton'
-import { ReactionsToggle } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
 import { SubtitlesToggle } from '@/features/rooms/livekit/components/controls/SubtitlesToggle'
 import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
 import { OptionsButton } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
 import { StartMediaButton } from '@/features/rooms/livekit/components/controls/StartMediaButton'
-import { PipLateralMenu } from './controls/PipLateralMenu'
+import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
 
 /**
  * Compact control bar for the Picture-in-Picture window.
@@ -31,9 +30,6 @@ export const PipControlBar = ({
       <LeaveButton />
       <StartMediaButton />
     </PipControlsCenter>
-    <PipControlsRight>
-      <PipLateralMenu />
-    </PipControlsRight>
   </PipControls>
 )
 
@@ -61,13 +57,3 @@ const PipControlsCenter = styled('div', {
     flex: '1 1 auto',
   },
 })
-
-const PipControlsRight = styled('div', {
-  base: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    position: 'absolute',
-    right: '1.35rem',
-  },
-})

src/frontend/src/features/pip/components/PipView.tsx

@@ -7,16 +7,17 @@ import {
 import { useTracks } from '@livekit/components-react'
 import { Track } from 'livekit-client'
 import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { GridLayout } from '@/features/rooms/livekit/components/layout/GridLayout'
+import { GridLayout } from '@/features/layout/components/GridLayout'
 import { SidePanel } from '@/features/rooms/livekit/components/SidePanel'
+import { pipLayoutStore } from '../stores/pipLayoutStore'
 import { PipControlBar } from './PipControlBar'
 
 const pickTrackForPip = (
   tracks: TrackReferenceOrPlaceholder[]
 ): TrackReferenceOrPlaceholder | undefined => {
   // Prefer screen share when present; otherwise fallback to first available track.
   const screenShareTrack = tracks
-    .filter(isTrackReference)
+    .filter((track) => isTrackReference(track))
     .find((track) => track.publication.source === Track.Source.ScreenShare)
 
   if (screenShareTrack) return screenShareTrack
@@ -60,7 +61,7 @@ export const PipView = () => {
       {/* Compact control bar for PiP; extend here when adding more actions. */}
       <PipControlBar showScreenShare={browserSupportsScreenSharing} />
       {/* Side panel (effects, settings, etc.) opens within PiP window. */}
-      <SidePanel />
+      <SidePanel store={pipLayoutStore} />
     </PipContainer>
   )
 }

src/frontend/src/features/pip/components/RoomPiP.tsx

@@ -1,17 +1,21 @@
+import type { ReactNode } from 'react'
+
 import { DocumentPiPPortal } from './DocumentPiPPortal'
 import { PipView } from './PipView'
 import { useRoomPiP } from '../hooks/useRoomPiP'
 
 /**
  * Wrapper that mounts the PiP UI when room-level PiP state is enabled.
  * Bridges Valtio-backed PiP state with DocumentPiPPortal and PipView rendering.
+ * PiP panel state is decoupled via explicit pipLayoutStore injection.
  */
-export const RoomPiP = () => {
+export const RoomPiP = (): ReactNode => {
   const { isOpen, close } = useRoomPiP()
 
-  return (
-    <DocumentPiPPortal isOpen={isOpen} onClose={close}>
-      <PipView />
-    </DocumentPiPPortal>
-  )
+  const portal = DocumentPiPPortal({
+    isOpen,
+    onClose: close,
+    children: <PipView />,
+  })
+  return portal as ReactNode
 }

src/frontend/src/features/pip/components/controls/PipLateralMenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { RiMoreFill } from '@remixicon/react'
 import { Box, Button } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
+import { PipOptionsMenuItems } from './PipOptionsMenuItems'
 
 type PipOptionsMenuProps = {
   wrapperRef: React.RefObject<HTMLDivElement>
@@ -77,7 +77,7 @@ export const PipOptionsMenu = ({
           })}
         >
           <Box size="sm" type="popover" variant="dark">
-            <OptionsMenuItems />
+            <PipOptionsMenuItems />
           </Box>
         </div>
       )}

src/frontend/src/features/pip/components/controls/PipOptionsMenu.tsx

@@ -0,0 +1,32 @@
+import { Menu as RACMenu, MenuSection } from 'react-aria-components'
+import { Separator } from '@/primitives/Separator'
+import { SettingsMenuItem } from '@/features/rooms/livekit/components/controls/Options/SettingsMenuItem'
+import { FeedbackMenuItem } from '@/features/rooms/livekit/components/controls/Options/FeedbackMenuItem'
+import { EffectsMenuItem } from '@/features/rooms/livekit/components/controls/Options/EffectsMenuItem'
+import { SupportMenuItem } from '@/features/rooms/livekit/components/controls/Options/SupportMenuItem'
+import { PictureInPictureMenuItem } from '@/features/rooms/livekit/components/controls/Options/PictureInPictureMenuItem'
+import { pipLayoutStore } from '@/features/pip/stores/pipLayoutStore'
+
+/**
+ * PiP options menu items: excludes transcript, screen recording, and full screen
+ * (those features are not relevant in the PiP window context).
+ */
+export const PipOptionsMenuItems = () => (
+  <RACMenu
+    style={{
+      minWidth: '150px',
+      width: '300px',
+    }}
+  >
+    <MenuSection>
+      <PictureInPictureMenuItem />
+      <EffectsMenuItem store={pipLayoutStore} />
+    </MenuSection>
+    <Separator />
+    <MenuSection>
+      <SupportMenuItem />
+      <FeedbackMenuItem />
+      <SettingsMenuItem />
+    </MenuSection>
+  </RACMenu>
+)

src/frontend/src/features/pip/components/controls/PipOptionsMenuItems.tsx

@@ -0,0 +1,17 @@
+import { proxy } from 'valtio'
+import type { PanelId, SubPanelId } from '@/features/rooms/livekit/types/panel'
+
+type PipLayoutState = {
+  activePanelId: PanelId | null
+  activeSubPanelId: SubPanelId | null
+}
+
+/**
+ * Separate layout store for the PiP window.
+ * Decouples PiP side panel state from the main view so opening Chat/Info/etc.
+ * in PiP does not affect the main window and vice versa.
+ */
+export const pipLayoutStore = proxy<PipLayoutState>({
+  activePanelId: null,
+  activeSubPanelId: null,
+})

src/frontend/src/features/pip/stores/pipLayoutStore.ts

@@ -1,12 +1,11 @@
-import { layoutStore } from '@/stores/layout'
 import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
 import { text } from '@/primitives/Text'
 import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
+import { type SidePanelStore, useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
@@ -144,7 +143,7 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
     {keepAlive || isOpen ? children : null}
   </div>
 )
-export const SidePanel = () => {
+export const SidePanel = ({ store }: { store?: SidePanelStore }) => {
   const {
     activePanelId,
     isParticipantsOpen,
@@ -156,7 +155,9 @@ export const SidePanel = () => {
     isInfoOpen,
     isSubPanelOpen,
     activeSubPanelId,
-  } = useSidePanel()
+    closePanel,
+    goBack,
+  } = useSidePanel(store)
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
   const title = t(`heading.${activeSubPanelId || activePanelId}`)
 
@@ -166,18 +167,15 @@ export const SidePanel = () => {
     <StyledSidePanel
       title={title}
       ariaLabel={t('ariaLabel', { title })}
-      onClose={() => {
-        layoutStore.activePanelId = null
-        layoutStore.activeSubPanelId = null
-      }}
+      onClose={closePanel}
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
       isReactionToolbarOpen={isReactionToolbarOpen}
       backButtonLabel={t('backToTools')}
-      onBack={() => (layoutStore.activeSubPanelId = null)}
+      onBack={goBack}
     >
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />

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

@@ -2,11 +2,11 @@ import { RiImageCircleAiFill } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSidePanel } from '../../../hooks/useSidePanel'
+import { type SidePanelStore, useSidePanel } from '../../../hooks/useSidePanel'
 
-export const EffectsMenuItem = () => {
+export const EffectsMenuItem = ({ store }: { store?: SidePanelStore }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
+  const { toggleEffects } = useSidePanel(store)
 
   return (
     <MenuItem