Migrate more strings to translation keys

src/components/structures/MatrixChat.tsx

@@ -1240,10 +1240,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 <span>
                     {isSpace
                         ? _t("Are you sure you want to leave the space '%(spaceName)s'?", {
-                              spaceName: roomToLeave?.name ?? _t("Unnamed Space"),
+                              spaceName: roomToLeave?.name ?? _t("common|unnamed_space"),
                           })
                         : _t("Are you sure you want to leave the room '%(roomName)s'?", {
-                              roomName: roomToLeave?.name ?? _t("Unnamed Room"),
+                              roomName: roomToLeave?.name ?? _t("common|unnamed_room"),
                           })}
                     {warnings}
                 </span>

src/components/structures/SpaceHierarchy.tsx

@@ -119,7 +119,7 @@ const Tile: React.FC<ITileProps> = ({
         room.name ||
         room.canonical_alias ||
         room.aliases?.[0] ||
-        (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room"));
+        (room.room_type === RoomType.Space ? _t("common|unnamed_space") : _t("common|unnamed_room"));
 
     const [showChildren, toggleShowChildren] = useStateToggle(true);
     const [onFocus, isActive, ref] = useRovingTabIndex();

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -251,7 +251,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                         "Everyone in <SpaceName/> will be able to find and join this room.",
                         {},
                         {
-                            SpaceName: () => <b>{this.props.parentSpace?.name ?? _t("Unnamed Space")}</b>,
+                            SpaceName: () => <b>{this.props.parentSpace?.name ?? _t("common|unnamed_space")}</b>,
                         },
                     )}
                     &nbsp;
@@ -265,7 +265,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                         "Anyone will be able to find and join this room, not just members of <SpaceName/>.",
                         {},
                         {
-                            SpaceName: () => <b>{this.props.parentSpace?.name ?? _t("Unnamed Space")}</b>,
+                            SpaceName: () => <b>{this.props.parentSpace?.name ?? _t("common|unnamed_space")}</b>,
                         },
                     )}
                     &nbsp;
@@ -341,11 +341,14 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
 
         let title: string;
         if (isVideoRoom) {
-            title = _t("Create a video room");
+            title = _t("create_room|title_video_room");
         } else if (this.props.parentSpace || this.state.joinRule === JoinRule.Knock) {
             title = _t("action|create_a_room");
         } else {
-            title = this.state.joinRule === JoinRule.Public ? _t("Create a public room") : _t("Create a private room");
+            title =
+                this.state.joinRule === JoinRule.Public
+                    ? _t("create_room|title_public_room")
+                    : _t("create_room|title_private_room");
         }
 
         return (
@@ -401,7 +404,9 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                     </div>
                 </form>
                 <DialogButtons
-                    primaryButton={isVideoRoom ? _t("Create video room") : _t("Create room")}
+                    primaryButton={
+                        isVideoRoom ? _t("create_room|action_create_video_room") : _t("create_room|action_create_room")
+                    }
                     onPrimaryButtonClick={this.onOk}
                     onCancel={this.onCancel}
                 />

src/components/views/dialogs/InviteDialog.tsx

@@ -1338,10 +1338,10 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             const isSpace = room?.isSpaceRoom();
             title = isSpace
                 ? _t("Invite to %(spaceName)s", {
-                      spaceName: room?.name || _t("Unnamed Space"),
+                      spaceName: room?.name || _t("common|unnamed_space"),
                   })
                 : _t("Invite to %(roomName)s", {
-                      roomName: room?.name || _t("Unnamed Room"),
+                      roomName: room?.name || _t("common|unnamed_room"),
                   });
 
             let helpTextUntranslated;

src/components/views/dialogs/SpaceSettingsDialog.tsx

@@ -84,7 +84,7 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
 
     return (
         <BaseDialog
-            title={_t("Settings - %(spaceName)s", { spaceName: space.name || _t("Unnamed Space") })}
+            title={_t("Settings - %(spaceName)s", { spaceName: space.name || _t("common|unnamed_space") })}
             className="mx_SpaceSettingsDialog"
             contentId="mx_SpaceSettingsDialog"
             onFinished={onFinished}

src/components/views/rooms/PresenceLabel.tsx

@@ -18,6 +18,7 @@ import React from "react";
 import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
 import { _t } from "../../../languageHandler";
+import { formatDuration } from "../../../DateUtils";
 
 const BUSY_PRESENCE_NAME = new UnstableValue("busy", "org.matrix.msc3026.busy");
 
@@ -37,38 +38,14 @@ export default class PresenceLabel extends React.Component<IProps> {
         activeAgo: -1,
     };
 
-    // Return duration as a string using appropriate time units
-    // XXX: This would be better handled using a culture-aware library, but we don't use one yet.
-    private getDuration(time: number): string | undefined {
-        if (!time) return;
-        const t = Math.round(time / 1000);
-        const s = t % 60;
-        const m = Math.round(t / 60) % 60;
-        const h = Math.round(t / (60 * 60)) % 24;
-        const d = Math.round(t / (60 * 60 * 24));
-        if (t < 60) {
-            if (t < 0) {
-                return _t("%(duration)ss", { duration: 0 });
-            }
-            return _t("%(duration)ss", { duration: s });
-        }
-        if (t < 60 * 60) {
-            return _t("%(duration)sm", { duration: m });
-        }
-        if (t < 24 * 60 * 60) {
-            return _t("%(duration)sh", { duration: h });
-        }
-        return _t("%(duration)sd", { duration: d });
-    }
-
     private getPrettyPresence(presence?: string, activeAgo?: number, currentlyActive?: boolean): string {
         // for busy presence, we ignore the 'currentlyActive' flag: they're busy whether
         // they're active or not. It can be set while the user is active in which case
         // the 'active ago' ends up being 0.
         if (presence && BUSY_PRESENCE_NAME.matches(presence)) return _t("Busy");
 
         if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) {
-            const duration = this.getDuration(activeAgo);
+            const duration = formatDuration(activeAgo);
             if (presence === "online") return _t("Online for %(duration)s", { duration: duration });
             if (presence === "unavailable") return _t("Idle for %(duration)s", { duration: duration }); // XXX: is this actually right?
             if (presence === "offline") return _t("Offline for %(duration)s", { duration: duration });