Migrate more strings to translation keys (#11499)

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -684,7 +684,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
                             <br />
                             <input
                                 type="submit"
-                                value={_t("Submit")}
+                                value={_t("action|submit")}
                                 className={submitClasses}
                                 disabled={!enableSubmit}
                             />

src/components/views/dialogs/AppDownloadDialog.tsx

@@ -68,7 +68,7 @@ export const AppDownloadDialog: FC<Props> = ({ onFinished }) => {
             )}
             <div className="mx_AppDownloadDialog_mobile">
                 <div className="mx_AppDownloadDialog_app">
-                    <Heading size="3">{_t("iOS")}</Heading>
+                    <Heading size="3">{_t("common|ios")}</Heading>
                     <QRCode data={urlAppStore} margin={0} width={172} />
                     <div className="mx_AppDownloadDialog_info">
                         {_t("%(qrCode)s or %(appLinks)s", {
@@ -89,7 +89,7 @@ export const AppDownloadDialog: FC<Props> = ({ onFinished }) => {
                     </div>
                 </div>
                 <div className="mx_AppDownloadDialog_app">
-                    <Heading size="3">{_t("Android")}</Heading>
+                    <Heading size="3">{_t("common|android")}</Heading>
                     <QRCode data={urlAndroid} margin={0} width={172} />
                     <div className="mx_AppDownloadDialog_info">
                         {_t("%(qrCode)s or %(appLinks)s", {

src/components/views/dialogs/ExportDialog.tsx

@@ -410,7 +410,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     </div>
                 ) : (
                     <DialogButtons
-                        primaryButton={_t("Export")}
+                        primaryButton={_t("action|export")}
                         onPrimaryButtonClick={onExportClick}
                         onCancel={() => onFinished(false)}
                     />

src/components/views/dialogs/InviteDialog.tsx

@@ -1313,7 +1313,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 );
             }
 
-            buttonText = _t("Go");
+            buttonText = _t("action|go");
             goButtonFn = this.checkProfileAndStartDm;
             extraSection = (
                 <div className="mx_InviteDialog_section_hidden_suggestions_disclaimer">

src/components/views/dialogs/ReportEventDialog.tsx

@@ -428,7 +428,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                         {ignoreUserCheckbox}
                     </div>
                     <DialogButtons
-                        primaryButton={_t("Send report")}
+                        primaryButton={_t("action|send_report")}
                         onPrimaryButtonClick={this.onSubmit}
                         focus={true}
                         onCancel={this.onCancel}
@@ -467,7 +467,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
                     {ignoreUserCheckbox}
                 </div>
                 <DialogButtons
-                    primaryButton={_t("Send report")}
+                    primaryButton={_t("action|send_report")}
                     onPrimaryButtonClick={this.onSubmit}
                     focus={true}
                     onCancel={this.onCancel}

src/components/views/dialogs/SessionRestoreErrorDialog.tsx

@@ -78,7 +78,7 @@ export default class SessionRestoreErrorDialog extends React.Component<IProps> {
         } else {
             dialogButtons = (
                 <DialogButtons
-                    primaryButton={_t("Refresh")}
+                    primaryButton={_t("action|refresh")}
                     onPrimaryButtonClick={this.onRefreshClick}
                     focus={true}
                     hasCancel={false}

src/components/views/directory/NetworkDropdown.tsx

@@ -155,7 +155,7 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
         options: [
             {
                 key: { roomServer, instanceId: undefined },
-                label: _t("Matrix"),
+                label: _t("common|matrix"),
             },
             ...(roomServer === homeServer && protocols
                 ? Object.values(protocols)

src/components/views/elements/AppTile.tsx

@@ -737,7 +737,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                 <AccessibleButton
                     key="toggleMaximised"
                     className="mx_AppTileMenuBar_widgets_button"
-                    title={isMaximised ? _t("Un-maximise") : _t("Maximise")}
+                    title={isMaximised ? _t("Un-maximise") : _t("action|maximise")}
                     onClick={this.onToggleMaximisedClick}
                 >
                     {isMaximised ? (
@@ -752,7 +752,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                 <AccessibleButton
                     key="minimise"
                     className="mx_AppTileMenuBar_widgets_button"
-                    title={_t("Minimise")}
+                    title={_t("action|minimise")}
                     onClick={this.onMinimiseClicked}
                 >
                     <MinimiseIcon className="mx_Icon mx_Icon_12" />

src/components/views/messages/DateSeparator.tsx

@@ -270,12 +270,12 @@ export default class DateSeparator extends React.Component<IProps, IState> {
                 >
                     <IconizedContextMenuOptionList first>
                         <IconizedContextMenuOption
-                            label={_t("Last week")}
+                            label={_t("time|last_week")}
                             onClick={this.onLastWeekClicked}
                             data-testid="jump-to-date-last-week"
                         />
                         <IconizedContextMenuOption
-                            label={_t("Last month")}
+                            label={_t("time|last_month")}
                             onClick={this.onLastMonthClicked}
                             data-testid="jump-to-date-last-month"
                         />

src/components/views/messages/JumpToDatePicker.tsx

@@ -63,7 +63,7 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
                 className="mx_JumpToDatePicker_submitButton"
                 onClick={onJumpToDateSubmit}
             >
-                {_t("Go")}
+                {_t("action|go")}
             </RovingAccessibleButton>
         </form>
     );

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -162,7 +162,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
               WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center);
           };
 
-    const maximiseTitle = isMaximised ? _t("action|close") : _t("Maximise");
+    const maximiseTitle = isMaximised ? _t("action|close") : _t("action|maximise");
 
     let openTitle = "";
     if (isPinned) {
@@ -309,7 +309,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
             <div className="mx_RoomSummaryCard_avatar" role="presentation">
                 <RoomAvatar room={room} size="54px" viewAvatarOnClick />
                 <TextWithTooltip
-                    tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
+                    tooltip={isRoomEncrypted ? _t("common|encrypted") : _t("Not encrypted")}
                     class={classNames("mx_RoomSummaryCard_e2ee", {
                         mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
                         mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,

src/components/views/right_panel/UserInfo.tsx

@@ -206,7 +206,7 @@ export function DeviceItem({ userId, device }: { userId: string; device: IDevice
     }
 
     let trustedLabel: string | undefined;
-    if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
+    if (userTrust.isVerified()) trustedLabel = isVerified ? _t("common|trusted") : _t("common|not_trusted");
 
     if (isVerified === undefined) {
         // we're still deciding if the device is verified
@@ -443,7 +443,7 @@ export const UserOptionsSection: React.FC<{
 
             insertPillButton = (
                 <AccessibleButton kind="link" onClick={onInsertPillButton} className="mx_UserInfo_field">
-                    {_t("Mention")}
+                    {_t("action|mention")}
                 </AccessibleButton>
             );
         }

src/components/views/settings/EventIndexPanel.tsx

@@ -160,7 +160,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                         )}
                     </SettingsSubsectionText>
                     <AccessibleButton kind="primary" onClick={this.onManage}>
-                        {_t("Manage")}
+                        {_t("action|manage")}
                     </AccessibleButton>
                 </>
             );

src/components/views/settings/devices/DeviceDetails.tsx

@@ -73,18 +73,18 @@ const DeviceDetails: React.FC<Props> = ({
         },
         {
             id: "application",
-            heading: _t("Application"),
+            heading: _t("common|application"),
             values: [
                 { label: _t("common|name"), value: device.appName },
-                { label: _t("Version"), value: device.appVersion },
+                { label: _t("common|version"), value: device.appVersion },
                 { label: _t("URL"), value: device.url },
             ],
         },
         {
             id: "device",
-            heading: _t("Device"),
+            heading: _t("common|device"),
             values: [
-                { label: _t("Model"), value: device.deviceModel },
+                { label: _t("common|model"), value: device.deviceModel },
                 { label: _t("Operating system"), value: device.deviceOperatingSystem },
                 { label: _t("Browser"), value: device.client },
                 { label: _t("IP address"), value: device.last_seen_ip },

src/components/views/settings/devices/DeviceMetaData.tsx

@@ -63,7 +63,7 @@ const DeviceMetaDatum: React.FC<{ value: string | React.ReactNode; id: string }>
 export const DeviceMetaData: React.FC<Props> = ({ device }) => {
     const inactive = getInactiveMetadata(device);
     const lastActivity = device.last_seen_ts && `${_t("Last activity")} ${formatLastActivity(device.last_seen_ts)}`;
-    const verificationStatus = device.isVerified ? _t("Verified") : _t("Unverified");
+    const verificationStatus = device.isVerified ? _t("common|verified") : _t("common|unverified");
     // if device is inactive, don't display last activity or verificationStatus
     const metadata = inactive
         ? [inactive, { id: "lastSeenIp", value: device.last_seen_ip }]

src/components/views/settings/devices/DeviceTypeIcon.tsx

@@ -62,13 +62,13 @@ export const DeviceTypeIcon: React.FC<Props> = ({ isVerified, isSelected, device
                 <VerifiedIcon
                     className={classNames("mx_DeviceTypeIcon_verificationIcon", "verified")}
                     role="img"
-                    aria-label={_t("Verified")}
+                    aria-label={_t("common|verified")}
                 />
             ) : (
                 <UnverifiedIcon
                     className={classNames("mx_DeviceTypeIcon_verificationIcon", "unverified")}
                     role="img"
-                    aria-label={_t("Unverified")}
+                    aria-label={_t("common|unverified")}
                 />
             )}
         </div>

src/components/views/settings/devices/FilteredDeviceList.tsx

@@ -284,12 +284,12 @@ export const FilteredDeviceList = forwardRef(
             { id: ALL_FILTER_ID, label: _t("All") },
             {
                 id: DeviceSecurityVariation.Verified,
-                label: _t("Verified"),
+                label: _t("common|verified"),
                 description: _t("Ready for secure messaging"),
             },
             {
                 id: DeviceSecurityVariation.Unverified,
-                label: _t("Unverified"),
+                label: _t("common|unverified"),
                 description: _t("Not ready for secure messaging"),
             },
             {

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

@@ -466,7 +466,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                         <LabelledToggleSwitch
                             value={isEncrypted}
                             onChange={this.onEncryptionChange}
-                            label={_t("Encrypted")}
+                            label={_t("common|encrypted")}
                             disabled={!canEnableEncryption}
                         />
                         {isEncryptionForceDisabled && !isEncrypted && (

src/components/views/user-onboarding/UserOnboardingButton.tsx

@@ -74,7 +74,7 @@ function UserOnboardingButtonInternal({ selected, minimized }: Props): JSX.Eleme
                 <>
                     <div className="mx_UserOnboardingButton_content">
                         <Heading size="4" className="mx_Heading_h4">
-                            {_t("Welcome")}
+                            {_t("common|welcome")}
                         </Heading>
                         <AccessibleButton className="mx_UserOnboardingButton_close" onClick={onDismiss} />
                     </div>

src/components/views/user-onboarding/UserOnboardingHeader.tsx

@@ -35,53 +35,38 @@ interface Props {
 
 export function UserOnboardingHeader({ useCase }: Props): JSX.Element {
     let title: string;
-    let description: string;
-    let image;
+    let description = _t("onboarding|free_e2ee_messaging_unlimited_voip", {
+        brand: SdkConfig.get("brand"),
+    });
+    let image: string;
     let actionLabel: string;
 
     switch (useCase) {
         case UseCase.PersonalMessaging:
-            title = _t("Secure messaging for friends and family");
-            description = _t(
-                "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.",
-                {
-                    brand: SdkConfig.get("brand"),
-                },
-            );
+            title = _t("onboarding|personal_messaging_title");
             image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
-            actionLabel = _t("Start your first chat");
+            actionLabel = _t("onboarding|personal_messaging_action");
             break;
         case UseCase.WorkMessaging:
-            title = _t("Secure messaging for work");
-            description = _t(
-                "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.",
-                {
-                    brand: SdkConfig.get("brand"),
-                },
-            );
-            image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
-            actionLabel = _t("Find your co-workers");
-            break;
-        case UseCase.CommunityMessaging:
-            title = _t("Community ownership");
-            description = _t(
-                "Keep ownership and control of community discussion.\nScale to support millions, with powerful moderation and interoperability.",
-            );
-            image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
-            actionLabel = _t("Find your people");
-            break;
-        default:
-            title = _t("Welcome to %(brand)s", {
+            title = _t("onboarding|work_messaging_title");
+            description = _t("onboarding|free_e2ee_messaging_unlimited_voip", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
+            actionLabel = _t("onboarding|work_messaging_action");
+            break;
+        case UseCase.CommunityMessaging:
+            title = _t("onboarding|community_messaging_title");
+            description = _t("onboarding|community_messaging_description");
+            image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
+            actionLabel = _t("onboarding|community_messaging_action");
+            break;
+        default:
+            title = _t("onboarding|welcome_to_brand", {
                 brand: SdkConfig.get("brand"),
             });
-            description = _t(
-                "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.",
-                {
-                    brand: SdkConfig.get("brand"),
-                },
-            );
             image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
-            actionLabel = _t("Start your first chat");
+            actionLabel = _t("onboarding|personal_messaging_action");
             break;
     }
 

src/components/views/user-onboarding/UserOnboardingList.tsx

@@ -52,13 +52,13 @@ export function UserOnboardingList({ tasks }: Props): JSX.Element {
             <div className="mx_UserOnboardingList_header">
                 <Heading size="3" className="mx_UserOnboardingList_title">
                     {waiting > 0
-                        ? _t("Only %(count)s steps to go", {
+                        ? _t("onboarding|only_n_steps_to_go", {
                               count: waiting,
                           })
-                        : _t("You did it!")}
+                        : _t("onboarding|you_did_it")}
                 </Heading>
                 <div className="mx_UserOnboardingList_hint">
-                    {_t("Complete these to get the most out of %(brand)s", {
+                    {_t("onboarding|complete_these", {
                         brand: SdkConfig.get("brand"),
                     })}
                 </div>