Use translated rules for report post modal

src/components/report-modal.jsx

@@ -6,6 +6,7 @@ import { Fragment } from 'preact';
 import { useMemo, useRef, useState } from 'preact/hooks';
 
 import { api } from '../utils/api';
+import localeMatch from '../utils/locale-match';
 import showToast from '../utils/show-toast';
 import { getCurrentInstance } from '../utils/store-utils';
 
@@ -17,7 +18,7 @@ import Status from './status';
 // NOTE: `dislike` hidden for now, it's actually not used for reporting
 // Mastodon shows another screen for unfollowing, muting or blocking instead of reporting
 
-const CATEGORIES = [/*'dislike'*/ , 'spam', 'legal', 'violation', 'other'];
+const CATEGORIES = [/*'dislike' ,*/ 'spam', 'legal', 'violation', 'other'];
 // `violation` will be set if there are `rule_ids[]`
 
 const CATEGORIES_INFO = {
@@ -45,16 +46,58 @@ const CATEGORIES_INFO = {
   },
 };
 
+function findMatchingLanguage(rule, currentLang) {
+  if (!rule.translations || !currentLang) return null;
+  const availableLanguages = Object.keys(rule.translations);
+  if (!availableLanguages?.length) return null;
+
+  let matchedLang = localeMatch([currentLang], availableLanguages, null);
+  if (!matchedLang) {
+    // localeMatch fails if there are keys like zhCn, zhTw
+    // Convert them something like zh-CN first, try again
+    // Detect uppercase, then split by dash
+    const normalizedLanguages = availableLanguages.map((lang) => {
+      const parts = lang.split(/(?=[A-Z])/);
+      return parts
+        .map((part, i) => (i === 0 ? part : part.toLowerCase()))
+        .join('-');
+    });
+    matchedLang = localeMatch([currentLang], normalizedLanguages, null);
+  }
+
+  // If matchedLang has dash, convert back to original format
+  // E.g. zh-cn to zhCn
+  if (matchedLang && matchedLang.includes('-')) {
+    const [lang, region] = matchedLang.split('-');
+    matchedLang = lang + region.charAt(0).toUpperCase() + region.slice(1);
+  }
+
+  return matchedLang;
+}
+
+function translateRules(rules, currentLang) {
+  if (!rules?.length) return [];
+  if (!currentLang) return rules;
+  return rules.map((rule) => {
+    const matchedLang = findMatchingLanguage(rule, currentLang);
+    return {
+      ...rule,
+      _translatedText: rule.translations?.[matchedLang]?.text || null,
+    };
+  });
+}
+
 function ReportModal({ account, post, onClose }) {
-  const { _, t } = useLingui();
+  const { _, t, i18n } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [username, domain] = account.acct.split('@');
 
-  const [rules, currentDomain] = useMemo(() => {
+  const [translatedRules, currentDomain] = useMemo(() => {
     const { rules, domain } = getCurrentInstance();
-    return [rules || [], domain];
+    const rawRules = rules || [];
-  });
+    return [translateRules(rawRules, i18n.locale), domain];
+  }, [i18n.locale]);
 
   const [selectedCategory, setSelectedCategory] = useState(null);
   const [showRules, setShowRules] = useState(false);
@@ -165,7 +208,7 @@ function ReportModal({ account, post, onClose }) {
           </p>
           <section class="report-categories">
             {CATEGORIES.map((category) =>
-              category === 'violation' && !rules?.length ? null : (
+              category === 'violation' && !translatedRules?.length ? null : (
                 <Fragment key={category}>
                   <label class="report-category">
                     <input
@@ -186,14 +229,14 @@ function ReportModal({ account, post, onClose }) {
                       </small>
                     </span>
                   </label>
-                  {category === 'violation' && !!rules?.length && (
+                  {category === 'violation' && !!translatedRules?.length && (
                     <div
                       class="shazam-container no-animation"
                       hidden={!showRules}
                     >
                       <div class="shazam-container-inner">
                         <div class="report-rules" ref={rulesRef}>
-                          {rules.map((rule, i) => (
+                          {translatedRules.map((rule, i) => (
                             <label class="report-rule" key={rule.id}>
                               <input
                                 type="checkbox"
@@ -216,7 +259,7 @@ function ReportModal({ account, post, onClose }) {
                                   }
                                 }}
                               />
-                              <span>{rule.text}</span>
+                              <span>{rule._translatedText || rule.text}</span>
                             </label>
                           ))}
                         </div>

src/locales/en.po

@@ -462,7 +462,7 @@ msgstr ""
 #: src/components/media-alt-modal.jsx:43
 #: src/components/media-modal.jsx:327
 #: src/components/notification-service.jsx:157
-#: src/components/report-modal.jsx:75
+#: src/components/report-modal.jsx:118
 #: src/components/shortcuts-settings.jsx:230
 #: src/components/shortcuts-settings.jsx:583
 #: src/components/shortcuts-settings.jsx:783
@@ -1770,111 +1770,111 @@ msgstr ""
 msgid "{0}h"
 msgstr ""
 
-#: src/components/report-modal.jsx:29
+#: src/components/report-modal.jsx:30
 msgid "Spam"
 msgstr ""
 
-#: src/components/report-modal.jsx:30
+#: src/components/report-modal.jsx:31
 msgid "Malicious links, fake engagement, or repetitive replies"
 msgstr ""
 
-#: src/components/report-modal.jsx:33
+#: src/components/report-modal.jsx:34
 msgid "Illegal"
 msgstr ""
 
-#: src/components/report-modal.jsx:34
+#: src/components/report-modal.jsx:35
 msgid "Violates the law of your or the server's country"
 msgstr ""
 
-#: src/components/report-modal.jsx:37
+#: src/components/report-modal.jsx:38
 msgid "Server rule violation"
 msgstr ""
 
-#: src/components/report-modal.jsx:38
+#: src/components/report-modal.jsx:39
 msgid "Breaks specific server rules"
 msgstr ""
 
-#: src/components/report-modal.jsx:39
+#: src/components/report-modal.jsx:40
 msgid "Violation"
 msgstr ""
 
-#: src/components/report-modal.jsx:42
+#: src/components/report-modal.jsx:43
 msgid "Other"
 msgstr ""
 
-#: src/components/report-modal.jsx:43
+#: src/components/report-modal.jsx:44
 msgid "Issue doesn't fit other categories"
 msgstr ""
 
-#: src/components/report-modal.jsx:68
+#: src/components/report-modal.jsx:111
 msgid "Report Post"
 msgstr ""
 
-#: src/components/report-modal.jsx:68
+#: src/components/report-modal.jsx:111
 msgid "Report @{username}"
 msgstr ""
 
-#: src/components/report-modal.jsx:104
+#: src/components/report-modal.jsx:147
 msgid "Pending review"
 msgstr ""
 
-#: src/components/report-modal.jsx:146
+#: src/components/report-modal.jsx:189
 msgid "Post reported"
 msgstr ""
 
-#: src/components/report-modal.jsx:146
+#: src/components/report-modal.jsx:189
 msgid "Profile reported"
 msgstr ""
 
-#: src/components/report-modal.jsx:154
+#: src/components/report-modal.jsx:197
 msgid "Unable to report post"
 msgstr ""
 
-#: src/components/report-modal.jsx:155
+#: src/components/report-modal.jsx:198
 msgid "Unable to report profile"
 msgstr ""
 
-#: src/components/report-modal.jsx:163
+#: src/components/report-modal.jsx:206
 msgid "What's the issue with this post?"
 msgstr ""
 
-#: src/components/report-modal.jsx:164
+#: src/components/report-modal.jsx:207
 msgid "What's the issue with this profile?"
 msgstr ""
 
-#: src/components/report-modal.jsx:233
+#: src/components/report-modal.jsx:276
 msgid "Additional info"
 msgstr ""
 
-#: src/components/report-modal.jsx:256
+#: src/components/report-modal.jsx:299
 msgid "Forward to <0>{domain}</0>"
 msgstr ""
 
-#: src/components/report-modal.jsx:266
+#: src/components/report-modal.jsx:309
 msgid "Send Report"
 msgstr ""
 
-#: src/components/report-modal.jsx:275
+#: src/components/report-modal.jsx:318
 msgid "Muted {username}"
 msgstr ""
 
-#: src/components/report-modal.jsx:278
+#: src/components/report-modal.jsx:321
 msgid "Unable to mute {username}"
 msgstr ""
 
-#: src/components/report-modal.jsx:283
+#: src/components/report-modal.jsx:326
 msgid "Send Report <0>+ Mute profile</0>"
 msgstr ""
 
-#: src/components/report-modal.jsx:294
+#: src/components/report-modal.jsx:337
 msgid "Blocked {username}"
 msgstr ""
 
-#: src/components/report-modal.jsx:297
+#: src/components/report-modal.jsx:340
 msgid "Unable to block {username}"
 msgstr ""
 
-#: src/components/report-modal.jsx:302
+#: src/components/report-modal.jsx:345
 msgid "Send Report <0>+ Block profile</0>"
 msgstr ""