♻️(frontend) extract recording side panel into a dedicated folder

Extract code elements related to recording into a dedicated folder.

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -25,7 +25,7 @@ import {
   NotificationType,
 } from '@/features/notifications'
 
-export const ScreenRecording = () => {
+export const ScreenRecordingSidePanel = () => {
   const [isLoading, setIsLoading] = useState(false)
   const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' })
 

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -12,7 +12,7 @@ import {
   useIsTranscriptStarted,
   useIsRecordingTransitioning,
   useHasRecordingAccess,
-} from '@/features/recording'
+} from '../index'
 import { useEffect, useMemo, useState } from 'react'
 import { RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
@@ -27,7 +27,7 @@ import {
   NotificationType,
 } from '@/features/notifications'
 
-export const Transcript = () => {
+export const TranscriptSidePanel = () => {
   const [isLoading, setIsLoading] = useState(false)
   const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
 

src/frontend/src/features/recording/index.ts

@@ -1,3 +1,4 @@
+// hooks
 export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled'
 export {
   useIsScreenRecordingStarted,
@@ -5,7 +6,13 @@ export {
 } from './hooks/useIsRecordingStarted'
 export { useIsRecordingTransitioning } from './hooks/useIsRecordingTransitioning'
 export { useHasRecordingAccess } from './hooks/useHasRecordingAccess'
-export { RecordingStateToast } from './components/RecordingStateToast'
+
+// api
 export { useStartRecording } from './api/startRecording'
 export { useStopRecording } from './api/stopRecording'
 export { RecordingMode } from './types'
+
+// components
+export { RecordingStateToast } from './components/RecordingStateToast'
+export { TranscriptSidePanel } from './components/TranscriptSidePanel'
+export { ScreenRecordingSidePanel } from './components/ScreenRecordingSidePanel'

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

@@ -4,11 +4,13 @@ import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { CRISP_HELP_ARTICLE_MORE_TOOLS } from '@/utils/constants'
 import { ReactNode } from 'react'
-import { Transcript } from './Transcript'
 import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
-import { ScreenRecording } from './ScreenRecording'
 import { useIsRecordingModeEnabled, RecordingMode } from '@/features/recording'
+import {
+  TranscriptSidePanel,
+  ScreenRecordingSidePanel,
+} from '@/features/recording'
 
 export interface ToolsButtonProps {
   icon: ReactNode
@@ -82,9 +84,9 @@ export const Tools = () => {
 
   switch (activeSubPanelId) {
     case SubPanelId.TRANSCRIPT:
-      return <Transcript />
+      return <TranscriptSidePanel />
     case SubPanelId.SCREEN_RECORDING:
-      return <ScreenRecording />
+      return <ScreenRecordingSidePanel />
     default:
       break
   }