fix(i18n): Translate the enabled-count phrase (#14581)

mobile/src/components/ui/text.tsx

@@ -43,6 +43,7 @@ const COLOR_CONFIG: Record<TextColor, string | null> = {
   "text-light-05": "text-text-light-05",
   "text-dark-03": "text-text-dark-03",
   "text-dark-05": "text-text-dark-05",
+  "action-selection-05": "text-action-selection-05",
   "status-error-01": "text-status-error-01",
   "status-error-02": "text-status-error-02",
   "status-error-05": "text-status-error-05",

web/lib/opal/src/components/text/components.tsx

@@ -133,6 +133,7 @@ const COLOR_CONFIG: Record<TextColor, string | null> = {
   "text-light-05": "text-text-light-05",
   "text-dark-03": "text-text-dark-03",
   "text-dark-05": "text-text-dark-05",
+  "action-selection-05": "text-action-selection-05",
   "status-error-01": "text-status-error-01",
   "status-error-02": "text-status-error-02",
   "status-error-05": "text-status-error-05",

web/lib/shared/src/contracts/typography.ts

@@ -47,6 +47,7 @@ export type TextColor =
   | "text-light-05"
   | "text-dark-03"
   | "text-dark-05"
+  | "action-selection-05"
   | "status-error-01"
   | "status-error-02"
   | "status-error-05"

web/src/i18n/messages/ar.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "حفظ"
       }
     },
+    "enabledCount": {
+      "label": "<value>{enabled}</value> من {total}"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/de.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "Speichern"
       }
     },
+    "enabledCount": {
+      "label": "<value>{enabled}</value> von {total}"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/en.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "Save"
       }
     },
+    "enabledCount": {
+      "label": "<value>{enabled}</value> of {total}"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/es.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "Guardar"
       }
     },
+    "enabledCount": {
+      "label": "<value>{enabled}</value> de {total}"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/fr.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "Enregistrer"
       }
     },
+    "enabledCount": {
+      "label": "<value>{enabled}</value> sur {total}"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/ja.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "保存"
       }
     },
+    "enabledCount": {
+      "label": "{total} 中 <value>{enabled}</value>"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/ko.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "저장"
       }
     },
+    "enabledCount": {
+      "label": "{total}개 중 <value>{enabled}</value>개"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/pt.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "Salvar"
       }
     },
+    "enabledCount": {
+      "label": "<value>{enabled}</value> de {total}"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/i18n/messages/zh.json

@@ -10730,6 +10730,9 @@
         "ariaLabel": "保存"
       }
     },
+    "enabledCount": {
+      "label": "{total} 个中的 <value>{enabled}</value> 个"
+    },
     "errorPages": {
       "accessRestricted": {
         "billingAdminHint": {

web/src/lib/tools/components/EnabledCount.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import EnabledCount from "./EnabledCount";
+import EnabledCount from "@/lib/tools/components/EnabledCount";
 
 const meta: Meta<typeof EnabledCount> = {
-  title: "refresh-components/EnabledCount",
+  title: "tools/EnabledCount",
   component: EnabledCount,
   tags: ["autodocs"],
   parameters: {
@@ -20,17 +20,8 @@ export const Default: Story = {
   },
 };
 
-export const WithName: Story = {
-  args: {
-    name: "connector",
-    enabledCount: 3,
-    totalCount: 10,
-  },
-};
-
 export const AllEnabled: Story = {
   args: {
-    name: "source",
     enabledCount: 8,
     totalCount: 8,
   },
@@ -38,7 +29,6 @@ export const AllEnabled: Story = {
 
 export const NoneEnabled: Story = {
   args: {
-    name: "item",
     enabledCount: 0,
     totalCount: 15,
   },
@@ -46,7 +36,6 @@ export const NoneEnabled: Story = {
 
 export const SingleItem: Story = {
   args: {
-    name: "document",
     enabledCount: 1,
     totalCount: 1,
   },

web/src/lib/tools/components/EnabledCount.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { useTranslations } from "next-intl";
+import { Text } from "@opal/components";
+import { richNodes } from "@opal/utils";
+
+interface EnabledCountProps {
+  enabledCount: number;
+  totalCount: number;
+}
+
+/**
+ * How many of a set of tools are switched on, e.g. "3 of 12".
+ *
+ * The noun is left to the surrounding row, which already names what is being
+ * counted — every call site is a tool context.
+ */
+export default function EnabledCount({
+  enabledCount,
+  totalCount,
+}: EnabledCountProps) {
+  const t = useTranslations("common");
+
+  // The enabled figure is picked out from the rest of the phrase. It has to
+  // be a tag rather than a separate element, because where the number falls
+  // in the sentence is the translation's business, not this component's.
+  function value(chunks: ReactNode) {
+    return <Text color="action-selection-05">{richNodes(chunks)}</Text>;
+  }
+
+  return (
+    <Text color="text-03">
+      {richNodes(
+        t.rich("enabledCount.label", {
+          enabled: enabledCount,
+          total: totalCount,
+          value,
+        })
+      )}
+    </Text>
+  );
+}

web/src/lib/tools/components/MCPLineItem.tsx

@@ -19,7 +19,7 @@ import {
   MCPAuthenticationPerformer,
   ToolSnapshot,
 } from "@/lib/tools/types";
-import EnabledCount from "@/refresh-components/EnabledCount";
+import EnabledCount from "@/lib/tools/components/EnabledCount";
 
 export interface MCPServer {
   id: number;

web/src/lib/tools/components/ToolLineItem.tsx

@@ -29,7 +29,7 @@ import { useToolsPopover } from "@/lib/tools/providers";
 import { ToolSnapshot } from "@/lib/tools/types";
 import { getAdminConfigureInfo, getToolTooltip } from "@/lib/tools/utils";
 import { Permission } from "@/lib/types";
-import EnabledCount from "@/refresh-components/EnabledCount";
+import EnabledCount from "@/lib/tools/components/EnabledCount";
 import { useUser } from "@/providers/UserProvider";
 
 // Names the hover group that swaps the source count for the disable button.

web/src/refresh-components/EnabledCount.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import Text from "@/refresh-components/texts/Text";
-
-interface EnabledCountProps {
-  name?: string;
-  enabledCount: number;
-  totalCount: number;
-}
-
-const EnabledCount = memo(
-  ({ name, enabledCount, totalCount }: EnabledCountProps) => {
-    return (
-      <Text text03 mainUiBody>
-        <Text mainUiBody className="text-action-selection-05">
-          {enabledCount}
-        </Text>
-        {` of ${totalCount} ${name ?? ""}${
-          name && totalCount !== 1 ? "s" : ""
-        }`}
-      </Text>
-    );
-  }
-);
-EnabledCount.displayName = "EnabledCount";
-
-export default EnabledCount;

web/src/sections/actions/ToolsList.tsx

@@ -7,7 +7,7 @@ import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import FadingEdgeContainer from "@/refresh-components/FadingEdgeContainer";
 import ToolItemSkeleton from "@/sections/actions/skeleton/ToolItemSkeleton";
-import EnabledCount from "@/refresh-components/EnabledCount";
+import EnabledCount from "@/lib/tools/components/EnabledCount";
 import { SvgEye, SvgXCircle } from "@opal/icons";
 
 export interface ToolsListProps {
@@ -96,7 +96,6 @@ const ToolsList: React.FC<ToolsListProps> = ({
                 <EnabledCount
                   enabledCount={enabledCount}
                   totalCount={totalCount}
-                  name="tool"
                 />
               )}
               {onToggleShowOnlyEnabled && enabledCount > 0 && (

web/src/views/AgentEditorPage.tsx

@@ -87,7 +87,7 @@ import { useAvailableTools } from "@/lib/tools/hooks";
 import { getActionIcon } from "@/lib/tools/utils";
 import { AgentEditorMCPServer, MCPTool, ToolSnapshot } from "@/lib/tools/types";
 import useFilter from "@/hooks/useFilter";
-import EnabledCount from "@/refresh-components/EnabledCount";
+import EnabledCount from "@/lib/tools/components/EnabledCount";
 import { useAppPosition } from "@/lib/position/hooks";
 import { isDateInFuture } from "@/lib/dateUtils";
 import {