📈(frontend) add data attributes to key UI buttons

Add data attributes to important buttons in the frontend to enable tracking
through PostHog actions. Allows measurement of user interaction with key
features to inform future product decisions.

src/frontend/src/features/rooms/livekit/components/Transcript.tsx

@@ -77,7 +77,11 @@ export const Transcript = () => {
             {t('stop.body')}
           </Text>
           <div className={css({ height: '2rem' })} />
-          <Button isDisabled={isLoading} onPress={() => handleTranscript()}>
+          <Button
+            isDisabled={isLoading}
+            onPress={() => handleTranscript()}
+            data-attr="stop-transcript"
+          >
             <RiStopCircleLine style={{ marginRight: '0.5rem' }} />{' '}
             {t('stop.button')}
           </Button>
@@ -89,7 +93,11 @@ export const Transcript = () => {
             {t('start.body')}
           </Text>
           <div className={css({ height: '2rem' })} />
-          <Button isDisabled={isLoading} onPress={() => handleTranscript()}>
+          <Button
+            isDisabled={isLoading}
+            onPress={() => handleTranscript()}
+            data-attr="start-transcript"
+          >
             <RiRecordCircleLine style={{ marginRight: '0.5rem' }} />{' '}
             {t('start.button')}
           </Button>

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -131,6 +131,7 @@ export const ReactionsToggle = () => {
                   aria-label={t('send', { emoji })}
                   variant="quaternaryText"
                   size="sm"
+                  data-attr={`send-reaction-${emoji}`}
                 >
                   <span
                     className={css({

src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx

@@ -38,6 +38,7 @@ export const TranscriptToggle = ({
           onPress?.(e)
         }}
         {...props}
+        data-attr="toggle-transcript"
       >
         <RiBardLine />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -275,6 +275,7 @@ export const EffectsConfiguration = ({
                     isSelected={isSelected(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
                     })}
+                    data-attr="toggle-blur-light"
                   >
                     <BlurOn />
                   </ToggleButton>
@@ -295,6 +296,7 @@ export const EffectsConfiguration = ({
                     isSelected={isSelected(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
                     })}
+                    data-attr="toggle-blur-normal"
                   >
                     <BlurOnStrong />
                   </ToggleButton>
@@ -349,7 +351,8 @@ export const EffectsConfiguration = ({
                         style={{
                           backgroundImage: `url(${thumbnailPath})`,
                         }}
-                      ></ToggleButton>
+                        data-attr={`toggle-virtual-${i}`}
+                      />
                     )
                   })}
                 </div>