Migrate more strings to translation keys (#11637)

src/autocomplete/CommandProvider.tsx

@@ -104,15 +104,15 @@ export default class CommandProvider extends AutocompleteProvider {
     }
 
     public getName(): string {
-        return "*️⃣ " + _t("Commands");
+        return "*️⃣ " + _t("composer|autocomplete|command_description");
     }
 
     public renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
                 role="presentation"
-                aria-label={_t("Command Autocomplete")}
+                aria-label={_t("composer|autocomplete|command_a11y")}
             >
                 {completions}
             </div>

src/autocomplete/EmojiProvider.tsx

@@ -184,7 +184,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             <div
                 className="mx_Autocomplete_Completion_container_pill"
                 role="presentation"
-                aria-label={_t("Emoji Autocomplete")}
+                aria-label={_t("composer|autocomplete|emoji_a11y")}
             >
                 {completions}
             </div>

src/autocomplete/NotifProvider.tsx

@@ -55,7 +55,7 @@ export default class NotifProvider extends AutocompleteProvider {
                     type: "at-room",
                     suffix: " ",
                     component: (
-                        <PillCompletion title="@room" description={_t("Notify the whole room")}>
+                        <PillCompletion title="@room" description={_t("composer|autocomplete|@room_description")}>
                             <RoomAvatar size="24px" room={this.room} />
                         </PillCompletion>
                     ),
@@ -67,15 +67,15 @@ export default class NotifProvider extends AutocompleteProvider {
     }
 
     public getName(): string {
-        return "❗️ " + _t("Room Notification");
+        return "❗️ " + _t("composer|autocomplete|notification_description");
     }
 
     public renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
                 role="presentation"
-                aria-label={_t("Notification Autocomplete")}
+                aria-label={_t("composer|autocomplete|notification_a11y")}
             >
                 {completions}
             </div>

src/autocomplete/RoomProvider.tsx

@@ -142,7 +142,7 @@ export default class RoomProvider extends AutocompleteProvider {
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
                 role="presentation"
-                aria-label={_t("Room Autocomplete")}
+                aria-label={_t("composer|autocomplete|room_a11y")}
             >
                 {completions}
             </div>

src/autocomplete/SpaceProvider.tsx

@@ -38,7 +38,7 @@ export default class SpaceProvider extends RoomProvider {
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
                 role="listbox"
-                aria-label={_t("Space Autocomplete")}
+                aria-label={_t("composer|autocomplete|space_a11y")}
             >
                 {completions}
             </div>

src/autocomplete/UserProvider.tsx

@@ -146,7 +146,7 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     public getName(): string {
-        return _t("Users");
+        return _t("composer|autocomplete|user_description");
     }
 
     private makeUsers(): void {
@@ -186,7 +186,7 @@ export default class UserProvider extends AutocompleteProvider {
             <div
                 className="mx_Autocomplete_Completion_container_pill"
                 role="presentation"
-                aria-label={_t("User Autocomplete")}
+                aria-label={_t("composer|autocomplete|user_a11y")}
             >
                 {completions}
             </div>

src/components/structures/FileDropTarget.tsx

@@ -119,7 +119,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
                     className="mx_FileDropTarget_image"
                     alt=""
                 />
-                {_t("Drop file here to upload")}
+                {_t("room|drop_file_prompt")}
             </div>
         );
     }

src/components/structures/FilePanel.tsx

@@ -231,7 +231,7 @@ class FilePanel extends React.Component<IProps, IState> {
                 <BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
                     <div className="mx_RoomView_empty">
                         {_t(
-                            "You must <a>register</a> to use this functionality",
+                            "file_panel|guest_note",
                             {},
                             {
                                 a: (sub) => (
@@ -247,7 +247,7 @@ class FilePanel extends React.Component<IProps, IState> {
         } else if (this.noRoom) {
             return (
                 <BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
-                    <div className="mx_RoomView_empty">{_t("You must join the room to see its files")}</div>
+                    <div className="mx_RoomView_empty">{_t("file_panel|peek_note")}</div>
                 </BaseCard>
             );
         }
@@ -256,8 +256,8 @@ class FilePanel extends React.Component<IProps, IState> {
 
         const emptyState = (
             <div className="mx_RightPanel_empty mx_FilePanel_empty">
-                <h2>{_t("No files visible in this room")}</h2>
-                <p>{_t("Attach files from chat or just drag and drop them anywhere in a room.")}</p>
+                <h2>{_t("file_panel|empty_heading")}</h2>
+                <p>{_t("file_panel|empty_description")}</p>
             </div>
         );
 

src/components/structures/MatrixChat.tsx

@@ -515,12 +515,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         const normalFontSize = "15px";
 
         const waitText = _t("Wait!");
-        const scamText = _t(
-            "If someone told you to copy/paste something here, there is a high likelihood you're being scammed!",
-        );
-        const devText = _t(
-            "If you know what you're doing, Element is open-source, be sure to check out our GitHub (https://github.com/vector-im/element-web/) and contribute!",
-        );
+        const scamText = _t("console_scam_warning");
+        const devText = _t("console_dev_note");
 
         global.mx_rage_logger.bypassRageshake(
             "log",

src/components/structures/MessagePanel.tsx

@@ -1232,9 +1232,9 @@ class CreationGrouper extends BaseGrouper {
         const roomId = ev.getRoomId();
         const creator = ev.sender?.name ?? ev.getSender();
         if (roomId && DMRoomMap.shared().getUserIdForRoomId(roomId)) {
-            summaryText = _t("%(creator)s created this DM.", { creator });
+            summaryText = _t("timeline|creation_summary_dm", { creator });
         } else {
-            summaryText = _t("%(creator)s created and configured the room.", { creator });
+            summaryText = _t("timeline|creation_summary_room", { creator });
         }
 
         ret.push(<NewRoomIntro key="newroomintro" />);

src/components/structures/NotificationPanel.tsx

@@ -58,8 +58,8 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
     public render(): React.ReactNode {
         const emptyState = (
             <div className="mx_RightPanel_empty mx_NotificationPanel_empty">
-                <h2>{_t("You're all caught up")}</h2>
-                <p>{_t("You have no visible notifications.")}</p>
+                <h2>{_t("notif_panel|empty_heading")}</h2>
+                <p>{_t("notif_panel|empty_description")}</p>
             </div>
         );
 

src/components/structures/SpaceHierarchy.tsx

@@ -245,9 +245,7 @@ const Tile: React.FC<ITileProps> = ({
 
     let suggestedSection: ReactElement | undefined;
     if (suggested && (!joinedRoom || hasPermissions)) {
-        suggestedSection = (
-            <InfoTooltip tooltip={_t("This room is suggested as a good one to join")}>{_t("Suggested")}</InfoTooltip>
-        );
+        suggestedSection = <InfoTooltip tooltip={_t("space|suggested_tooltip")}>{_t("space|suggested")}</InfoTooltip>;
     }
 
     const content = (
@@ -670,14 +668,14 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
     if (!selectedRelations.length) {
         Button = AccessibleTooltipButton;
         props = {
-            tooltip: _t("Select a room below first"),
+            tooltip: _t("space|select_room_below"),
             alignment: Alignment.Top,
         };
     }
 
     let buttonText = _t("Saving…");
     if (!saving) {
-        buttonText = selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested");
+        buttonText = selectionAllSuggested ? _t("space|unmark_suggested") : _t("space|mark_suggested");
     }
 
     return (
@@ -707,7 +705,7 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
                             hierarchy.removeRelation(parentId, childId);
                         }
                     } catch (e) {
-                        setError(_t("Failed to remove some rooms. Try again later"));
+                        setError(_t("space|failed_remove_rooms"));
                     }
                     setRemoving(false);
                     setSelected(new Map());
@@ -788,13 +786,13 @@ const SpaceHierarchy: React.FC<IProps> = ({ space, initialText = "", showRoom, a
     const [error, setError] = useState("");
     let errorText = error;
     if (!error && hierarchyError) {
-        errorText = _t("Failed to load list of rooms.");
+        errorText = _t("space|failed_load_rooms");
     }
 
     const loaderRef = useIntersectionObserver(loadMore);
 
     if (!loading && hierarchy!.noSupport) {
-        return <p>{_t("Your server does not support showing space hierarchies.")}</p>;
+        return <p>{_t("space|incompatible_server_hierarchy")}</p>;
     }
 
     const onKeyDown = (ev: KeyboardEvent, state: IState): void => {

src/components/structures/UserMenu.tsx

@@ -354,7 +354,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 />
                 <IconizedContextMenuOption
                     iconClassName="mx_UserMenu_iconLock"
-                    label={_t("Security & Privacy")}
+                    label={_t("room_settings|security|title")}
                     onClick={(e) => this.onSettingsOpen(e, UserTab.Security)}
                 />
                 <IconizedContextMenuOption
@@ -410,11 +410,16 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     <RovingAccessibleTooltipButton
                         className="mx_UserMenu_contextMenu_themeButton"
                         onClick={this.onSwitchThemeClick}
-                        title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
+                        title={
+                            this.state.isDarkTheme
+                                ? _t("user_menu|switch_theme_light")
+                                : _t("user_menu|switch_theme_dark")
+                        }
                     >
                         <img
                             src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg").default}
-                            alt={_t("Switch theme")}
+                            role="presentation"
+                            alt=""
                             width={16}
                         />
                     </RovingAccessibleTooltipButton>

src/components/structures/ViewSource.tsx

@@ -79,14 +79,16 @@ export default class ViewSource extends React.Component<IProps, IState> {
                 <>
                     <details open className="mx_ViewSource_details">
                         <summary>
-                            <span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
+                            <span className="mx_ViewSource_heading">
+                                {_t("devtools|view_source_decrypted_event_source")}
+                            </span>
                         </summary>
                         {decryptedEventSource ? (
                             <CopyableText getTextToCopy={copyDecryptedFunc}>
                                 <SyntaxHighlight language="json">{stringify(decryptedEventSource)}</SyntaxHighlight>
                             </CopyableText>
                         ) : (
-                            <div>{_t("Decrypted source unavailable")}</div>
+                            <div>{_t("devtools|view_source_decrypted_event_source_unavailable")}</div>
                         )}
                     </details>
                     <details className="mx_ViewSource_details">

src/components/views/auth/LoginWithQRFlow.tsx

@@ -169,7 +169,7 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
                 );
                 break;
             case Phase.ShowingQR:
-                title = _t("Sign in with QR code");
+                title = _t("settings|sessions|sign_in_with_qr");
                 if (this.props.code) {
                     const code = (
                         <div className="mx_LoginWithQR_qrWrapper">

src/components/views/auth/RegistrationForm.tsx

@@ -358,7 +358,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         description: (_, results) => {
             // omit the description if the only failing result is the `available` one as it makes no sense for it.
             if (results.every(({ key, valid }) => key === "available" || valid)) return null;
-            return _t("Use lowercase letters, numbers, dashes and underscores only");
+            return _t("auth|registration_username_validation");
         },
         hideDescriptionIfValid: true,
         async deriveData(this: RegistrationForm, { value }) {
@@ -401,8 +401,8 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
                 },
                 invalid: (usernameAvailable) =>
                     usernameAvailable === UsernameAvailableStatus.Error
-                        ? _t("Unable to check if username has been taken. Try again later.")
-                        : _t("Someone already has that username. Try another or if it is you, sign in below."),
+                        ? _t("auth|registration_username_unable_check")
+                        : _t("auth|registration_username_in_use"),
             },
         ],
     });
@@ -496,7 +496,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         if (!this.showPhoneNumber()) {
             return null;
         }
-        const phoneLabel = this.authStepIsRequired("m.login.msisdn") ? _t("Phone") : _t("Phone (optional)");
+        const phoneLabel = this.authStepIsRequired("m.login.msisdn")
+            ? _t("auth|phone_label")
+            : _t("auth|phone_optional_label");
         const phoneCountry = (
             <CountryDropdown
                 value={this.state.phoneCountry}
@@ -549,15 +551,13 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             if (this.showPhoneNumber()) {
                 emailHelperText = (
                     <div>
-                        {_t("Add an email to be able to reset your password.")}{" "}
-                        {_t("Use email or phone to optionally be discoverable by existing contacts.")}
+                        {_t("auth|email_help_text")} {_t("auth|email_phone_discovery_text")}
                     </div>
                 );
             } else {
                 emailHelperText = (
                     <div>
-                        {_t("Add an email to be able to reset your password.")}{" "}
-                        {_t("Use email to optionally be discoverable by existing contacts.")}
+                        {_t("auth|email_help_text")} {_t("auth|email_discovery_text")}
                     </div>
                 );
             }

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -132,7 +132,7 @@ const SpaceContextMenu: React.FC<IProps> = ({ space, hideHeader, onFinished, ...
         devtoolsOption = (
             <IconizedContextMenuOption
                 iconClassName="mx_SpacePanel_iconSettings"
-                label={_t("See room timeline (devtools)")}
+                label={_t("space|context_menu|devtools_open_timeline")}
                 onClick={onViewTimelineClick}
             />
         );
@@ -243,13 +243,13 @@ const SpaceContextMenu: React.FC<IProps> = ({ space, hideHeader, onFinished, ...
             <IconizedContextMenuOptionList first>
                 <IconizedContextMenuOption
                     iconClassName="mx_SpacePanel_iconHome"
-                    label={_t("Space home")}
+                    label={_t("space|context_menu|home")}
                     onClick={onHomeClick}
                 />
                 {inviteOption}
                 <IconizedContextMenuOption
                     iconClassName="mx_SpacePanel_iconExplore"
-                    label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
+                    label={canAddRooms ? _t("space|context_menu|manage_and_explore") : _t("space|context_menu|explore")}
                     onClick={onExploreRoomsClick}
                 />
                 <IconizedContextMenuOption

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx

@@ -88,9 +88,9 @@ export function ManualDeviceKeyVerificationDialog({
 
     return (
         <QuestionDialog
-            title={_t("Verify session")}
+            title={_t("settings|sessions|verify_session")}
             description={body}
-            button={_t("Verify session")}
+            button={_t("settings|sessions|verify_session")}
             onFinished={onLegacyFinished}
         />
     );

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -163,7 +163,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
         tabs.push(
             new Tab(
                 RoomSettingsTab.Security,
-                _td("Security & Privacy"),
+                _td("room_settings|security|title"),
                 "mx_RoomSettingsDialog_securityIcon",
                 <SecurityRoomSettingsTab room={this.state.room} closeSettingsFn={() => this.props.onFinished(true)} />,
                 "RoomSettingsSecurityPrivacy",
@@ -172,7 +172,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
         tabs.push(
             new Tab(
                 RoomSettingsTab.Roles,
-                _td("Roles & Permissions"),
+                _td("room_settings|permissions|title"),
                 "mx_RoomSettingsDialog_rolesIcon",
                 <RolesRoomSettingsTab room={this.state.room} />,
                 "RoomSettingsRolesPermissions",