♻️(refactor) remove PiP subtitles controls and align PiP toast container

Drop subtitles actions from PiP controls and reuse main toast container style.

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

@@ -7,7 +7,6 @@ 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 { SubtitlesToggle } from '@/features/rooms/livekit/components/controls/SubtitlesToggle'
 import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
 import { StartMediaButton } from '@/features/rooms/livekit/components/controls/StartMediaButton'
 import { usePipElementSize } from '../hooks/usePipElementSize'
@@ -16,7 +15,6 @@ import { PipReactionsToggle } from './PipReactionsToggle'
 
 export const CollapsibleControls = {
   HAND: 'hand',
-  SUBTITLES: 'subtitles',
   SCREEN_SHARE: 'screenShare',
   REACTIONS: 'reactions',
 } as const
@@ -26,7 +24,6 @@ export type CollapsibleControl =
 
 const COLLAPSE_ORDER: CollapsibleControl[] = [
   CollapsibleControls.HAND,
-  CollapsibleControls.SUBTITLES,
   CollapsibleControls.SCREEN_SHARE,
   CollapsibleControls.REACTIONS,
 ]
@@ -90,7 +87,6 @@ export const PipControlBar = ({
         <VideoDeviceControl hideMenu />
         {!hidden.has(CollapsibleControls.REACTIONS) && <PipReactionsToggle />}
         {showScreenShare && !hidden.has(CollapsibleControls.SCREEN_SHARE) && <ScreenShareToggle />}
-        {!hidden.has(CollapsibleControls.SUBTITLES) && <SubtitlesToggle />}
         {!hidden.has(CollapsibleControls.HAND) && <HandToggle />}
         <PipOptionsMenu overflowControls={hidden} />
         <LeaveButton />

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

@@ -2,7 +2,6 @@ import React from 'react'
 import { MenuItem } from 'react-aria-components'
 import {
   RiHand,
-  RiClosedCaptioningLine,
   RiArrowUpLine,
   RiEmotionLine,
 } from '@remixicon/react'
@@ -12,8 +11,6 @@ import { pipLayoutStore } from '@/features/pip/stores/pipLayoutStore'
 import { menuRecipe } from '@/primitives/menuRecipe'
 import { useRoomContext, useTrackToggle } from '@livekit/components-react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles'
-import { useAreSubtitlesAvailable } from '@/features/subtitle/hooks/useAreSubtitlesAvailable'
 import { useSnapshot } from 'valtio'
 import { CollapsibleControls, type CollapsibleControl } from '../PipControlBar'
 
@@ -29,8 +26,6 @@ export const PipOverflowItems = ({
   const { isHandRaised, toggleRaisedHand } = useRaisedHand({
     participant: room.localParticipant,
   })
-  const { areSubtitlesOpen, toggleSubtitles } = useSubtitles()
-  const areSubtitlesAvailable = useAreSubtitlesAvailable()
   const { buttonProps: screenShareProps, enabled: isScreenSharing } =
     useTrackToggle({
       source: Track.Source.ScreenShare,
@@ -59,14 +54,6 @@ export const PipOverflowItems = ({
           {t(isScreenSharing ? 'controls.screenShare.stop' : 'controls.screenShare.start')}
         </MenuItem>
       )}
-      {overflowControls.has(CollapsibleControls.SUBTITLES) && areSubtitlesAvailable && (
-        <MenuItem onAction={toggleSubtitles} className={itemClass}>
-          <RiClosedCaptioningLine size={20} />
-          {areSubtitlesOpen
-            ? t('controls.subtitles.open')
-            : t('controls.subtitles.closed')}
-        </MenuItem>
-      )}
       {overflowControls.has(CollapsibleControls.HAND) && (
         <MenuItem onAction={toggleRaisedHand} className={itemClass}>
           <RiHand size={20} />