♻️(refactor) move pip feature into dedicated module

group pip components and hooks under features/pip for isolation

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

@@ -1,13 +1,13 @@
 import { styled } from '@/styled-system/jsx'
-import { AudioDevicesControl } from './controls/Device/AudioDevicesControl'
-import { VideoDeviceControl } from './controls/Device/VideoDeviceControl'
-import { ScreenShareToggle } from './controls/ScreenShareToggle'
-import { LeaveButton } from './controls/LeaveButton'
-import { ReactionsToggle } from './controls/ReactionsToggle'
-import { SubtitlesToggle } from './controls/SubtitlesToggle'
-import { HandToggle } from './controls/HandToggle'
-import { OptionsButton } from './controls/Options/OptionsButton'
-import { StartMediaButton } from './controls/StartMediaButton'
+import { AudioDevicesControl } from '@/features/rooms/livekit/components/controls/Device/AudioDevicesControl'
+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'
 
 /**

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

@@ -6,9 +6,9 @@ import {
 } from '@livekit/components-core'
 import { useTracks } from '@livekit/components-react'
 import { Track } from 'livekit-client'
-import { ParticipantTile } from './ParticipantTile'
-import { GridLayout } from './layout/GridLayout'
-import { SidePanel } from './SidePanel'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { GridLayout } from '@/features/rooms/livekit/components/layout/GridLayout'
+import { SidePanel } from '@/features/rooms/livekit/components/SidePanel'
 import { PipControlBar } from './PipControlBar'
 
 const pickTrackForPip = (

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

@@ -6,11 +6,11 @@ import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { StyledPopover } from '@/primitives/Popover'
 import { useOverlayBoundaryElement } from '@/primitives/useOverlayPortalContainer'
-import { ChatToggle } from './ChatToggle'
-import { ParticipantsToggle } from './Participants/ParticipantsToggle'
-import { ToolsToggle } from './ToolsToggle'
-import { InfoToggle } from './InfoToggle'
-import { AdminToggle } from '../AdminToggle'
+import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
+import { ToolsToggle } from '@/features/rooms/livekit/components/controls/ToolsToggle'
+import { InfoToggle } from '@/features/rooms/livekit/components/controls/InfoToggle'
+import { AdminToggle } from '@/features/rooms/livekit/components/AdminToggle'
 
 const NavigationControls = ({ onPress }: { onPress?: () => void }) => (
   <>

src/frontend/src/features/pip/components/controls/PipOptionsMenu.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 './OptionsMenuItems'
+import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
 
 type PipOptionsMenuProps = {
   wrapperRef: React.RefObject<HTMLDivElement>

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

@@ -3,8 +3,8 @@ import { RiMoreFill } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
 import { OptionsMenuItems } from './OptionsMenuItems'
 import { useOverlayPortalContainer } from '@/primitives/useOverlayPortalContainer'
-import { useEffect, useRef, useState } from 'react'
-import { PipOptionsMenu } from './PipOptionsMenu'
+import { useRef, useState } from 'react'
+import { PipOptionsMenu } from '@/features/pip/components/controls/PipOptionsMenu'
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
@@ -13,25 +13,6 @@ export const OptionsButton = () => {
   const [isOpen, setIsOpen] = useState(false)
   const wrapperRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (!isOpen || !isInPiP) return
-    const doc = wrapperRef.current?.ownerDocument ?? document
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target as Node | null
-      const wrapper = wrapperRef.current
-      if (!wrapper || !target) return
-      if (!wrapper.contains(target)) {
-        setIsOpen(false)
-      }
-    }
-
-    doc.addEventListener('pointerdown', handlePointerDown, true)
-    return () => {
-      doc.removeEventListener('pointerdown', handlePointerDown, true)
-    }
-  }, [isInPiP, isOpen])
-
   if (isInPiP) {
     return (
       <PipOptionsMenu

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

@@ -2,7 +2,7 @@ import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { RiPictureInPicture2Line } from '@remixicon/react'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { useRoomPiP } from '../../../hooks/useRoomPiP'
+import { useRoomPiP } from '@/features/pip/hooks/useRoomPiP'
 
 export const PictureInPictureMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })

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

@@ -34,7 +34,7 @@ import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
-import { RoomPiP } from '../components/RoomPiP'
+import { RoomPiP } from '@/features/pip/components/RoomPiP'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'