🚸(frontend) add subtle indicator for active tools

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.

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)
+  }
+}

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'

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>