Migrate more strings to translation keys

src/LegacyCallHandler.tsx

@@ -567,7 +567,7 @@ export default class LegacyCallHandler extends EventEmitter {
             }
 
             Modal.createDialog(ErrorDialog, {
-                title: _t("Call Failed"),
+                title: _t("voip|call_failed"),
                 description: err.message,
             });
         });
@@ -708,7 +708,7 @@ export default class LegacyCallHandler extends EventEmitter {
                         title = _t("User Busy");
                         description = _t("The user you called is busy.");
                     } else {
-                        title = _t("Call Failed");
+                        title = _t("voip|call_failed");
                         description = _t("The call could not be established");
                     }
 
@@ -856,23 +856,17 @@ export default class LegacyCallHandler extends EventEmitter {
         let description;
 
         if (call.type === CallType.Voice) {
-            title = _t("Unable to access microphone");
-            description = (
-                <div>
-                    {_t(
-                        "Call failed because microphone could not be accessed. Check that a microphone is plugged in and set up correctly.",
-                    )}
-                </div>
-            );
+            title = _t("voip|unable_to_access_microphone");
+            description = <div>{_t("voip|call_failed_microphone")}</div>;
         } else if (call.type === CallType.Video) {
-            title = _t("Unable to access webcam / microphone");
+            title = _t("voip|unable_to_access_media");
             description = (
                 <div>
-                    {_t("Call failed because webcam or microphone could not be accessed. Check that:")}
+                    {_t("voip|call_failed_media")}
                     <ul>
-                        <li>{_t("A microphone and webcam are plugged in and set up correctly")}</li>
-                        <li>{_t("Permission is granted to use the webcam")}</li>
-                        <li>{_t("No other application is using the webcam")}</li>
+                        <li>{_t("voip|call_failed_media_connected")}</li>
+                        <li>{_t("voip|call_failed_media_permissions")}</li>
+                        <li>{_t("voip|call_failed_media_applications")}</li>
                     </ul>
                 </div>
             );
@@ -914,8 +908,8 @@ export default class LegacyCallHandler extends EventEmitter {
             this.addCallForRoom(roomId, call);
         } catch (e) {
             Modal.createDialog(ErrorDialog, {
-                title: _t("Already in call"),
-                description: _t("You're already in a call with this person."),
+                title: _t("voip|already_in_call"),
+                description: _t("voip|already_in_call_person"),
             });
             return;
         }
@@ -956,8 +950,8 @@ export default class LegacyCallHandler extends EventEmitter {
         // if the runtime env doesn't do VoIP, whine.
         if (!cli.supportsVoip()) {
             Modal.createDialog(ErrorDialog, {
-                title: _t("Calls are unsupported"),
-                description: _t("You cannot place calls in this browser."),
+                title: _t("voip|unsupported"),
+                description: _t("voip|unsupported_browser"),
             });
             return;
         }

src/accessibility/KeyboardShortcutUtils.ts

@@ -43,7 +43,7 @@ const getUIOnlyShortcuts = (): IKeyboardShortcuts => {
                 key: Key.ENTER,
                 ctrlOrCmdKey: ctrlEnterToSend,
             },
-            displayName: _td("Send message"),
+            displayName: _td("composer|send_button_title"),
         },
         [KeyBindingAction.NewLine]: {
             default: {

src/components/views/beacon/RoomCallBanner.tsx

@@ -72,7 +72,7 @@ const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) =>
     return (
         <div className="mx_RoomCallBanner" onClick={onClick}>
             <div className="mx_RoomCallBanner_text">
-                <span className="mx_RoomCallBanner_label">{_t("Video call")}</span>
+                <span className="mx_RoomCallBanner_label">{_t("voip|video_call")}</span>
                 <GroupCallDuration groupCall={call.groupCall} />
             </div>
 

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -41,8 +41,8 @@ enum Category {
 }
 
 const categoryLabels: Record<Category, TranslationKey> = {
-    [Category.Room]: _td("common|room"),
-    [Category.Other]: _td("Other"),
+    [Category.Room]: _td("devtools|category_room"),
+    [Category.Other]: _td("devtools|category_other"),
 };
 
 export type Tool = React.FC<IDevtoolsProps> | ((props: IDevtoolsProps) => JSX.Element);

src/components/views/messages/CallEvent.tsx

@@ -71,7 +71,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                             </span>
                             <LiveContentSummary
                                 type={LiveContentType.Video}
-                                text={_t("Video call")}
+                                text={_t("voip|video_call")}
                                 active={false}
                                 participantCount={participatingMembers.length}
                             />

src/components/views/messages/LegacyCallEvent.tsx

@@ -117,7 +117,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
             <AccessibleTooltipButton
                 className={silenceClass}
                 onClick={this.props.callEventGrouper.toggleSilenced}
-                title={this.state.silenced ? _t("Sound on") : _t("Silence call")}
+                title={this.state.silenced ? _t("voip|unsilence") : _t("voip|silence")}
             />
         );
     }
@@ -185,7 +185,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
                 // Also the correct hangup code as of VoIP v1 (with underscore)
                 // Also, if we don't have a reason
                 const duration = this.props.callEventGrouper.duration!;
-                let text = _t("Call ended");
+                let text = _t("timeline|m.call.hangup|dm");
                 if (duration) {
                     text += " • " + formatPreciseDuration(duration);
                 }
@@ -268,7 +268,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
         const isVoice = this.props.callEventGrouper.isVoice;
-        const callType = isVoice ? _t("Voice call") : _t("Video call");
+        const callType = isVoice ? _t("voip|voice_call") : _t("voip|video_call");
         const callState = this.state.callState;
         const hangupReason = this.props.callEventGrouper.hangupReason;
         const content = this.renderContent();

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -112,8 +112,8 @@ const VoiceCallButton: FC<VoiceCallButtonProps> = ({ room, busy, setBusy, behavi
         <AccessibleTooltipButton
             className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_voiceCallButton"
             onClick={onClick}
-            title={_t("Voice call")}
-            tooltip={tooltip ?? _t("Voice call")}
+            title={_t("voip|voice_call")}
+            tooltip={tooltip ?? _t("voip|voice_call")}
             alignment={Alignment.Bottom}
             disabled={disabled || busy}
         />
@@ -228,8 +228,8 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
                 inputRef={buttonRef}
                 className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_videoCallButton"
                 onClick={onClick}
-                title={_t("Video call")}
-                tooltip={tooltip ?? _t("Video call")}
+                title={_t("voip|video_call")}
+                tooltip={tooltip ?? _t("voip|video_call")}
                 alignment={Alignment.Bottom}
                 disabled={disabled || busy}
             />

src/components/views/rooms/MessageComposer.tsx

@@ -78,7 +78,7 @@ function SendButton(props: ISendButtonProps): JSX.Element {
         <AccessibleTooltipButton
             className="mx_MessageComposer_sendMessage"
             onClick={props.onClick}
-            title={props.title ?? _t("Send message")}
+            title={props.title ?? _t("composer|send_button_title")}
             data-testid="sendmessagebtn"
         />
     );
@@ -303,19 +303,19 @@ export class MessageComposer extends React.Component<IProps, IState> {
         if (this.props.replyToEvent) {
             const replyingToThread = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name;
             if (replyingToThread && this.props.e2eStatus) {
-                return _t("Reply to encrypted thread…");
+                return _t("composer|placeholder_thread_encrypted");
             } else if (replyingToThread) {
-                return _t("Reply to thread…");
+                return _t("composer|placeholder_thread");
             } else if (this.props.e2eStatus) {
-                return _t("Send an encrypted reply…");
+                return _t("composer|placeholder_reply_encrypted");
             } else {
-                return _t("Send a reply…");
+                return _t("composer|placeholder_reply");
             }
         } else {
             if (this.props.e2eStatus) {
-                return _t("Send an encrypted message…");
+                return _t("composer|placeholder_encrypted");
             } else {
-                return _t("Send a message…");
+                return _t("composer|placeholder");
             }
         }
     };

src/components/views/rooms/RoomHeader.tsx

@@ -175,10 +175,10 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
             </Box>
             <Flex as="nav" align="center" gap="var(--cpd-space-2x)">
                 {!useElementCallExclusively && (
-                    <Tooltip label={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}>
+                    <Tooltip label={!voiceCallDisabledReason ? _t("voip|voice_call") : voiceCallDisabledReason!}>
                         <IconButton
                             disabled={!!voiceCallDisabledReason}
-                            title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}
+                            title={!voiceCallDisabledReason ? _t("voip|voice_call") : voiceCallDisabledReason!}
                             onClick={(evt) => {
                                 evt.stopPropagation();
                                 placeCall(room, CallType.Voice, voiceCallType);
@@ -188,10 +188,10 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                         </IconButton>
                     </Tooltip>
                 )}
-                <Tooltip label={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}>
+                <Tooltip label={!videoCallDisabledReason ? _t("voip|video_call") : videoCallDisabledReason!}>
                     <IconButton
                         disabled={!!videoCallDisabledReason}
-                        title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}
+                        title={!videoCallDisabledReason ? _t("voip|video_call") : videoCallDisabledReason!}
                         onClick={(evt) => {
                             evt.stopPropagation();
                             placeCall(room, CallType.Video, videoCallType);

src/components/views/rooms/RoomList.tsx

@@ -419,7 +419,7 @@ const TAG_AESTHETICS: TagAestheticsMap = {
         defaultHidden: false,
     },
     [DefaultTagID.ServerNotice]: {
-        sectionLabel: _td("System Alerts"),
+        sectionLabel: _td("common|system_alerts"),
         isInvite: false,
         defaultHidden: false,
     },

src/components/views/rooms/Stickerpicker.tsx

@@ -261,7 +261,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         // Load stickerpack content
         if (!!stickerpickerWidget?.content?.url) {
             // Set default name
-            stickerpickerWidget.content.name = stickerpickerWidget.content.name || _t("Stickerpack");
+            stickerpickerWidget.content.name = stickerpickerWidget.content.name || _t("common|stickerpack");
 
             // FIXME: could this use the same code as other apps?
             const stickerApp: IWidget = {

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -249,68 +249,74 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
 
         const plEventsToLabels: Record<EventType | string, TranslationKey | null> = {
             // These will be translated for us later.
-            [EventType.RoomAvatar]: isSpaceRoom ? _td("Change space avatar") : _td("Change room avatar"),
-            [EventType.RoomName]: isSpaceRoom ? _td("Change space name") : _td("Change room name"),
+            [EventType.RoomAvatar]: isSpaceRoom
+                ? _td("room_settings|permissions|m.room.avatar_space")
+                : _td("room_settings|permissions|m.room.avatar"),
+            [EventType.RoomName]: isSpaceRoom
+                ? _td("room_settings|permissions|m.room.name_space")
+                : _td("room_settings|permissions|m.room.name"),
             [EventType.RoomCanonicalAlias]: isSpaceRoom
-                ? _td("Change main address for the space")
-                : _td("Change main address for the room"),
-            [EventType.SpaceChild]: _td("Manage rooms in this space"),
-            [EventType.RoomHistoryVisibility]: _td("Change history visibility"),
-            [EventType.RoomPowerLevels]: _td("Change permissions"),
-            [EventType.RoomTopic]: isSpaceRoom ? _td("Change description") : _td("Change topic"),
-            [EventType.RoomTombstone]: _td("Upgrade the room"),
-            [EventType.RoomEncryption]: _td("Enable room encryption"),
-            [EventType.RoomServerAcl]: _td("Change server ACLs"),
-            [EventType.Reaction]: _td("Send reactions"),
-            [EventType.RoomRedaction]: _td("Remove messages sent by me"),
+                ? _td("room_settings|permissions|m.room.canonical_alias_space")
+                : _td("room_settings|permissions|m.room.canonical_alias"),
+            [EventType.SpaceChild]: _td("room_settings|permissions|m.space.child"),
+            [EventType.RoomHistoryVisibility]: _td("room_settings|permissions|m.room.history_visibility"),
+            [EventType.RoomPowerLevels]: _td("room_settings|permissions|m.room.power_levels"),
+            [EventType.RoomTopic]: isSpaceRoom
+                ? _td("room_settings|permissions|m.room.topic_space")
+                : _td("room_settings|permissions|m.room.topic"),
+            [EventType.RoomTombstone]: _td("room_settings|permissions|m.room.tombstone"),
+            [EventType.RoomEncryption]: _td("room_settings|permissions|m.room.encryption"),
+            [EventType.RoomServerAcl]: _td("room_settings|permissions|m.room.server_acl"),
+            [EventType.Reaction]: _td("room_settings|permissions|m.reaction"),
+            [EventType.RoomRedaction]: _td("room_settings|permissions|m.room.redaction"),
 
             // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
-            "im.vector.modular.widgets": isSpaceRoom ? null : _td("Modify widgets"),
-            [VoiceBroadcastInfoEventType]: _td("Voice broadcasts"),
+            "im.vector.modular.widgets": isSpaceRoom ? null : _td("room_settings|permissions|m.widget"),
+            [VoiceBroadcastInfoEventType]: _td("room_settings|permissions|io.element.voice_broadcast_info"),
         };
 
         if (SettingsStore.getValue("feature_pinning")) {
-            plEventsToLabels[EventType.RoomPinnedEvents] = _td("Manage pinned events");
+            plEventsToLabels[EventType.RoomPinnedEvents] = _td("room_settings|permissions|m.room.pinned_events");
         }
         // MSC3401: Native Group VoIP signaling
         if (SettingsStore.getValue("feature_group_calls")) {
-            plEventsToLabels[ElementCall.CALL_EVENT_TYPE.name] = _td("Start %(brand)s calls");
-            plEventsToLabels[ElementCall.MEMBER_EVENT_TYPE.name] = _td("Join %(brand)s calls");
+            plEventsToLabels[ElementCall.CALL_EVENT_TYPE.name] = _td("room_settings|permissions|m.call");
+            plEventsToLabels[ElementCall.MEMBER_EVENT_TYPE.name] = _td("room_settings|permissions|m.call.member");
         }
 
         const powerLevelDescriptors: Record<string, IPowerLevelDescriptor> = {
             "users_default": {
-                desc: _t("Default role"),
+                desc: _t("room_settings|permissions|users_default"),
                 defaultValue: 0,
             },
             "events_default": {
-                desc: _t("Send messages"),
+                desc: _t("room_settings|permissions|events_default"),
                 defaultValue: 0,
                 hideForSpace: true,
             },
             "invite": {
-                desc: _t("Invite users"),
+                desc: _t("room_settings|permissions|invite"),
                 defaultValue: 0,
             },
             "state_default": {
-                desc: _t("Change settings"),
+                desc: _t("room_settings|permissions|state_default"),
                 defaultValue: 50,
             },
             "kick": {
-                desc: _t("Remove users"),
+                desc: _t("room_settings|permissions|kick"),
                 defaultValue: 50,
             },
             "ban": {
-                desc: _t("Ban users"),
+                desc: _t("room_settings|permissions|ban"),
                 defaultValue: 50,
             },
             "redact": {
-                desc: _t("Remove messages sent by others"),
+                desc: _t("room_settings|permissions|redact"),
                 defaultValue: 50,
                 hideForSpace: true,
             },
             "notifications.room": {
-                desc: _t("Notify everyone"),
+                desc: _t("room_settings|permissions|notifications.room"),
                 defaultValue: 50,
                 hideForSpace: true,
             },

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -276,7 +276,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
 
     public render(): React.ReactNode {
         const secureBackup = (
-            <SettingsSubsection heading={_t("Secure Backup")}>
+            <SettingsSubsection heading={_t("common|secure_backup")}>
                 <SecureBackupPanel />
             </SettingsSubsection>
         );
@@ -292,7 +292,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         // in having advanced details here once all flows are implemented, we
         // can remove this.
         const crossSigning = (
-            <SettingsSubsection heading={_t("Cross-signing")}>
+            <SettingsSubsection heading={_t("common|cross_signing")}>
                 <CrossSigningPanel />
             </SettingsSubsection>
         );

src/components/views/voip/CallView.tsx

@@ -259,23 +259,23 @@ export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabledTooltip, con
                         kind="audio"
                         devices={audioInputs}
                         setDevice={setAudioInput}
-                        deviceListLabel={_t("Audio devices")}
+                        deviceListLabel={_t("voip|audio_devices")}
                         muted={audioMuted}
                         disabled={connecting}
                         toggle={toggleAudio}
-                        unmutedTitle={_t("Mute microphone")}
-                        mutedTitle={_t("Unmute microphone")}
+                        unmutedTitle={_t("voip|disable_microphone")}
+                        mutedTitle={_t("voip|enable_microphone")}
                     />
                     <DeviceButton
                         kind="video"
                         devices={videoInputs}
                         setDevice={setVideoInput}
-                        deviceListLabel={_t("Video devices")}
+                        deviceListLabel={_t("voip|video_devices")}
                         muted={videoMuted}
                         disabled={connecting}
                         toggle={toggleVideo}
-                        unmutedTitle={_t("Turn off camera")}
-                        mutedTitle={_t("Turn on camera")}
+                        unmutedTitle={_t("voip|disable_camera")}
+                        mutedTitle={_t("voip|enable_camera")}
                     />
                 </div>
             </div>