From 92d6f3e84e33e5a6cf072111adc40c4c8d5d81a3 Mon Sep 17 00:00:00 2001
From: Pedro Augusto <contact@pedroaugusto.net>
Date: Fri, 9 Aug 2024 23:37:27 -0300
Subject: [PATCH] feat: add i18n support for the matching rules section

---
 src/_locales/en/messages.json.ts   | 15 +++++++++++++++
 src/common/locales.ts              |  5 +++++
 src/scripts/block-dialog.tsx       |  8 ++++----
 src/scripts/interactive-ruleset.ts |  4 ++--
 src/scripts/utilities.ts           |  7 ++++++-
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/_locales/en/messages.json.ts b/src/_locales/en/messages.json.ts
index 5f1d9095c..190d0b2ba 100644
--- a/src/_locales/en/messages.json.ts
+++ b/src/_locales/en/messages.json.ts
@@ -28,6 +28,9 @@ export default exportAsMessages({
   // The text of an OK button.
   okButton: "OK",
 
+  // The text that represents the user's own personal blocklist.
+  personalBlocklist: "Personal Blocklist",
+
   // The text that means one site has been blocked.
   content_singleSiteBlocked: "uBlacklist has blocked 1 site",
 
@@ -89,6 +92,18 @@ export default exportAsMessages({
   // The text of the button to activate this extension.
   popup_activateButton: "Activate",
 
+  // The title of the disclosure widget that contains the matching rules information.
+  popup_matchingRules: "Matching Rules",
+
+  // The label for the textarea that shows rules blocking the entry.
+  popup_blockingRulesLabel: "Rules blocking this entry",
+
+  // The label for the textarea that shows rules unblocking the entry.
+  popup_unblockingRulesLabel: "Rules unblocking this entry",
+
+  // The label for the textarea that shows rules highlighting the entry.
+  popup_highlightingRulesLabel: "Rules highlighting this entry",
+
   // The title of the general section.
   options_generalTitle: "General",
 
diff --git a/src/common/locales.ts b/src/common/locales.ts
index fc588ebc2..442dd8d5a 100644
--- a/src/common/locales.ts
+++ b/src/common/locales.ts
@@ -7,6 +7,7 @@ export type MessageName =
   | "unauthorizedError"
   | "cancelButton"
   | "okButton"
+  | "personalBlocklist"
   | "content_singleSiteBlocked"
   | "content_multipleSitesBlocked"
   | "content_showBlockedSitesLink"
@@ -27,6 +28,10 @@ export type MessageName =
   | "popup_active"
   | "popup_inactive"
   | "popup_activateButton"
+  | "popup_matchingRules"
+  | "popup_blockingRulesLabel"
+  | "popup_unblockingRulesLabel"
+  | "popup_highlightingRulesLabel"
   | "options_generalTitle"
   | "options_blacklistLabel"
   | "options_blacklistHelper"
diff --git a/src/scripts/block-dialog.tsx b/src/scripts/block-dialog.tsx
index 865e4ae74..2f61ec6d5 100644
--- a/src/scripts/block-dialog.tsx
+++ b/src/scripts/block-dialog.tsx
@@ -290,14 +290,14 @@ const BlockDialogContent: React.FC<BlockDialogContentProps> = ({
               }}
             >
               <DetailsSummary className={FOCUS_START_CLASS}>
-                Matching Rules
+                {translate("popup_matchingRules")}
               </DetailsSummary>
               <DetailsBody>
                 <Row>
                   <RowItem expanded>
                     <LabelWrapper fullWidth>
                       <ControlLabel for="blocking-rules-text">
-                        Rules blocking this entry:
+                        {translate("popup_blockingRulesLabel")}
                       </ControlLabel>
                     </LabelWrapper>
                     {state.matchingRulesOpen && (
@@ -318,7 +318,7 @@ const BlockDialogContent: React.FC<BlockDialogContentProps> = ({
                   <RowItem expanded>
                     <LabelWrapper fullWidth>
                       <ControlLabel for="unblocking-rules-text">
-                        Rules unblocking this entry:
+                        {translate("popup_unblockingRulesLabel")}
                       </ControlLabel>
                     </LabelWrapper>
                     {state.matchingRulesOpen && (
@@ -339,7 +339,7 @@ const BlockDialogContent: React.FC<BlockDialogContentProps> = ({
                   <RowItem expanded>
                     <LabelWrapper fullWidth>
                       <ControlLabel for="highlight-rules-text">
-                        Rules highlighting this entry:
+                        {translate("popup_highlightingRulesLabel")}
                       </ControlLabel>
                     </LabelWrapper>
                     {state.matchingRulesOpen && (
diff --git a/src/scripts/interactive-ruleset.ts b/src/scripts/interactive-ruleset.ts
index f6be5d9ca..0fe16bd99 100644
--- a/src/scripts/interactive-ruleset.ts
+++ b/src/scripts/interactive-ruleset.ts
@@ -286,7 +286,7 @@ export class InteractiveRuleset {
     // Get rules from user's personal blacklist
     // Note: I need to internationalize this string later with translate() !!
     const matches = getMatchesPerRuleset(
-      "personal-blacklist",
+      "personal-blocklist",
       this.userRuleset,
       props,
     );
@@ -345,7 +345,7 @@ function getMatchesPerRuleset(
   // "Block this website" button.
   // This ensures the line numbers are accurate without reloading.
   const rulesetLines =
-    rulesetName === "personal-blacklist" ? [...ruleset] : null;
+    rulesetName === "personal-blocklist" ? [...ruleset] : null;
   const previousMatchIndexes = new Map<string, number>();
 
   for (let { lineNumber, specifier } of rawResults) {
diff --git a/src/scripts/utilities.ts b/src/scripts/utilities.ts
index d35627a9d..03d7f2a57 100644
--- a/src/scripts/utilities.ts
+++ b/src/scripts/utilities.ts
@@ -1,5 +1,6 @@
 import dayjs from "dayjs";
 import type { InteractiveRuleset } from "./interactive-ruleset.ts";
+import { translate } from "./locales.ts";
 import {
   type LinkProps,
   Ruleset,
@@ -180,7 +181,11 @@ export function getMatchingRulesText(
       // Check whether the ruleset contains rules of the current rule type
       if (match[ruleType].length === 0) continue;
       // Add header with ruleset name
-      matchingRulesText[ruleType] += `# ${match.rulesetName}\n`;
+      const headerContent =
+        match.rulesetName === "personal-blocklist"
+          ? translate("personalBlocklist")
+          : match.rulesetName;
+      matchingRulesText[ruleType] += `# ${headerContent}\n`;
       // Add individual rules
       matchingRulesText[ruleType] += match[ruleType]
         .map(({ lineContent, lineNumber }) => {