Migrate more strings to translation keys (#11694)

src/components/views/rooms/EventTile.tsx

@@ -1298,7 +1298,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                                 <span className="mx_EventTile_truncated">
                                     {" "}
                                     {_t(
-                                        " in <strong>%(room)s</strong>",
+                                        "timeline|in_room_name",
                                         { room: room.name },
                                         { strong: (sub) => <strong>{sub}</strong> },
                                     )}

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -805,7 +805,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
             searchStatus = (
                 <div className="mx_LegacyRoomHeader_searchStatus">
                     &nbsp;
-                    {_t("(~%(count)s results)", { count: this.props.searchInfo.count })}
+                    {_t("room|search|result_count", { count: this.props.searchInfo.count })}
                 </div>
             );
         }

src/components/views/rooms/LiveContentSummary.tsx

@@ -51,7 +51,7 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
                 {" • "}
                 <span
                     className="mx_LiveContentSummary_participants"
-                    aria-label={_t("%(count)s participants", { count: participantCount })}
+                    aria-label={_t("common|n_participants", { count: participantCount })}
                 >
                     {participantCount}
                 </span>

src/components/views/rooms/MemberList.tsx

@@ -236,7 +236,7 @@ export default class MemberList extends React.Component<IProps, IState> {
 
     private createOverflowTile = (overflowCount: number, totalCount: number, onClick: () => void): JSX.Element => {
         // For now we'll pretend this is any entity. It should probably be a separate tile.
-        const text = _t("and %(count)s others...", { count: overflowCount });
+        const text = _t("common|and_n_others", { count: overflowCount });
         return (
             <EntityTile
                 className="mx_EntityTile_ellipsis"

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -30,6 +30,7 @@ import ContextMenu, { aboveLeftOf, MenuItem, useContextMenu } from "../../struct
 import { useTooltip } from "../../../utils/useTooltip";
 import { _t } from "../../../languageHandler";
 import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
+import { formatList } from "../../../utils/FormattingUtils";
 
 // #20547 Design specified that we should show the three latest read receipts
 const MAX_READ_AVATARS_PLUS_N = 3;
@@ -66,19 +67,8 @@ export function determineAvatarPosition(index: number, max: number): IAvatarPosi
     }
 }
 
-export function readReceiptTooltip(members: string[], hasMore: boolean): string | undefined {
-    if (hasMore) {
-        return _t("%(members)s and more", {
-            members: members.join(", "),
-        });
-    } else if (members.length > 1) {
-        return _t("%(members)s and %(last)s", {
-            last: members.pop(),
-            members: members.join(", "),
-        });
-    } else if (members.length) {
-        return members[0];
-    }
+export function readReceiptTooltip(members: string[], maxAvatars: number): string | undefined {
+    return formatList(members, maxAvatars);
 }
 
 export function ReadReceiptGroup({
@@ -94,8 +84,8 @@ export function ReadReceiptGroup({
     const hasMore = readReceipts.length > MAX_READ_AVATARS;
     const maxAvatars = hasMore ? MAX_READ_AVATARS_PLUS_N : MAX_READ_AVATARS;
 
-    const tooltipMembers: string[] = readReceipts.slice(0, maxAvatars).map((it) => it.roomMember?.name ?? it.userId);
-    const tooltipText = readReceiptTooltip(tooltipMembers, hasMore);
+    const tooltipMembers: string[] = readReceipts.map((it) => it.roomMember?.name ?? it.userId);
+    const tooltipText = readReceiptTooltip(tooltipMembers, maxAvatars);
 
     const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
         label: (

src/components/views/rooms/RoomHeader.tsx

@@ -222,7 +222,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     as="div"
                     size="sm"
                     weight="medium"
-                    aria-label={_t("%(count)s members", { count: memberCount })}
+                    aria-label={_t("common|n_members", { count: memberCount })}
                     onClick={(e: React.MouseEvent) => {
                         RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
                         e.stopPropagation();

src/components/views/rooms/RoomInfoLine.tsx

@@ -65,7 +65,7 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
         // Don't trust local state and instead use the summary API
         members = (
             <span className="mx_RoomInfoLine_members">
-                {_t("%(count)s members", { count: summary.num_joined_members })}
+                {_t("common|n_members", { count: summary.num_joined_members })}
             </span>
         );
     } else if (memberCount && summary !== undefined) {
@@ -77,7 +77,7 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
 
         members = (
             <AccessibleButton kind="link" className="mx_RoomInfoLine_members" onClick={viewMembers}>
-                {_t("%(count)s members", { count: memberCount })}
+                {_t("common|n_members", { count: memberCount })}
             </AccessibleButton>
         );
     }

src/components/views/rooms/RoomKnocksBar.tsx

@@ -136,7 +136,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
                 />
             ))}
             <div className="mx_RoomKnocksBar_content">
-                <Heading size="4">{_t("%(count)s people asking to join", { count: knockMembersCount })}</Heading>
+                <Heading size="4">{_t("room|header|n_people_asking_to_join", { count: knockMembersCount })}</Heading>
                 <p className="mx_RoomKnocksBar_paragraph">
                     {names}
                     {link}

src/components/views/rooms/RoomPreviewBar.tsx

@@ -439,7 +439,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 }
                 const joinRule = this.joinRule();
                 const errCodeMessage = _t("room|3pid_invite_error_description", {
-                    errcode: this.state.threePidFetchError?.errcode || _t("unknown error code"),
+                    errcode: this.state.threePidFetchError?.errcode || _t("error|unknown_error_code"),
                 });
                 switch (joinRule) {
                     case "invite":

src/components/views/rooms/RoomPreviewCard.tsx

@@ -99,7 +99,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
                     <div>
                         <div className="mx_RoomPreviewCard_inviter_name">
                             {_t(
-                                "<inviter/> invites you",
+                                "room|invites_you_text",
                                 {},
                                 {
                                     inviter: () => <b>{inviter?.name || inviteSender}</b>,

src/components/views/rooms/ThreadSummary.tsx

@@ -44,7 +44,7 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
 
     let countSection: string | number = count;
     if (!roomContext.narrow) {
-        countSection = _t("%(count)s reply", { count });
+        countSection = _t("threads|count_of_reply", { count });
     }
 
     return (