From b4484540f74f83001ab85c9b9bf10044684e0cc6 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 16 Apr 2025 19:42:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20add=20subtle=20indicat?=
 =?UTF-8?q?or=20for=20active=20tools?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement discreet visual notification that appears when tools are active.
Helps users locate and return to active tools they may have closed
during their session.
---
 .../recording/hooks/useIsRecordingActive.ts   | 22 +++++++++++++
 src/frontend/src/features/recording/index.ts  |  1 +
 .../rooms/livekit/components/Tools.tsx        | 31 +++++++++++++++++--
 3 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/features/recording/hooks/useIsRecordingActive.ts

diff --git a/src/frontend/src/features/recording/hooks/useIsRecordingActive.ts b/src/frontend/src/features/recording/hooks/useIsRecordingActive.ts
new file mode 100644
index 00000000..b4fefeec
--- /dev/null
+++ b/src/frontend/src/features/recording/hooks/useIsRecordingActive.ts
@@ -0,0 +1,22 @@
+import { useSnapshot } from 'valtio'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+import { RecordingMode } from '@/features/recording'
+
+export const useIsRecordingActive = (mode: RecordingMode) => {
+  const recordingSnap = useSnapshot(recordingStore)
+
+  switch (mode) {
+    case RecordingMode.Transcript:
+      return [
+        RecordingStatus.TRANSCRIPT_STARTED,
+        RecordingStatus.TRANSCRIPT_STARTING,
+        RecordingStatus.TRANSCRIPT_STOPPING,
+      ].includes(recordingSnap.status)
+    case RecordingMode.ScreenRecording:
+      return [
+        RecordingStatus.SCREEN_RECORDING_STARTED,
+        RecordingStatus.SCREEN_RECORDING_STARTING,
+        RecordingStatus.SCREEN_RECORDING_STOPPING,
+      ].includes(recordingSnap.status)
+  }
+}
diff --git a/src/frontend/src/features/recording/index.ts b/src/frontend/src/features/recording/index.ts
index d83f9ab2..b2c29a0e 100644
--- a/src/frontend/src/features/recording/index.ts
+++ b/src/frontend/src/features/recording/index.ts
@@ -2,6 +2,7 @@
 export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled'
 export { useIsRecordingTransitioning } from './hooks/useIsRecordingTransitioning'
 export { useHasRecordingAccess } from './hooks/useHasRecordingAccess'
+export { useIsRecordingActive } from './hooks/useIsRecordingActive'
 
 // api
 export { useStartRecording } from './api/startRecording'
diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
index 194e5fb6..ea0f8dae 100644
--- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
@@ -10,10 +10,9 @@ import {
   useIsRecordingModeEnabled,
   RecordingMode,
   useHasRecordingAccess,
-} from '@/features/recording'
-import {
   TranscriptSidePanel,
   ScreenRecordingSidePanel,
+  useIsRecordingActive,
 } from '@/features/recording'
 import { FeatureFlags } from '@/features/analytics/enums'
 
@@ -23,6 +22,7 @@ export interface ToolsButtonProps {
   description: string
   onPress: () => void
   isBetaFeature?: boolean
+  isActive?: boolean
 }
 
 const ToolButton = ({
@@ -31,6 +31,7 @@ const ToolButton = ({
   description,
   onPress,
   isBetaFeature = false,
+  isActive = false,
 }: ToolsButtonProps) => {
   return (
     <RACButton
@@ -85,8 +86,23 @@ const ToolButton = ({
         )}
       </div>
       <div>
-        <Text margin={false} as="h3">
+        <Text
+          margin={false}
+          as="h3"
+          className={css({ display: 'flex', gap: 0.25 })}
+        >
           {title}
+          {isActive && (
+            <div
+              className={css({
+                backgroundColor: 'primary.500',
+                height: '10px',
+                width: '10px',
+                marginTop: '5px',
+                borderRadius: '100%',
+              })}
+            />
+          )}
         </Text>
         <Text as="p" variant="smNote" wrap="pretty">
           {description}
@@ -100,15 +116,22 @@ export const Tools = () => {
   const { openTranscript, openScreenRecording, activeSubPanelId } =
     useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
+
   const isTranscriptEnabled = useIsRecordingModeEnabled(
     RecordingMode.Transcript
   )
 
+  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
+
   const hasScreenRecordingAccess = useHasRecordingAccess(
     RecordingMode.ScreenRecording,
     FeatureFlags.ScreenRecording
   )
 
+  const isScreenRecordingActive = useIsRecordingActive(
+    RecordingMode.ScreenRecording
+  )
+
   switch (activeSubPanelId) {
     case SubPanelId.TRANSCRIPT:
       return <TranscriptSidePanel />
@@ -149,6 +172,7 @@ export const Tools = () => {
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
           isBetaFeature
+          isActive={isTranscriptActive}
         />
       )}
       {hasScreenRecordingAccess && (
@@ -158,6 +182,7 @@ export const Tools = () => {
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}
           isBetaFeature
+          isActive={isScreenRecordingActive}
         />
       )}
     </Div>