♻️(frontend) refactor keyprefix in translation

Factorized translations' prefix.

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

@@ -5,7 +5,7 @@ import { css } from '@/styled-system/css'
 import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
 
 export const ChatToggle = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
   const { isChatOpen, unreadMessages, toggleChat } = useWidgetInteraction()
   const tooltipLabel = isChatOpen ? 'open' : 'closed'
@@ -20,8 +20,8 @@ export const ChatToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(`controls.chat.${tooltipLabel}`)}
-        tooltip={t(`controls.chat.${tooltipLabel}`)}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
         onPress={() => toggleChat()}
       >

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

@@ -7,16 +7,14 @@ import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
 import { NotificationType } from '@/features/notifications/NotificationType'
 
 export const HandToggle = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
 
   const room = useRoomContext()
   const { isHandRaised, toggleRaisedHand } = useRaisedHand({
     participant: room.localParticipant,
   })
 
-  const label = isHandRaised
-    ? t('controls.hand.lower')
-    : t('controls.hand.raise')
+  const tooltipLabel = isHandRaised ? 'lower' : 'raise'
 
   const notifyOtherParticipants = (isHandRaised: boolean) => {
     room.localParticipant.publishData(
@@ -39,8 +37,8 @@ export const HandToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={label}
-        tooltip={label}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
         onPress={() => {
           notifyOtherParticipants(isHandRaised)

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

@@ -15,7 +15,7 @@ import { LowerAllHandsButton } from '@/features/rooms/livekit/components/control
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
 
   // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
   // because the 'useLocalParticipant' hook does not update the participant's information when their
@@ -65,15 +65,15 @@ export const ParticipantsList = () => {
           paddingTop: '1rem',
         }}
       >
-        {t('participants.heading')}
+        {t('heading')}
       </Heading>
       <Div position="absolute" top="5" right="5">
         <Button
           invisible
           size="xs"
           onPress={() => (participantsStore.showParticipants = false)}
-          aria-label={t('participants.closeButton')}
-          tooltip={t('participants.closeButton')}
+          aria-label={t('closeButton')}
+          tooltip={t('closeButton')}
         >
           <RiCloseLine />
         </Button>
@@ -89,12 +89,12 @@ export const ParticipantsList = () => {
             marginBottom: '0.83em',
           })}
         >
-          {t('participants.subheading').toUpperCase()}
+          {t('subheading').toUpperCase()}
         </H>
         {raisedHandParticipants.length > 0 && (
           <Div marginBottom=".9375rem">
             <ParticipantsCollapsableList
-              heading={t('participants.raisedHands')}
+              heading={t('raisedHands')}
               participants={raisedHandParticipants}
               renderParticipant={(participant) => (
                 <HandRaisedListItem participant={participant} />
@@ -106,7 +106,7 @@ export const ParticipantsList = () => {
           </Div>
         )}
         <ParticipantsCollapsableList
-          heading={t('participants.contributors')}
+          heading={t('contributors')}
           participants={sortedParticipants}
           renderParticipant={(participant) => (
             <ParticipantListItem participant={participant} />

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

@@ -6,7 +6,7 @@ import { useParticipants } from '@livekit/components-react'
 import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
 
 export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
 
   /**
    * Context could not be used due to inconsistent refresh behavior.
@@ -30,8 +30,8 @@ export const ParticipantsToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(`controls.participants.${tooltipLabel}`)}
-        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
         isSelected={isParticipantsOpen}
         onPress={() => toggleParticipants()}
       >