Make localization keys compatible with agglutinative and/or SOV type languages (#10159)

* Make localization keys on HelpUserSettingsTab compatible with agglutinative and/or SOV type languages
* Make localization keys on room notifications debug dialog on devtools compatible with agglutinative and/or SOV type languages
* Make keys compatible with inflection
* Clarify context for Weblate translators

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

src/components/views/dialogs/devtools/RoomNotifications.tsx

@@ -20,7 +20,7 @@ import React, { useContext } from "react";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
-import { _t } from "../../../../languageHandler";
+import { _t, _td } from "../../../../languageHandler";
 import { determineUnreadState } from "../../../../RoomNotifs";
 import { humanReadableNotificationColor } from "../../../../stores/notifications/NotificationColor";
 import { doesRoomOrThreadHaveUnreadMessages } from "../../../../Unread";
@@ -39,22 +39,38 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
                 <h2>{_t("Room status")}</h2>
                 <ul>
                     <li>
-                        {_t("Room unread status: ")}
-                        <strong>{humanReadableNotificationColor(color)}</strong>
-                        {count > 0 && (
-                            <>
-                                {_t(", count:")} <strong>{count}</strong>
-                            </>
+                        {_t(
+                            "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>",
+                            {
+                                status: humanReadableNotificationColor(color),
+                                count,
+                            },
+                            {
+                                strong: (sub) => <strong>{sub}</strong>,
+                            },
                         )}
                     </li>
                     <li>
-                        {_t("Notification state is")} <strong>{notificationState}</strong>
+                        {_t(
+                            "Notification state is <strong>%(notificationState)s</strong>",
+                            {
+                                notificationState,
+                            },
+                            {
+                                strong: (sub) => <strong>{sub}</strong>,
+                            },
+                        )}
                     </li>
                     <li>
-                        {_t("Room is ")}
-                        <strong>
-                            {cli.isRoomEncrypted(room.roomId!) ? _t("encrypted ✅") : _t("not encrypted 🚨")}
-                        </strong>
+                        {_t(
+                            cli.isRoomEncrypted(room.roomId!)
+                                ? _td("Room is <strong>encrypted ✅</strong>")
+                                : _td("Room is <strong>not encrypted 🚨</strong>"),
+                            {},
+                            {
+                                strong: (sub) => <strong>{sub}</strong>,
+                            },
+                        )}
                     </li>
                 </ul>
             </section>

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -327,10 +327,26 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                     <span className="mx_SettingsTab_subheading">{_t("Advanced")}</span>
                     <div className="mx_SettingsTab_subsectionText">
                         <div>
-                            {_t("Homeserver is")} <code>{MatrixClientPeg.get().getHomeserverUrl()}</code>
+                            {_t(
+                                "Homeserver is <code>%(homeserverUrl)s</code>",
+                                {
+                                    homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
+                                },
+                                {
+                                    code: (sub) => <code>{sub}</code>,
+                                },
+                            )}
                         </div>
                         <div>
-                            {_t("Identity server is")} <code>{MatrixClientPeg.get().getIdentityServerUrl()}</code>
+                            {_t(
+                                "Identity server is <code>%(identityServerUrl)s</code>",
+                                {
+                                    identityServerUrl: MatrixClientPeg.get().getIdentityServerUrl(),
+                                },
+                                {
+                                    code: (sub) => <code>{sub}</code>,
+                                },
+                            )}
                         </div>
                         <details>
                             <summary>{_t("Access Token")}</summary>

src/i18n/strings/en_EN.json

@@ -1567,8 +1567,8 @@
     "FAQ": "FAQ",
     "Keyboard Shortcuts": "Keyboard Shortcuts",
     "Versions": "Versions",
-    "Homeserver is": "Homeserver is",
-    "Identity server is": "Identity server is",
+    "Homeserver is <code>%(homeserverUrl)s</code>": "Homeserver is <code>%(homeserverUrl)s</code>",
+    "Identity server is <code>%(identityServerUrl)s</code>": "Identity server is <code>%(identityServerUrl)s</code>",
     "Access Token": "Access Token",
     "Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
     "Clear cache and reload": "Clear cache and reload",
@@ -3150,12 +3150,11 @@
     "Filter results": "Filter results",
     "No results found": "No results found",
     "Room status": "Room status",
-    "Room unread status: ": "Room unread status: ",
-    ", count:": ", count:",
-    "Notification state is": "Notification state is",
-    "Room is ": "Room is ",
-    "encrypted ✅": "encrypted ✅",
-    "not encrypted 🚨": "not encrypted 🚨",
+    "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>|other": "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>",
+    "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>|zero": "Room unread status: <strong>%(status)s</strong>",
+    "Notification state is <strong>%(notificationState)s</strong>": "Notification state is <strong>%(notificationState)s</strong>",
+    "Room is <strong>encrypted ✅</strong>": "Room is <strong>encrypted ✅</strong>",
+    "Room is <strong>not encrypted 🚨</strong>": "Room is <strong>not encrypted 🚨</strong>",
     "Main timeline": "Main timeline",
     "Total: ": "Total: ",
     "Highlight: ": "Highlight: ",

test/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap

@@ -11,20 +11,26 @@ exports[`<RoomNotifications /> should render 1`] = `
       </h2>
       <ul>
         <li>
+          <span>
             Room unread status: 
             <strong>
               None
             </strong>
+          </span>
         </li>
         <li>
+          <span>
             Notification state is 
             <strong />
+          </span>
         </li>
         <li>
+          <span>
             Room is 
             <strong>
               not encrypted 🚨
             </strong>
+          </span>
         </li>
       </ul>
     </section>