feat(i18n): localize MermaidDiagram, SpecsLayout, and ThemeToggle components; update translation files for error handling and sidebar actions

Author: tikazyq

packages/ui-vite/src/components/MermaidDiagram.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import mermaid from 'mermaid';
+import { useTranslation } from 'react-i18next';
 
 interface MermaidDiagramProps {
   chart: string;
@@ -28,6 +29,7 @@ export function MermaidDiagram({ chart, className = '' }: MermaidDiagramProps) {
   const [svg, setSvg] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [id] = useState(generateId);
+  const { t } = useTranslation(['common', 'errors']);
 
   useEffect(() => {
     if (!chart || !ref.current) return;
@@ -46,7 +48,8 @@ export function MermaidDiagram({ chart, className = '' }: MermaidDiagramProps) {
         setSvg(svg);
       } catch (err) {
         console.error('Mermaid rendering error:', err);
-        setError(err instanceof Error ? err.message : 'Failed to render diagram');
+        const fallback = t('mermaid.renderError', { ns: 'errors' });
+        setError(err instanceof Error ? err.message : fallback);
       }
     };
 
@@ -57,7 +60,7 @@ export function MermaidDiagram({ chart, className = '' }: MermaidDiagramProps) {
     return (
       <div className={`border border-destructive rounded-lg p-4 ${className}`}>
         <div className="text-sm text-destructive">
-          <strong>Mermaid Diagram Error:</strong>
+          <strong>{t('mermaid.title', { ns: 'errors' })}</strong>
           <pre className="mt-2 text-xs overflow-auto">{error}</pre>
         </div>
       </div>
@@ -67,13 +70,13 @@ export function MermaidDiagram({ chart, className = '' }: MermaidDiagramProps) {
   if (!svg) {
     return (
       <div className={`border rounded-lg p-4 ${className}`}>
-        <div className="text-sm text-muted-foreground">Loading diagram...</div>
+        <div className="text-sm text-muted-foreground">{t('mermaid.loading', { ns: 'errors' })}</div>
       </div>
     );
   }
 
   return (
-    <div 
+    <div
       ref={ref}
       className={`mermaid-diagram border rounded-lg p-4 overflow-auto ${className}`}
       dangerouslySetInnerHTML={{ __html: svg }}

packages/ui-vite/src/components/SpecsLayout.tsx

@@ -1,19 +1,21 @@
 import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { Button } from '@leanspec/ui-components';
+import { useTranslation } from 'react-i18next';
 import { SpecsNavSidebar } from './SpecsNavSidebar';
 
 export function SpecsLayout() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const { t } = useTranslation('common');
 
   return (
     <div className="flex h-full relative">
       <SpecsNavSidebar mobileOpen={mobileOpen} onMobileOpenChange={setMobileOpen} />
       <div className="flex-1 min-w-0 overflow-y-auto h-[calc(100vh-3.5rem)]">
         <div className="lg:hidden sticky top-14 z-20 flex items-center justify-between bg-background/95 backdrop-blur border-b px-3 py-2 mb-4">
-          <span className="text-sm font-semibold">Specifications</span>
+          <span className="text-sm font-semibold">{t('specsNavSidebar.title')}</span>
           <Button size="sm" variant="outline" onClick={() => setMobileOpen(true)}>
-            Open sidebar
+            {t('actions.openSidebar')}
           </Button>
         </div>
         <Outlet />

packages/ui-vite/src/components/ThemeToggle.tsx

@@ -1,10 +1,12 @@
 import { Sun, Moon } from 'lucide-react';
 import { useTheme } from '../contexts';
 import { Button } from '@leanspec/ui-components';
+import { useTranslation } from 'react-i18next';
 
 export function ThemeToggle() {
   const { setTheme, resolvedTheme } = useTheme();
   const isDark = resolvedTheme === 'dark';
+  const { t } = useTranslation('common');
 
   const toggleTheme = () => setTheme(isDark ? 'light' : 'dark');
 
@@ -13,7 +15,7 @@ export function ThemeToggle() {
       variant="ghost"
       size="icon"
       onClick={toggleTheme}
-      aria-label="Toggle theme"
+      aria-label={t('theme.toggleTheme')}
       className="relative h-9 w-9"
     >
       <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

packages/ui-vite/src/locales/en/common.json

@@ -56,7 +56,8 @@
     "next": "Next",
     "loading": "Loading...",
     "search": "Search",
-    "backToTop": "Back to top"
+    "backToTop": "Back to top",
+    "openSidebar": "Open sidebar"
   },
   "spec": {
     "spec": "Spec",

packages/ui-vite/src/locales/en/errors.json

@@ -11,5 +11,10 @@
   "pageError": {
     "title": "Something went wrong",
     "description": "The page failed to render."
+  },
+  "mermaid": {
+    "title": "Mermaid diagram error",
+    "renderError": "Failed to render diagram",
+    "loading": "Loading diagram..."
   }
 }

packages/ui-vite/src/locales/zh-CN/common.json

@@ -57,7 +57,8 @@
     "next": "下一步",
     "loading": "加载中...",
     "search": "搜索",
-    "backToTop": "返回顶部"
+    "backToTop": "返回顶部",
+    "openSidebar": "打开侧边栏"
   },
   "spec": {
     "spec": "Spec",

packages/ui-vite/src/locales/zh-CN/errors.json

@@ -11,5 +11,10 @@
   "pageError": {
     "title": "页面出现错误",
     "description": "页面渲染失败。"
+  },
+  "mermaid": {
+    "title": "Mermaid 图表错误",
+    "renderError": "渲染图表失败",
+    "loading": "正在加载图表..."
   }
 }

packages/ui/src/locales/en/common.json

@@ -56,7 +56,8 @@
     "next": "Next",
     "loading": "Loading...",
     "search": "Search",
-    "backToTop": "Back to top"
+    "backToTop": "Back to top",
+    "openSidebar": "Open sidebar"
   },
   "spec": {
     "spec": "Spec",

packages/ui/src/locales/en/errors.json

@@ -11,5 +11,10 @@
   "pageError": {
     "title": "Something went wrong",
     "description": "The page failed to render."
+  },
+  "mermaid": {
+    "title": "Mermaid diagram error",
+    "renderError": "Failed to render diagram",
+    "loading": "Loading diagram..."
   }
 }

packages/ui/src/locales/zh-CN/common.json

@@ -57,7 +57,8 @@
     "next": "下一步",
     "loading": "加载中...",
     "search": "搜索",
-    "backToTop": "返回顶部"
+    "backToTop": "返回顶部",
+    "openSidebar": "打开侧边栏"
   },
   "spec": {
     "spec": "Spec",