🚸(frontend) make recording state toast clickable to reopen side panel

Enable recording status toast to function as clickable element that reopens
the side panel for admins and owners. Provides convenient way to access
recording controls when side panel has been previously closed.

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

@@ -10,6 +10,14 @@ import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
 import { RiRecordCircleLine } from '@remixicon/react'
+import {
+  RecordingMode,
+  useHasRecordingAccess,
+  useIsRecordingActive,
+} from '@/features/recording'
+import { FeatureFlags } from '@/features/analytics/enums'
+import { Button as RACButton } from 'react-aria-components'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
@@ -17,8 +25,26 @@ export const RecordingStateToast = () => {
   })
   const room = useRoomContext()
 
+  const { openTranscript, openScreenRecording } = useSidePanel()
+
   const recordingSnap = useSnapshot(recordingStore)
 
+  const hasTranscriptAccess = useHasRecordingAccess(
+    RecordingMode.Transcript,
+    FeatureFlags.Transcript
+  )
+
+  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
+
+  const hasScreenRecordingAccess = useHasRecordingAccess(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
+  )
+
+  const isScreenRecordingActive = useIsRecordingActive(
+    RecordingMode.ScreenRecording
+  )
+
   useEffect(() => {
     if (room.isRecording && recordingSnap.status == RecordingStatus.STOPPED) {
       recordingStore.status = RecordingStatus.ANY_STARTED
@@ -101,6 +127,10 @@ export const RecordingStateToast = () => {
 
   const isStarted = key?.includes('started')
 
+  const hasScreenRecordingAccessAndActive =
+    isScreenRecordingActive && hasScreenRecordingAccess
+  const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
+
   return (
     <div
       className={css({
@@ -128,14 +158,41 @@ export const RecordingStateToast = () => {
       ) : (
         <Spinner size={20} variant="dark" />
       )}
-      <Text
+
-        variant={'sm'}
+      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
-        className={css({
+        <Text
-          fontWeight: '500 !important',
+          variant={'sm'}
-        })}
+          className={css({
-      >
+            fontWeight: '500 !important',
-        {t(key)}
+          })}
-      </Text>
+        >
+          {t(key)}
+        </Text>
+      )}
+      {hasScreenRecordingAccessAndActive && (
+        <RACButton
+          onPress={openScreenRecording}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
+      {hasTranscriptAccessAndActive && (
+        <RACButton
+          onPress={openTranscript}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
     </div>
   )
 }