🚸(frontend) enhance recording state toast icon

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.

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

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