♻️(frontend) introduce a reusable isTranscriptEnabled

Encapsulate the logic, checking if the feature is enabled in the
backend, in a proper and reusable hook.

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

@@ -5,6 +5,7 @@ import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+import { useIsTranscriptEnabled } from '@/features/rooms/livekit/hooks/useIsTranscriptEnabled'
 
 export const TranscriptToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
@@ -14,8 +15,10 @@ export const TranscriptToggle = () => {
 
   const featureEnabled = useFeatureFlagEnabled('transcription-summary')
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
+  const isTranscriptEnabled = useIsTranscriptEnabled()
 
   if (!featureEnabled && isAnalyticsEnabled) return
+  if (!isTranscriptEnabled) return
 
   return (
     <div

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

@@ -0,0 +1,11 @@
+import { RecordingMode } from '@/features/rooms/api/startRecording'
+import { useConfig } from '@/api/useConfig'
+
+export const useIsTranscriptEnabled = () => {
+  const { data } = useConfig()
+
+  return (
+    data?.recording?.is_enabled &&
+    data?.recording?.available_modes?.includes(RecordingMode.Transcript)
+  )
+}