Merge pull request #1324 from clousky2020/feat/i18n-clean

fix(i18n): resolve code review issues for PR #1318

src/shared/components/OAuthModal.tsx

@@ -646,16 +646,21 @@ export default function OAuthModal({
                   <span className="material-symbols-outlined text-sm align-middle mr-1">
                     warning
                   </span>
-                  <strong
-                    dangerouslySetInnerHTML={{
-                      __html: t("googleOAuthWarning")
-                        .replace(
-                          "<a>",
-                          '<a href="https://github.com/diegosouzapw/OmniRoute#oauth-on-a-remote-server" target="_blank" rel="noreferrer" class="underline">'
-                        )
-                        .replace("</a>", "</a>"),
-                    }}
-                  />
+                  <strong>
+                    {t.rich("googleOAuthWarning", {
+                      code: (chunks) => <code>{chunks}</code>,
+                      a: (chunks) => (
+                        <a
+                          href="https://github.com/diegosouzapw/OmniRoute#oauth-on-a-remote-server"
+                          target="_blank"
+                          rel="noreferrer"
+                          className="underline"
+                        >
+                          {chunks}
+                        </a>
+                      ),
+                    })}
+                  </strong>
                 </div>
               )}
               {/* Generic remote info for other providers */}
@@ -686,13 +691,9 @@ export default function OAuthModal({
               <div>
                 <p className="text-sm font-medium mb-2">{t("step2PasteCallback")}</p>
                 <p className="text-xs text-text-muted mb-2">
-                  <span
-                    dangerouslySetInnerHTML={{
-                      __html: t("step2Hint")
-                        .replace("<code>", "<code>")
-                        .replace("</code>", "</code>"),
-                    }}
-                  />
+                  {t.rich("step2Hint", {
+                    code: (chunks) => <code>{chunks}</code>,
+                  })}
                 </p>
                 <Input
                   value={callbackUrl}

src/shared/components/PricingModal.tsx

@@ -119,13 +119,9 @@ export default function PricingModal({ isOpen, onClose, onSave }) {
               <div className="bg-bg-subtle border border-border rounded-lg p-3 text-sm">
                 <p className="font-medium mb-1">{t("pricingRatesFormat")}</p>
                 <p className="text-text-muted">
-                  <span
-                    dangerouslySetInnerHTML={{
-                      __html: t("ratesDescription")
-                        .replace("<strong>", "<strong>")
-                        .replace("</strong>", "</strong>"),
-                    }}
-                  />
+                  {t.rich("ratesDescription", {
+                    strong: (chunks) => <strong>{chunks}</strong>,
+                  })}
                 </p>
               </div>
 

src/shared/components/ProxyConfigModal.tsx

@@ -354,7 +354,10 @@ export default function ProxyConfigModal({
   const title =
     level === "global"
       ? t("titleGlobal")
-      : `${t(`level${level.charAt(0).toUpperCase() + level.slice(1)}` as any)} Proxy — ${levelLabel || levelId || ""}`;
+      : t("titleLevel", {
+          level: t(`level${level.charAt(0).toUpperCase() + level.slice(1)}` as any),
+          label: levelLabel || levelId || "",
+        });
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={title} maxWidth="lg">

src/shared/components/RequestLoggerV2.tsx

@@ -116,27 +116,35 @@ export default function RequestLoggerV2() {
   const t = useTranslations("requestLogger");
 
   // Get translated status filters
-  const getStatusFilters = () => [
-    { key: "all", label: t("statusFilters.all"), icon: "" },
-    { key: "error", label: t("statusFilters.error"), icon: "error" },
-    { key: "ok", label: t("statusFilters.success"), icon: "check_circle" },
-    { key: "combo", label: t("statusFilters.combo"), icon: "hub" },
-  ];
+  const statusFilters = useMemo(
+    () => [
+      { key: "all", label: t("statusFilters.all"), icon: "" },
+      { key: "error", label: t("statusFilters.error"), icon: "error" },
+      { key: "ok", label: t("statusFilters.success"), icon: "check_circle" },
+      { key: "combo", label: t("statusFilters.combo"), icon: "hub" },
+    ],
+    [t]
+  );
 
   // Get translated columns
-  const getColumns = () => [
-    { key: "status", label: t("columns.status") },
-    { key: "model", label: t("columns.model") },
-    { key: "requestedModel", label: t("columns.requested") },
-    { key: "provider", label: t("columns.provider") },
-    { key: "protocol", label: t("columns.protocol") },
-    { key: "account", label: t("columns.account") },
-    { key: "apiKey", label: t("columns.apiKey") },
-    { key: "combo", label: t("columns.combo") },
-    { key: "tokens", label: t("columns.tokens") },
-    { key: "duration", label: t("columns.duration") },
-    { key: "time", label: t("columns.time") },
-  ];
+  const columns = useMemo(
+    () => [
+      { key: "status", label: t("columns.status") },
+      { key: "cacheSource", label: t("columns.cacheSource") },
+      { key: "model", label: t("columns.model") },
+      { key: "requestedModel", label: t("columns.requested") },
+      { key: "provider", label: t("columns.provider") },
+      { key: "protocol", label: t("columns.protocol") },
+      { key: "account", label: t("columns.account") },
+      { key: "apiKey", label: t("columns.apiKey") },
+      { key: "combo", label: t("columns.combo") },
+      { key: "tokens", label: t("columns.tokens") },
+      { key: "tps", label: t("columns.tps") },
+      { key: "duration", label: t("columns.duration") },
+      { key: "time", label: t("columns.time") },
+    ],
+    [t]
+  );
 
   const [logs, setLogs] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -159,7 +167,7 @@ export default function RequestLoggerV2() {
 
   // Column visibility with localStorage persistence
   const [visibleColumns, setVisibleColumns] = useState(() => {
-    const defaultVisible = Object.fromEntries(getColumns().map((c) => [c.key, true]));
+    const defaultVisible = Object.fromEntries(columns.map((c) => [c.key, true]));
     if (typeof window === "undefined") return defaultVisible;
     try {
       const saved = localStorage.getItem("loggerVisibleColumns");
@@ -525,7 +533,7 @@ export default function RequestLoggerV2() {
       {/* Quick Filters */}
       <div className="flex flex-wrap items-center gap-2">
         {/* Status Filters */}
-        {getStatusFilters().map((f) => (
+        {statusFilters.map((f) => (
           <button
             key={f.key}
             onClick={() => setActiveFilter(activeFilter === f.key ? "all" : f.key)}
@@ -582,7 +590,7 @@ export default function RequestLoggerV2() {
       {/* Column Visibility Toggles */}
       <div className="flex flex-wrap items-center gap-1.5">
         <span className="text-[10px] text-text-muted uppercase tracking-wider mr-1">Columns</span>
-        {getColumns().map((col) => (
+        {columns.map((col) => (
           <button
             key={col.key}
             onClick={() => toggleColumn(col.key)}
@@ -628,7 +636,7 @@ export default function RequestLoggerV2() {
                   )}
                   {visibleColumns.cacheSource && (
                     <th className="px-3 py-2.5 font-semibold text-text-muted uppercase tracking-wider text-[10px]">
-                      Cache Source
+                      {t("columns.cacheSource")}
                     </th>
                   )}
                   {visibleColumns.model && (
@@ -673,7 +681,7 @@ export default function RequestLoggerV2() {
                   )}
                   {visibleColumns.tps && (
                     <th className="px-3 py-2.5 font-semibold text-text-muted uppercase tracking-wider text-[10px] text-right">
-                      TPS
+                      {t("columns.tps")}
                     </th>
                   )}
                   {visibleColumns.duration && (