Migrate more strings to translation keys (#11680)

src/components/views/rooms/E2EIcon.tsx

@@ -33,14 +33,14 @@ export enum E2EState {
 }
 
 const crossSigningUserTitles: { [key in E2EState]?: TranslationKey } = {
-    [E2EState.Warning]: _td("This user has not verified all of their sessions."),
-    [E2EState.Normal]: _td("You have not verified this user."),
-    [E2EState.Verified]: _td("You have verified this user. This user has verified all of their sessions."),
+    [E2EState.Warning]: _td("encryption|cross_signing_user_warning"),
+    [E2EState.Normal]: _td("encryption|cross_signing_user_normal"),
+    [E2EState.Verified]: _td("encryption|cross_signing_user_verified"),
 };
 const crossSigningRoomTitles: { [key in E2EState]?: TranslationKey } = {
-    [E2EState.Warning]: _td("Someone is using an unknown session"),
-    [E2EState.Normal]: _td("This room is end-to-end encrypted"),
-    [E2EState.Verified]: _td("Everyone in this room is verified"),
+    [E2EState.Warning]: _td("encryption|cross_signing_room_warning"),
+    [E2EState.Normal]: _td("encryption|cross_signing_room_normal"),
+    [E2EState.Verified]: _td("encryption|cross_signing_room_verified"),
 };
 
 interface Props {

src/components/views/rooms/EditMessageComposer.tsx

@@ -482,7 +482,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
                     room={room}
                     threadId={this.props.editState?.getEvent()?.getThread()?.id}
                     initialCaret={this.props.editState.getCaret() ?? undefined}
-                    label={_t("Edit message")}
+                    label={_t("composer|edit_composer_label")}
                     onChange={this.onChange}
                 />
                 <div className="mx_EditMessageComposer_buttons">

src/components/views/rooms/EventTile.tsx

@@ -512,12 +512,12 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             if (this.props.highlightLink) {
                 return (
                     <a className="mx_ThreadSummary_icon" href={this.props.highlightLink}>
-                        {_t("From a thread")}
+                        {_t("timeline|thread_info_basic")}
                     </a>
                 );
             }
 
-            return <p className="mx_ThreadSummary_icon">{_t("From a thread")}</p>;
+            return <p className="mx_ThreadSummary_icon">{_t("timeline|thread_info_basic")}</p>;
         }
     }
 
@@ -741,25 +741,23 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                     break;
 
                 case EventShieldReason.UNVERIFIED_IDENTITY:
-                    shieldReasonMessage = _t("Encrypted by an unverified user.");
+                    shieldReasonMessage = _t("encryption|event_shield_reason_unverified_identity");
                     break;
 
                 case EventShieldReason.UNSIGNED_DEVICE:
-                    shieldReasonMessage = _t("Encrypted by a device not verified by its owner.");
+                    shieldReasonMessage = _t("encryption|event_shield_reason_unsigned_device");
                     break;
 
                 case EventShieldReason.UNKNOWN_DEVICE:
-                    shieldReasonMessage = _t("Encrypted by an unknown or deleted device.");
+                    shieldReasonMessage = _t("encryption|event_shield_reason_unknown_device");
                     break;
 
                 case EventShieldReason.AUTHENTICITY_NOT_GUARANTEED:
-                    shieldReasonMessage = _t(
-                        "The authenticity of this encrypted message can't be guaranteed on this device.",
-                    );
+                    shieldReasonMessage = _t("encryption|event_shield_reason_authenticity_not_guaranteed");
                     break;
 
                 case EventShieldReason.MISMATCHED_SENDER_KEY:
-                    shieldReasonMessage = _t("Encrypted by an unverified session");
+                    shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
                     break;
             }
 
@@ -936,7 +934,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             logger.warn(`Event type not supported: type:${eventType} isState:${mxEvent.isState()}`);
             return (
                 <div className="mx_EventTile mx_EventTile_info mx_MNoticeBody">
-                    <div className="mx_EventTile_line">{_t("This event could not be displayed")}</div>
+                    <div className="mx_EventTile_line">{_t("timeline|error_no_renderer")}</div>
                 </div>
             );
         }
@@ -1468,16 +1466,12 @@ const SafeEventTile = forwardRef<UnwrappedEventTile, EventTileProps>((props, ref
 export default SafeEventTile;
 
 function E2ePadlockUnencrypted(props: Omit<IE2ePadlockProps, "title" | "icon">): JSX.Element {
-    return <E2ePadlock title={_t("Unencrypted")} icon={E2ePadlockIcon.Warning} {...props} />;
+    return <E2ePadlock title={_t("common|unencrypted")} icon={E2ePadlockIcon.Warning} {...props} />;
 }
 
 function E2ePadlockDecryptionFailure(props: Omit<IE2ePadlockProps, "title" | "icon">): JSX.Element {
     return (
-        <E2ePadlock
-            title={_t("This message could not be decrypted")}
-            icon={E2ePadlockIcon.DecryptionFailure}
-            {...props}
-        />
+        <E2ePadlock title={_t("timeline|undecryptable_tooltip")} icon={E2ePadlockIcon.DecryptionFailure} {...props} />
     );
 }
 
@@ -1556,13 +1550,13 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
         nonCssBadge = <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />;
     }
 
-    let label = _t("Sending your message…");
+    let label = _t("timeline|send_state_sending");
     if (messageState === "encrypting") {
-        label = _t("Encrypting your message…");
+        label = _t("timeline|send_state_encrypting");
     } else if (isSent) {
-        label = _t("Your message was sent");
+        label = _t("timeline|send_state_sent");
     } else if (isFailed) {
-        label = _t("Failed to send");
+        label = _t("timeline|send_state_failed");
     }
     const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
         id: tooltipId,

src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx

@@ -31,11 +31,11 @@ export function EventTileThreadToolbar({
     copyLinkToThread: (evt: ButtonEvent) => void;
 }): JSX.Element {
     return (
-        <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
+        <Toolbar className="mx_MessageActionBar" aria-label={_t("timeline|mab|label")} aria-live="off">
             <RovingAccessibleTooltipButton
                 className="mx_MessageActionBar_iconButton"
                 onClick={viewInRoom}
-                title={_t("View in room")}
+                title={_t("timeline|mab|view_in_room")}
                 key="view_in_room"
             >
                 <ViewInRoomIcon />
@@ -43,7 +43,7 @@ export function EventTileThreadToolbar({
             <RovingAccessibleTooltipButton
                 className="mx_MessageActionBar_iconButton"
                 onClick={copyLinkToThread}
-                title={_t("Copy link to thread")}
+                title={_t("timeline|mab|copy_link_thread")}
                 key="copy_link_to_thread"
             >
                 <LinkIcon />

src/components/views/rooms/JumpToBottomButton.tsx

@@ -39,7 +39,7 @@ const JumpToBottomButton: React.FC<IProps> = (props) => {
         <div className={className}>
             <AccessibleButton
                 className="mx_JumpToBottomButton_scrollDown"
-                title={_t("Scroll to most recent messages")}
+                title={_t("room|jump_to_bottom_button")}
                 onClick={props.onScrollToBottomClick}
             />
             {badge}

src/components/views/rooms/PinnedEventTile.tsx

@@ -118,7 +118,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
                     </span>
 
                     <AccessibleButton onClick={this.onTileClicked} kind="link">
-                        {_t("View message")}
+                        {_t("common|view_message")}
                     </AccessibleButton>
                 </div>
             </div>

src/components/views/rooms/ReplyTile.tsx

@@ -120,9 +120,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
             const { mxEvent } = this.props;
             logger.warn(`Event type not supported: type:${mxEvent.getType()} isState:${mxEvent.isState()}`);
             return (
-                <div className="mx_ReplyTile mx_ReplyTile_info mx_MNoticeBody">
-                    {_t("This event could not be displayed")}
-                </div>
+                <div className="mx_ReplyTile mx_ReplyTile_info mx_MNoticeBody">{_t("timeline|error_no_renderer")}</div>
             );
         }
 

src/components/views/rooms/RoomPreviewCard.tsx

@@ -184,7 +184,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
 
         joinButtons = (
             <AccessibleButton kind="primary" onClick={viewLabs}>
-                {_t("Show Labs settings")}
+                {_t("room|show_labs_settings")}
             </AccessibleButton>
         );
     }

src/components/views/rooms/RoomTileCallSummary.tsx

@@ -41,7 +41,7 @@ export const RoomTileCallSummary: FC<Props> = ({ call }) => {
             break;
         case ConnectionState.Connected:
         case ConnectionState.Disconnecting:
-            text = _t("Joined");
+            text = _t("common|joined");
             active = true;
             break;
     }

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -71,11 +71,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
         let doUpgradeWarnings = (
             <div>
                 <div className="mx_RoomUpgradeWarningBar_body">
-                    <p>
-                        {_t(
-                            "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.",
-                        )}
-                    </p>
+                    <p>{_t("room|upgrade_warning_bar")}</p>
                     <p>
                         {_t(
                             "room_settings|advanced|room_upgrade_warning",
@@ -98,7 +94,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
         if (this.state.upgraded) {
             doUpgradeWarnings = (
                 <div className="mx_RoomUpgradeWarningBar_body">
-                    <p>{_t("This room has already been upgraded.")}</p>
+                    <p>{_t("room|upgrade_warning_bar_upgraded")}</p>
                 </div>
             );
         }
@@ -108,7 +104,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
                 <div className="mx_RoomUpgradeWarningBar_wrapped">
                     <div className="mx_RoomUpgradeWarningBar_header">
                         {_t(
-                            "This room is running room version <roomVersion />, which this homeserver has marked as <i>unstable</i>.",
+                            "room|upgrade_warning_bar_unstable",
                             {},
                             {
                                 roomVersion: () => <code>{this.props.room.getVersion()}</code>,
@@ -117,9 +113,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
                         )}
                     </div>
                     {doUpgradeWarnings}
-                    <div className="mx_RoomUpgradeWarningBar_small">
-                        {_t("Only room administrators will see this warning")}
-                    </div>
+                    <div className="mx_RoomUpgradeWarningBar_small">{_t("room|upgrade_warning_bar_admins")}</div>
                 </div>
             </div>
         );

src/components/views/rooms/SearchBar.tsx

@@ -104,7 +104,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             aria-checked={this.state.scope === SearchScope.Room}
                             role="radio"
                         >
-                            {_t("This Room")}
+                            {_t("room|search|this_room")}
                         </AccessibleButton>
                         <AccessibleButton
                             className={allRoomsClasses}
@@ -112,7 +112,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             aria-checked={this.state.scope === SearchScope.All}
                             role="radio"
                         >
-                            {_t("All Rooms")}
+                            {_t("room|search|all_rooms")}
                         </AccessibleButton>
                     </div>
                     <div className="mx_SearchBar_input mx_textinput">
@@ -120,9 +120,11 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             ref={this.searchTerm}
                             type="text"
                             autoFocus={true}
-                            placeholder={_t("Search…")}
+                            placeholder={_t("room|search|field_placeholder")}
                             aria-label={
-                                this.state.scope === SearchScope.Room ? _t("Search this room") : _t("Search all rooms")
+                                this.state.scope === SearchScope.Room
+                                    ? _t("room|search|this_room_button")
+                                    : _t("room|search|all_rooms_button")
                             }
                             onKeyDown={this.onSearchChange}
                         />

src/components/views/rooms/Stickerpicker.tsx

@@ -94,7 +94,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                     return this.scalarClient;
                 })
                 .catch((e) => {
-                    this.imError(_td("Failed to connect to integration manager"), e);
+                    this.imError(_td("integration_manager|error_connecting_heading"), e);
                 });
         } else {
             IntegrationManagers.sharedInstance().openNoManagerDialog();
@@ -213,8 +213,8 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private defaultStickerpickerContent(): JSX.Element {
         return (
             <AccessibleButton onClick={this.launchManageIntegrations} className="mx_Stickers_contentPlaceholder">
-                <p>{_t("You don't currently have any stickerpacks enabled")}</p>
-                <p className="mx_Stickers_addLink">{_t("Add some now")}</p>
+                <p>{_t("stickers|empty")}</p>
+                <p className="mx_Stickers_addLink">{_t("stickers|empty_add_prompt")}</p>
                 <img src={require("../../../../res/img/stickerpack-placeholder.png")} alt="" />
             </AccessibleButton>
         );

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -106,10 +106,8 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                 this.setState({ invited: true });
 
                 Modal.createDialog(ErrorDialog, {
-                    title: _t("Failed to revoke invite"),
-                    description: _t(
-                        "Could not revoke the invite. The server may be experiencing a temporary problem or you do not have sufficient permissions to revoke the invite.",
-                    ),
+                    title: _t("user_info|error_revoke_3pid_invite_title"),
+                    description: _t("user_info|error_revoke_3pid_invite_description"),
                 });
             });
 
@@ -122,9 +120,9 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
         if (this.state.canKick && this.state.invited) {
             adminTools = (
                 <div className="mx_MemberInfo_container">
-                    <h3>{_t("Admin Tools")}</h3>
+                    <h3>{_t("user_info|admin_tools_section")}</h3>
                     <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKickClick}>
-                        {_t("Revoke invite")}
+                        {_t("user_info|revoke_invite")}
                     </AccessibleButton>
                 </div>
             );
@@ -153,7 +151,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                     <h2>{this.state.displayName}</h2>
                 </div>
                 <div className="mx_MemberInfo_container mx_MemberInfo_container--profile">
-                    {_t("Invited by %(sender)s", { sender: this.state.senderName })}
+                    {_t("user_info|invited_by", { sender: this.state.senderName })}
                 </div>
                 {adminTools}
             </div>

src/components/views/rooms/ThreadSummary.tsx

@@ -59,7 +59,7 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
                 });
                 PosthogTrackers.trackInteraction("WebRoomTimelineThreadSummaryButton", ev);
             }}
-            aria-label={_t("Open thread")}
+            aria-label={_t("threads|open_thread")}
         >
             <span className="mx_ThreadSummary_replies_amount">{countSection}</span>
             <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
@@ -111,9 +111,9 @@ export const ThreadMessagePreview: React.FC<IPreviewProps> = ({ thread, showDisp
             {lastReply.isDecryptionFailure() ? (
                 <div
                     className="mx_ThreadSummary_content mx_DecryptionFailureBody"
-                    title={_t("Unable to decrypt message")}
+                    title={_t("threads|unable_to_decrypt")}
                 >
-                    <span className="mx_ThreadSummary_message-preview">{_t("Unable to decrypt message")}</span>
+                    <span className="mx_ThreadSummary_message-preview">{_t("threads|unable_to_decrypt")}</span>
                 </div>
             ) : (
                 <div className="mx_ThreadSummary_content" title={preview}>

src/components/views/rooms/TopUnreadMessagesBar.tsx

@@ -30,7 +30,7 @@ export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton
                     className="mx_TopUnreadMessagesBar_scrollUp"
-                    title={_t("Jump to first unread message.")}
+                    title={_t("room|jump_read_marker")}
                     onClick={this.props.onScrollUpClick}
                 />
                 <AccessibleButton

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -180,14 +180,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         // The "microphone access error" dialogs are used a lot, so let's functionify them
         const accessError = (): void => {
             Modal.createDialog(ErrorDialog, {
-                title: _t("Unable to access your microphone"),
+                title: _t("voip|unable_to_access_audio_input_title"),
                 description: (
                     <>
-                        <p>
-                            {_t(
-                                "We were unable to access your microphone. Please check your browser settings and try again.",
-                            )}
-                        </p>
+                        <p>{_t("voip|unable_to_access_audio_input_description")}</p>
                     </>
                 ),
             });
@@ -199,14 +195,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             const devices = await MediaDeviceHandler.getDevices();
             if (!devices?.[MediaDeviceKindEnum.AudioInput]?.length) {
                 Modal.createDialog(ErrorDialog, {
-                    title: _t("No microphone found"),
+                    title: _t("voip|no_audio_input_title"),
                     description: (
                         <>
-                            <p>
-                                {_t(
-                                    "We didn't find a microphone on your device. Please check your settings and try again.",
-                                )}
-                            </p>
+                            <p>{_t("voip|no_audio_input_description")}</p>
                         </>
                     ),
                 });
@@ -273,9 +265,9 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         let stopBtn;
         let deleteButton;
         if (this.state.recordingPhase === RecordingState.Started) {
-            let tooltip = _t("Send voice message");
+            let tooltip = _t("composer|send_voice_message");
             if (!!this.state.recorder) {
-                tooltip = _t("Stop recording");
+                tooltip = _t("composer|stop_voice_message");
             }
 
             stopBtn = (
@@ -316,7 +308,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
                             notification={StaticNotificationState.forSymbol("!", NotificationColor.Red)}
                         />
                     </span>
-                    <span className="text-warning">{_t("Failed to send")}</span>
+                    <span className="text-warning">{_t("timeline|send_state_failed")}</span>
                 </span>
             );
         }

src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx

@@ -71,7 +71,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
     return (
         <BaseDialog
             className="mx_LinkModal"
-            title={isEditing ? _t("Edit link") : _t("Create a link")}
+            title={isEditing ? _t("composer|link_modal|title_edit") : _t("composer|link_modal|title_create")}
             hasCancel={true}
             onFinished={onFinished}
         >
@@ -96,7 +96,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                     <Field
                         required={true}
                         autoFocus={true}
-                        label={_t("Text")}
+                        label={_t("composer|link_modal|text_field_label")}
                         value={fields.text}
                         className="mx_LinkModal_Field"
                         placeholder=""
@@ -108,7 +108,7 @@ export const LinkModal: React.FC<LinkModalProps> = ({
                 <Field
                     required={true}
                     autoFocus={!hasText}
-                    label={_t("Link")}
+                    label={_t("composer|link_modal|link_field_label")}
                     value={fields.link}
                     className="mx_LinkModal_Field"
                     placeholder=""