Migrate more strings to translation keys (#11672)

src/autocomplete/RoomProvider.tsx

@@ -134,7 +134,7 @@ export default class RoomProvider extends AutocompleteProvider {
     }
 
     public getName(): string {
-        return _t("Rooms");
+        return _t("common|rooms");
     }
 
     public renderCompletions(completions: React.ReactNode[]): React.ReactNode {

src/components/structures/SpaceRoomView.tsx

@@ -175,7 +175,7 @@ const SpaceLandingAddButton: React.FC<{ space: Room }> = ({ space }) => {
                     />
                     {canCreateSpace && (
                         <IconizedContextMenuOption
-                            label={_t("Add space")}
+                            label={_t("room_list|add_space_label")}
                             iconClassName="mx_RoomList_iconPlus"
                             onClick={(e) => {
                                 e.preventDefault();

src/components/views/context_menus/RoomContextMenu.tsx

@@ -164,7 +164,7 @@ const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
             <IconizedContextMenuCheckbox
                 onClick={(e) => onTagRoom(e, DefaultTagID.LowPriority)}
                 active={isLowPriority}
-                label={_t("Low priority")}
+                label={_t("common|low_priority")}
                 iconClassName="mx_RoomTile_iconArrowDown"
             />
         );

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -387,7 +387,7 @@ const defaultRendererFactory =
             </div>
         );
 
-export const defaultRoomsRenderer = defaultRendererFactory(_td("Rooms"));
+export const defaultRoomsRenderer = defaultRendererFactory(_td("common|rooms"));
 export const defaultSpacesRenderer = defaultRendererFactory(_td("common|spaces"));
 export const defaultDmsRenderer = defaultRendererFactory(_td("Direct Messages"));
 

src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx

@@ -92,7 +92,7 @@ export function RoomResultContextMenus({ room }: Props): JSX.Element {
                         const target = ev.target as HTMLElement;
                         setGeneralMenuPosition(target.getBoundingClientRect());
                     }}
-                    title={room.isSpaceRoom() ? _t("space|context_menu|options") : _t("Room options")}
+                    title={room.isSpaceRoom() ? _t("space|context_menu|options") : _t("room|context_menu|title")}
                     isExpanded={generalMenuPosition !== null}
                 />
             )}

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -788,7 +788,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     role="group"
                     aria-labelledby="mx_SpotlightDialog_section_rooms"
                 >
-                    <h4 id="mx_SpotlightDialog_section_rooms">{_t("Rooms")}</h4>
+                    <h4 id="mx_SpotlightDialog_section_rooms">{_t("common|rooms")}</h4>
                     <div>{results[Section.Rooms].slice(0, SECTION_LIMIT).map(resultMapper)}</div>
                 </div>
             );

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -212,9 +212,12 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
         menu = (
             <IconizedContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
                 <IconizedContextMenuOptionList>
-                    <IconizedContextMenuOption label={_t("Video call (Jitsi)")} onClick={onJitsiClick} />
                     <IconizedContextMenuOption
-                        label={_t("Video call (%(brand)s)", { brand })}
+                        label={_t("room|header|video_call_button_jitsi")}
+                        onClick={onJitsiClick}
+                    />
+                    <IconizedContextMenuOption
+                        label={_t("room|header|video_call_button_ec", { brand })}
                         onClick={onElementClick}
                     />
                 </IconizedContextMenuOptionList>
@@ -412,13 +415,13 @@ const CallLayoutSelector: FC<CallLayoutSelectorProps> = ({ call }) => {
                 <IconizedContextMenuOptionList>
                     <IconizedContextMenuRadio
                         iconClassName="mx_LegacyRoomHeader_freedomIcon"
-                        label={_t("Freedom")}
+                        label={_t("room|header|video_call_ec_layout_freedom")}
                         active={layout === Layout.Tile}
                         onClick={onFreedomClick}
                     />
                     <IconizedContextMenuRadio
                         iconClassName="mx_LegacyRoomHeader_spotlightIcon"
-                        label={_t("Spotlight")}
+                        label={_t("room|header|video_call_ec_layout_spotlight")}
                         active={layout === Layout.Spotlight}
                         onClick={onSpotlightClick}
                     />
@@ -436,7 +439,7 @@ const CallLayoutSelector: FC<CallLayoutSelectorProps> = ({ call }) => {
                     "mx_LegacyRoomHeader_layoutButton--spotlight": layout === Layout.Spotlight,
                 })}
                 onClick={onClick}
-                title={_t("Change layout")}
+                title={_t("room|header|video_call_ec_change_layout")}
                 alignment={Alignment.Bottom}
                 key="layout"
             />
@@ -589,7 +592,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                 <AccessibleTooltipButton
                     className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_forgetButton"
                     onClick={this.props.onForgetClick}
-                    title={_t("Forget room")}
+                    title={_t("room|header|forget_room_button")}
                     alignment={Alignment.Bottom}
                     key="forget"
                 />,
@@ -603,7 +606,11 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                         mx_LegacyRoomHeader_appsButton_highlight: this.props.appsShown,
                     })}
                     onClick={this.props.onAppsClick}
-                    title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")}
+                    title={
+                        this.props.appsShown
+                            ? _t("room|header|hide_widgets_button")
+                            : _t("room|header|show_widgets_button")
+                    }
                     aria-checked={this.props.appsShown}
                     alignment={Alignment.Bottom}
                     key="apps"
@@ -643,7 +650,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     <AccessibleButton
                         className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_closeButton"
                         onClick={this.onHideCallClick}
-                        title={_t("Close call")}
+                        title={_t("room|header|close_call_button")}
                         key="close"
                     />,
                 );
@@ -652,7 +659,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     <AccessibleTooltipButton
                         className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_minimiseButton"
                         onClick={this.onHideCallClick}
-                        title={_t("View chat timeline")}
+                        title={_t("room|header|video_room_view_chat_button")}
                         alignment={Alignment.Bottom}
                         key="minimise"
                     />,
@@ -718,7 +725,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     className="mx_LegacyRoomHeader_name"
                     onClick={this.onContextMenuOpenClick}
                     isExpanded={!!this.state.contextMenuPosition}
-                    title={_t("Room options")}
+                    title={_t("room|context_menu|title")}
                     alignment={Alignment.Bottom}
                 >
                     {roomName}

src/components/views/rooms/MemberList.tsx

@@ -371,7 +371,7 @@ export default class MemberList extends React.Component<IProps, IState> {
                         className="mx_MemberList_invite"
                         onClick={null}
                         disabled
-                        tooltip={_t("You do not have permission to invite users")}
+                        tooltip={_t("member_list|invite_button_no_perms_tooltip")}
                     >
                         <span>{inviteButtonText}</span>
                     </AccessibleTooltipButton>
@@ -382,7 +382,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         let invitedHeader;
         let invitedSection;
         if (this.getChildCountInvited() > 0) {
-            invitedHeader = <h2>{_t("Invited")}</h2>;
+            invitedHeader = <h2>{_t("member_list|invited_list_heading")}</h2>;
             invitedSection = (
                 <TruncatedList
                     className="mx_MemberList_section mx_MemberList_invited"
@@ -397,7 +397,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         const footer = (
             <SearchBox
                 className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
-                placeholder={_t("Filter room members")}
+                placeholder={_t("member_list|filter_placeholder")}
                 onSearch={this.onSearchQueryChanged}
                 initialValue={this.props.searchQuery}
             />

src/components/views/rooms/MemberTile.tsx

@@ -173,7 +173,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
     }
 
     private getPowerLabel(): string {
-        return _t("%(userName)s (power %(powerLevelNumber)s)", {
+        return _t("member_list|power_label", {
             userName: UserIdentifierCustomisations.getDisplayUserIdentifier(this.props.member.userId, {
                 roomId: this.props.member.roomId,
             }),

src/components/views/rooms/MessageComposer.tsx

@@ -535,7 +535,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                     className="mx_MessageComposer_roomReplaced_link"
                     onClick={this.onTombstoneClick}
                 >
-                    {_t("The conversation continues here.")}
+                    {_t("composer|room_upgraded_link")}
                 </a>
             ) : (
                 ""
@@ -551,7 +551,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                             src={require("../../../../res/img/room_replaced.svg").default}
                         />
                         <span className="mx_MessageComposer_roomReplaced_header">
-                            {_t("This room has been replaced and is no longer active.")}
+                            {_t("composer|room_upgraded_notice")}
                         </span>
                         <br />
                         {continuesLink}
@@ -561,7 +561,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
         } else {
             controls.push(
                 <div key="controls_error" className="mx_MessageComposer_noperm_error">
-                    {_t("You do not have permission to post to this room")}
+                    {_t("composer|no_perms_notice")}
                 </div>,
             );
         }
@@ -649,7 +649,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
                                 <SendButton
                                     key="controls_send"
                                     onClick={this.sendMessage}
-                                    title={this.state.haveRecording ? _t("Send voice message") : undefined}
+                                    title={
+                                        this.state.haveRecording ? _t("composer|send_button_voice_message") : undefined
+                                    }
                                 />
                             )}
                         </div>

src/components/views/rooms/MessageComposerButtons.tsx

@@ -258,7 +258,7 @@ function showStickersButton(props: IProps): ReactElement | null {
             className="mx_MessageComposer_button"
             iconClassName="mx_MessageComposer_stickers"
             onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
-            title={props.isStickerPickerOpen ? _t("Hide stickers") : _t("common|sticker")}
+            title={props.isStickerPickerOpen ? _t("composer|close_sticker_picker") : _t("common|sticker")}
         />
     ) : null;
 }
@@ -283,7 +283,7 @@ function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement | nu
             className="mx_MessageComposer_button"
             iconClassName="mx_MessageComposer_voiceMessage"
             onClick={props.onRecordStartEndClick}
-            title={_t("Voice Message")}
+            title={_t("composer|voice_message_button")}
         />
     );
 }
@@ -309,8 +309,8 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
         );
         if (!canSend) {
             Modal.createDialog(ErrorDialog, {
-                title: _t("Permission Required"),
-                description: _t("You do not have permission to start polls in this room."),
+                title: _t("composer|poll_button_no_perms_title"),
+                description: _t("composer|poll_button_no_perms_description"),
             });
         } else {
             const threadId =
@@ -338,7 +338,7 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
                 className="mx_MessageComposer_button"
                 iconClassName="mx_MessageComposer_poll"
                 onClick={this.onCreateClick}
-                title={_t("Poll")}
+                title={_t("composer|poll_button")}
             />
         );
     }
@@ -364,7 +364,7 @@ interface WysiwygToggleButtonProps {
 }
 
 function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonProps): JSX.Element {
-    const title = isRichTextEnabled ? _t("Hide formatting") : _t("Show formatting");
+    const title = isRichTextEnabled ? _t("composer|mode_plain") : _t("composer|mode_rich_text");
 
     return (
         <CollapsibleButton

src/components/views/rooms/MessageComposerFormatBar.tsx

@@ -52,7 +52,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
             mx_MessageComposerFormatBar_shown: this.state.visible,
         });
         return (
-            <Toolbar className={classes} ref={this.formatBarRef} aria-label={_t("Formatting")}>
+            <Toolbar className={classes} ref={this.formatBarRef} aria-label={_t("composer|formatting_toolbar_label")}>
                 <FormatButton
                     label={_t("composer|format_bold")}
                     onClick={() => this.props.onAction(Formatting.Bold)}
@@ -61,7 +61,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
                     visible={this.state.visible}
                 />
                 <FormatButton
-                    label={_t("Italics")}
+                    label={_t("composer|format_italics")}
                     onClick={() => this.props.onAction(Formatting.Italics)}
                     icon="Italic"
                     shortcut={this.props.shortcuts.italics}
@@ -88,7 +88,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
                     visible={this.state.visible}
                 />
                 <FormatButton
-                    label={_t("Insert link")}
+                    label={_t("composer|format_insert_link")}
                     onClick={() => this.props.onAction(Formatting.InsertLink)}
                     icon="InsertLink"
                     shortcut={this.props.shortcuts.insert_link}

src/components/views/rooms/NotificationBadge.tsx

@@ -122,7 +122,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         let label: string | undefined;
         let tooltip: JSX.Element | undefined;
         if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
-            label = _t("Message didn't send. Click for info.");
+            label = _t("notifications|message_didnt_send");
             tooltip = <Tooltip className="mx_NotificationBadge_tooltip" label={label} />;
         }
 

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -100,7 +100,9 @@ export function ReadReceiptGroup({
     const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
         label: (
             <>
-                <div className="mx_Tooltip_title">{_t("Seen by %(count)s people", { count: readReceipts.length })}</div>
+                <div className="mx_Tooltip_title">
+                    {_t("timeline|read_receipt_title", { count: readReceipts.length })}
+                </div>
                 <div className="mx_Tooltip_sub">{tooltipText}</div>
             </>
         ),
@@ -176,7 +178,7 @@ export function ReadReceiptGroup({
             <ContextMenu menuClassName="mx_ReadReceiptGroup_popup" onFinished={closeMenu} {...aboveLeftOf(buttonRect)}>
                 <AutoHideScrollbar>
                     <SectionHeader className="mx_ReadReceiptGroup_title">
-                        {_t("Seen by %(count)s people", { count: readReceipts.length })}
+                        {_t("timeline|read_receipt_title", { count: readReceipts.length })}
                     </SectionHeader>
                     {readReceipts.map((receipt) => (
                         <ReadReceiptPerson
@@ -193,7 +195,7 @@ export function ReadReceiptGroup({
 
     return (
         <div className="mx_EventTile_msgOption">
-            <div className="mx_ReadReceiptGroup" role="group" aria-label={_t("Read receipts")}>
+            <div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}>
                 <AccessibleButton
                     className="mx_ReadReceiptGroup_button"
                     inputRef={button}

src/components/views/rooms/ReplyPreview.tsx

@@ -47,7 +47,7 @@ export default class ReplyPreview extends React.Component<IProps> {
             <div className="mx_ReplyPreview">
                 <div className="mx_ReplyPreview_section">
                     <div className="mx_ReplyPreview_header">
-                        <span>{_t("Replying")}</span>
+                        <span>{_t("composer|replying_title")}</span>
                         <AccessibleButton
                             className="mx_ReplyPreview_header_cancel"
                             onClick={() => cancelQuoting(this.context.timelineRenderingType)}