📈(frontend) add explicit data attributes for key event tracking

PostHog's autocapture is useful, but explicit tracking ensures cleaner, more
focused data. This initial pass targets high-impact actions; we'll iterate as
needed.

src/frontend/src/features/home/components/LaterMeetingDialog.tsx

@@ -44,6 +44,7 @@ export const LaterMeetingDialog = ({
           setIsCopied(true)
         }}
         onHoverChange={setIsHovered}
+        data-attr="later-dialog-copy"
       >
         {isCopied ? (
           <>

src/frontend/src/features/home/routes/Home.tsx

@@ -45,7 +45,9 @@ export const Home = () => {
           <HStack gap="gutter">
             {isLoggedIn ? (
               <Menu>
-                <Button variant="primary">{t('createMeeting')}</Button>
+                <Button variant="primary" data-attr="create-meeting">
+                  {t('createMeeting')}
+                </Button>
                 <RACMenu>
                   <MenuItem
                     className={menuItemRecipe({ icon: true })}
@@ -57,6 +59,7 @@ export const Home = () => {
                         })
                       )
                     }}
+                    data-attr="create-option-instant"
                   >
                     <RiAddLine size={18} />
                     {t('createMenu.instantOption')}
@@ -69,6 +72,7 @@ export const Home = () => {
                         setLaterRoomId(data.slug)
                       )
                     }}
+                    data-attr="create-option-later"
                   >
                     <RiLink size={18} />
                     {t('createMenu.laterOption')}
@@ -76,7 +80,7 @@ export const Home = () => {
                 </RACMenu>
               </Menu>
             ) : (
-              <Button variant="primary" href={authUrl()}>
+              <Button variant="primary" href={authUrl()} data-attr="login">
                 {t('login', { ns: 'global' })}
               </Button>
             )}

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -90,6 +90,7 @@ export const InviteDialog = ({
               setIsCopied(true)
             }}
             onHoverChange={setIsHovered}
+            data-attr="share-dialog-copy"
           >
             {isCopied ? (
               <>

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

@@ -24,6 +24,7 @@ export const ChatToggle = () => {
         tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
         onPress={() => toggleChat()}
+        data-attr={`controls-chat-${tooltipLabel}`}
       >
         <RiChat1Line />
       </ToggleButton>

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

@@ -44,6 +44,7 @@ export const HandToggle = () => {
           notifyOtherParticipants(isHandRaised)
           toggleRaisedHand()
         }}
+        data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />
       </ToggleButton>

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

@@ -25,6 +25,7 @@ export const LeaveButton = () => {
             navigateTo('feedback')
           })
       }}
+      data-attr="controls-leave"
     >
       <RiPhoneFill
         style={{

src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx

@@ -73,6 +73,7 @@ export const HandRaisedListItem = ({
         size="sm"
         onPress={() => lowerHandParticipant(participant)}
         tooltip={t('participants.lowerParticipantHand', { name })}
+        data-attr="participants-lower-hand"
       >
         <RiHand />
       </Button>

src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx

@@ -19,6 +19,7 @@ export const LowerAllHandsButton = ({
       fullWidth
       variant="text"
       onPress={() => lowerHandParticipants(participants)}
+      data-attr="participants-lower-hands"
     >
       {t('participants.lowerParticipantsHand')}
     </Button>

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -78,6 +78,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
             ? muteParticipant(participant)
             : setIsAlertOpen(true)
         }
+        data-attr="participants-mute"
       >
         {isMuted ? (
           <RiMicOffFill color={'gray'} />

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -74,6 +74,7 @@ export const ParticipantsList = () => {
           onPress={() => (participantsStore.showParticipants = false)}
           aria-label={t('closeButton')}
           tooltip={t('closeButton')}
+          data-attr="participants-close"
         >
           <RiCloseLine />
         </Button>

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -34,6 +34,7 @@ export const ParticipantsToggle = () => {
         tooltip={t(tooltipLabel)}
         isSelected={isParticipantsOpen}
         onPress={() => toggleParticipants()}
+        data-attr={`controls-participants-${tooltipLabel}`}
       >
         <RiGroupLine />
       </ToggleButton>

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

@@ -37,6 +37,7 @@ export const ScreenShareToggle = (
         maxWidth: '46px',
         maxHeight: '46px',
       }}
+      data-attr={`controls-screenshare-${tooltipLabel}`}
     >
       <Div position="relative">
         <RiRectangleLine size={28} />