From f7b45622bc6112239db85ae2c3dd735e43e2a9bf Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 2 Jan 2026 18:24:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20enhance=20recording=20?=
 =?UTF-8?q?state=20toast=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Specify distinct icons in the recording state toast for each mode to provide
clearer visual feedback on what is actually happening. Remove the pulse CSS
animation, as it did not improve visual clarity and accessibility.
---
 .../components/RecordingStateToast.tsx        | 17 +++++----------
 .../components/RecordingStatusIcon.tsx        | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 src/frontend/src/features/recording/components/RecordingStatusIcon.tsx

diff --git a/src/frontend/src/features/recording/components/RecordingStateToast.tsx b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
index a29bd4f4..f2c9766e 100644
--- a/src/frontend/src/features/recording/components/RecordingStateToast.tsx
+++ b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
@@ -1,9 +1,7 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { Spinner } from '@/primitives/Spinner'
 import { useMemo } from 'react'
 import { Text } from '@/primitives'
-import { RiRecordCircleLine } from '@remixicon/react'
 import {
   RecordingMode,
   useHasRecordingAccess,
@@ -13,6 +11,7 @@ import { FeatureFlags } from '@/features/analytics/enums'
 import { Button as RACButton } from 'react-aria-components'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useRoomMetadata } from '../hooks/useRoomMetadata'
+import { RecordingStatusIcon } from './RecordingStatusIcon'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
@@ -83,16 +82,10 @@ export const RecordingStateToast = () => {
         gap: '0.5rem',
       })}
     >
-      {isStarted ? (
-        <RiRecordCircleLine
-          size={20}
-          className={css({
-            animation: 'pulse_background 1s infinite',
-          })}
-        />
-      ) : (
-        <Spinner size={20} variant="dark" />
-      )}
+      <RecordingStatusIcon
+        isStarted={isStarted}
+        isTranscriptActive={isTranscriptActive}
+      />
 
       {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
         <Text
diff --git a/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx b/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx
new file mode 100644
index 00000000..64bf85f3
--- /dev/null
+++ b/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx
@@ -0,0 +1,21 @@
+import { Spinner } from '@/primitives/Spinner'
+
+interface RecordingStatusIconProps {
+  isStarted: boolean
+  isTranscriptActive: boolean
+}
+
+export const RecordingStatusIcon = ({
+  isStarted,
+  isTranscriptActive,
+}: RecordingStatusIconProps) => {
+  if (!isStarted) {
+    return <Spinner size={20} variant="dark" />
+  }
+
+  if (isTranscriptActive) {
+    return <span className="material-symbols">speech_to_text</span>
+  }
+
+  return <span className="material-symbols">screen_record</span>
+}