fix(i18n): localize hardcoded web UI copy (#9245)

* fix(i18n): localize hardcoded web UI copy

* test(i18n): cover hardcoded UI regressions

* chore(changelog): add PR 9245 fragment

src/shared/components/docs/APIReference.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import { useTranslations } from "next-intl";
 import { cn } from "@/shared/utils/cn";
 
 interface APIReferenceProps {
@@ -20,6 +21,7 @@ export default function APIReference({
   returns,
   className,
 }: APIReferenceProps) {
+  const t = useTranslations("docs.apiReferenceTable");
   return (
     <div
       role="region"
@@ -38,19 +40,19 @@ export default function APIReference({
 
       {params && params.length > 0 && (
         <div className="mb-6">
-          <h4 className="text-sm font-semibold text-text-primary mb-3">Parameters</h4>
+          <h4 className="text-sm font-semibold text-text-primary mb-3">{t("parameters")}</h4>
           <div className="overflow-x-auto">
             <table className="w-full text-sm text-left border-collapse">
               <thead className="text-xs text-text-muted uppercase bg-border/50">
                 <tr>
                   <th className="px-4 py-2 border-b border-border" scope="col">
-                    Name
+                    {t("name")}
                   </th>
                   <th className="px-4 py-2 border-b border-border" scope="col">
-                    Type
+                    {t("type")}
                   </th>
                   <th className="px-4 py-2 border-b border-border" scope="col">
-                    Description
+                    {t("description")}
                   </th>
                 </tr>
               </thead>
@@ -70,9 +72,9 @@ export default function APIReference({
 
       {returns && (
         <div>
-          <h4 className="text-sm font-semibold text-text-primary mb-3">Returns</h4>
+          <h4 className="text-sm font-semibold text-text-primary mb-3">{t("returns")}</h4>
           <div className="p-3 rounded bg-bg border border-border font-mono text-sm">
-            <span className="text-text-muted">Type: </span>
+            <span className="text-text-muted">{t("typePrefix")} </span>
             <span className="text-text-main">{returns.type}</span>
             <div className="text-xs text-text-muted mt-1">{returns.description}</div>
           </div>

src/shared/components/docs/DocsBreadcrumbs.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { cn } from "@/shared/utils/cn";
+import { useTranslations } from "next-intl";
 
 interface DocsBreadcrumbsProps {
   labels: Record<string, string>;
@@ -11,6 +12,7 @@ interface DocsBreadcrumbsProps {
 }
 
 export default function DocsBreadcrumbs({ labels, className }: DocsBreadcrumbsProps) {
+  const t = useTranslations("docs");
   const pathname = usePathname();
   if (!pathname || pathname === "/") return null;
 
@@ -23,11 +25,11 @@ export default function DocsBreadcrumbs({ labels, className }: DocsBreadcrumbsPr
 
   return (
     <nav
-      aria-label="Breadcrumb"
+      aria-label={t("breadcrumb")}
       className={cn("flex items-center gap-2 text-sm text-text-muted mb-6", className)}
     >
       <Link href="/" className="hover:text-text-main transition-colors">
-        Docs
+        {t("docsLabel")}
       </Link>
       {crumbs.map((crumb, i) => (
         <React.Fragment key={crumb.href}>