feat(i18n): localize UI components and error messages, add shared translation keys

Author: tikazyq

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

@@ -8,22 +8,24 @@ import { PageTransition } from './shared/PageTransition';
 import { BackToTop } from './shared/BackToTop';
 import { Button } from '@leanspec/ui-components';
 import { useProject } from '../contexts';
+import { useTranslation } from 'react-i18next';
 
 function KeyboardShortcutsHelp({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation('common');
   const shortcuts = [
-    { key: 'h', description: 'Go to dashboard (home)' },
-    { key: 'g', description: 'Go to specs list' },
-    { key: 's', description: 'Go to stats' },
-    { key: 'd', description: 'Go to dependencies' },
-    { key: ',', description: 'Go to settings' },
-    { key: '/', description: 'Focus search' },
-    { key: '⌘ + K', description: 'Open quick search' },
+    { key: 'h', description: t('keyboardShortcuts.items.dashboard') },
+    { key: 'g', description: t('keyboardShortcuts.items.specs') },
+    { key: 's', description: t('keyboardShortcuts.items.stats') },
+    { key: 'd', description: t('keyboardShortcuts.items.dependencies') },
+    { key: ',', description: t('keyboardShortcuts.items.settings') },
+    { key: '/', description: t('keyboardShortcuts.items.search') },
+    { key: '⌘ + K', description: t('keyboardShortcuts.items.quickSearch') },
   ];
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
       <div className="bg-background border rounded-lg shadow-lg p-6 max-w-md w-full mx-4" onClick={e => e.stopPropagation()}>
-        <h3 className="text-lg font-medium mb-4">Keyboard Shortcuts</h3>
+        <h3 className="text-lg font-medium mb-4">{t('keyboardShortcuts.title')}</h3>
         <div className="space-y-2">
           {shortcuts.map((s) => (
             <div key={s.key} className="flex items-center justify-between">
@@ -38,7 +40,7 @@ function KeyboardShortcutsHelp({ onClose }: { onClose: () => void }) {
           size="sm"
           className="mt-4 w-full"
         >
-          Close
+          {t('actions.close')}
         </Button>
       </div>
     </div>

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

@@ -78,7 +78,7 @@ function Breadcrumb({ basePath }: { basePath: string }) {
     case 'specs': {
       const searchParams = new URLSearchParams(parsed.query || '');
       const view = searchParams.get('view');
-      const viewLabel = view === 'board' ? 'Board' : 'List';
+      const viewLabel = view === 'board' ? t('specsPage.views.board') : t('specsPage.views.list');
       items = [{ label: homeLabel, to: basePath }, { label: `${specsLabel} (${viewLabel})` }];
       break;
     }

packages/ui-vite/src/components/context/ContextClient.tsx

@@ -49,7 +49,7 @@ export function ContextClient({ projectRoot }: ContextClientProps) {
         void loadFile(list[0].path, true);
       }
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to load context files';
+      const message = err instanceof Error ? err.message : t('contextPage.errors.list');
       setError(message);
     } finally {
       setLoadingList(false);
@@ -68,7 +68,7 @@ export function ContextClient({ projectRoot }: ContextClientProps) {
       const detail = await api.getContextFile(path);
       setFileCache((prev) => ({ ...prev, [path]: detail }));
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to load file';
+      const message = err instanceof Error ? err.message : t('contextPage.errors.file');
       setFileError(message);
     } finally {
       setLoadingFile(false);

packages/ui-vite/src/components/context/ContextFileDetail.tsx

@@ -78,7 +78,7 @@ export function ContextFileDetail({ file, projectRoot, onBack }: ContextFileDeta
         <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
           <Badge variant="outline" className="text-xs flex items-center gap-1">
             <Type className="h-3 w-3" />
-            {file.fileType || 'text'}
+            {file.fileType || t('contextPage.detail.defaultFileType')}
           </Badge>
           <Badge variant="outline" className="text-xs flex items-center gap-1">
             <Layers className="h-3 w-3" />

packages/ui-vite/src/components/shared/BackToTop.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { ArrowUp } from 'lucide-react';
 import { Button } from '@leanspec/ui-components';
+import { useTranslation } from 'react-i18next';
 
 export function BackToTop() {
   const [isVisible, setIsVisible] = useState(false);
+  const { t } = useTranslation('common');
 
   useEffect(() => {
     const toggleVisibility = () => {
@@ -29,7 +31,7 @@ export function BackToTop() {
       onClick={scrollToTop}
       size="icon"
       className="fixed bottom-6 right-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
-      aria-label="Back to top"
+      aria-label={t('actions.backToTop')}
     >
       <ArrowUp className="h-5 w-5" />
     </Button>

packages/ui-vite/src/components/shared/ColorPicker.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Button, Popover, PopoverContent, PopoverTrigger } from '@leanspec/ui-components';
 import { cn } from '../../lib/utils';
+import { useTranslation } from 'react-i18next';
 
 const PROJECT_COLORS = [
   '#ef4444',
@@ -25,6 +26,7 @@ interface ColorPickerProps {
 
 export function ColorPicker({ value, onChange, disabled }: ColorPickerProps) {
   const [open, setOpen] = useState(false);
+  const { t } = useTranslation('common');
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -34,7 +36,7 @@ export function ColorPicker({ value, onChange, disabled }: ColorPickerProps) {
           size="sm"
           className="h-8 w-8 p-0"
           disabled={disabled}
-          aria-label="Pick color"
+          aria-label={t('colorPicker.pickColor')}
         >
           <div
             className="h-4 w-4 rounded-full border"
@@ -56,7 +58,7 @@ export function ColorPicker({ value, onChange, disabled }: ColorPickerProps) {
                 onChange(color);
                 setOpen(false);
               }}
-              aria-label={`Select color ${color}`}
+              aria-label={t('colorPicker.selectColor', { color })}
             />
           ))}
         </div>

packages/ui-vite/src/components/shared/ErrorBoundary.tsx

@@ -2,6 +2,7 @@ import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
 import { Button } from '@leanspec/ui-components';
 import { EmptyState } from './EmptyState';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   children: ReactNode;
@@ -15,7 +16,14 @@ interface State {
   error?: Error;
 }
 
-export class ErrorBoundary extends Component<Props, State> {
+interface TranslatedProps extends Props {
+  fallbackTitle: string;
+  fallbackMessage: string;
+  retryLabel: string;
+  reloadLabel: string;
+}
+
+class ErrorBoundaryInner extends Component<TranslatedProps, State> {
   state: State = { hasError: false };
 
   static getDerivedStateFromError(error: Error): State {
@@ -36,16 +44,18 @@ export class ErrorBoundary extends Component<Props, State> {
       return (
         <EmptyState
           icon={AlertTriangle}
-          title={this.props.title || 'Something went wrong'}
-          description={this.props.message || this.state.error?.message || 'The page failed to render.'}
+          title={this.props.title || this.props.fallbackTitle}
+          description={
+            this.props.message || this.state.error?.message || this.props.fallbackMessage
+          }
           tone="error"
           actions={(
             <>
               <Button size="sm" onClick={this.resetBoundary}>
-                Retry
+                {this.props.retryLabel}
               </Button>
               <Button size="sm" variant="outline" onClick={() => window.location.reload()}>
-                Reload page
+                {this.props.reloadLabel}
               </Button>
             </>
           )}
@@ -56,3 +66,17 @@ export class ErrorBoundary extends Component<Props, State> {
     return this.props.children;
   }
 }
+
+export function ErrorBoundary(props: Props) {
+  const { t } = useTranslation(['common', 'errors']);
+
+  return (
+    <ErrorBoundaryInner
+      fallbackTitle={t('pageError.title', { ns: 'errors' })}
+      fallbackMessage={t('pageError.description', { ns: 'errors' })}
+      retryLabel={t('actions.retry', { ns: 'common' })}
+      reloadLabel={t('actions.refresh', { ns: 'common' })}
+      {...props}
+    />
+  );
+}

packages/ui-vite/src/components/spec-detail/SubSpecTabs.tsx

@@ -7,6 +7,7 @@ import GithubSlugger from 'github-slugger';
 import { BookOpen, CheckSquare, Code, FileText, GitBranch, Map, Palette, TestTube, Wrench } from 'lucide-react';
 import { Card, Button, Separator, cn } from '@leanspec/ui-components';
 import { MermaidDiagram } from '../MermaidDiagram';
+import { useTranslation } from 'react-i18next';
 
 export interface SubSpec {
   name: string;
@@ -88,6 +89,7 @@ interface SubSpecTabsProps {
 export function SubSpecTabs({ mainContent, subSpecs = [] }: SubSpecTabsProps) {
   const [activeTab, setActiveTab] = useState('readme');
   const markdownComponents = useMarkdownComponents();
+  const { t } = useTranslation('common');
 
   const hasSubSpecs = subSpecs.length > 0;
   const overviewCardVisible = hasSubSpecs && subSpecs.length > 2 && activeTab === 'readme';
@@ -116,9 +118,9 @@ export function SubSpecTabs({ mainContent, subSpecs = [] }: SubSpecTabsProps) {
           <div className="flex items-start gap-3">
             <BookOpen className="h-5 w-5 text-primary mt-0.5" />
             <div className="space-y-2">
-              <h4 className="font-semibold text-sm">This spec has multiple sections</h4>
+              <h4 className="font-semibold text-sm">{t('subSpecTabs.multiSectionTitle')}</h4>
               <p className="text-sm text-muted-foreground">
-                Use the tabs below to navigate between the main overview and detailed sections.
+                {t('subSpecTabs.multiSectionDescription')}
               </p>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 {subSpecs.map((subSpec) => {
@@ -142,7 +144,7 @@ export function SubSpecTabs({ mainContent, subSpecs = [] }: SubSpecTabsProps) {
       )}
 
       <div className="border-b flex flex-wrap gap-2">
-        {renderTabButton('readme', 'Overview', FileText)}
+        {renderTabButton('readme', t('specDetail.tabs.overview'), FileText)}
         {subSpecs.map((subSpec) => {
           const value = subSpec.name.toLowerCase();
           const Icon = subSpec.iconName ? ICON_MAP[subSpec.iconName] : undefined;

packages/ui-vite/src/components/spec-detail/TableOfContents.tsx

@@ -9,6 +9,7 @@ import {
   cn,
 } from '@leanspec/ui-components';
 import { extractHeadings, type HeadingItem } from '../../lib/markdown-utils';
+import { useTranslation } from 'react-i18next';
 
 function scrollToHeading(id: string) {
   const element = document.getElementById(id);
@@ -57,18 +58,22 @@ interface TableOfContentsProps {
 }
 
 export function TableOfContentsSidebar({ content }: TableOfContentsProps) {
+  const { t } = useTranslation('common');
   const headings = useMemo(() => extractHeadings(content), [content]);
   if (headings.length === 0) return null;
 
   return (
     <div className="py-2">
-      <h4 className="mb-4 text-sm font-semibold leading-none tracking-tight px-2">On this page</h4>
+      <h4 className="mb-4 text-sm font-semibold leading-none tracking-tight px-2">
+        {t('tableOfContents.onThisPage')}
+      </h4>
       <TOCList headings={headings} onHeadingClick={scrollToHeading} />
     </div>
   );
 }
 
 export function TableOfContents({ content }: TableOfContentsProps) {
+  const { t } = useTranslation('common');
   const [open, setOpen] = useState(false);
   const headings = useMemo(() => extractHeadings(content), [content]);
 
@@ -87,13 +92,13 @@ export function TableOfContents({ content }: TableOfContentsProps) {
         aria-expanded={open}
         onClick={() => setOpen(true)}
         className="fixed bottom-24 right-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
-        aria-label="Table of contents"
+        aria-label={t('tableOfContents.open')}
       >
         <List className="h-5 w-5" />
       </Button>
       <DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Table of Contents</DialogTitle>
+          <DialogTitle>{t('tableOfContents.title')}</DialogTitle>
         </DialogHeader>
         <TOCList headings={headings} onHeadingClick={handleHeadingClick} />
       </DialogContent>

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

@@ -55,7 +55,8 @@
     "retry": "Retry",
     "next": "Next",
     "loading": "Loading...",
-    "search": "Search"
+    "search": "Search",
+    "backToTop": "Back to top"
   },
   "spec": {
     "spec": "Spec",
@@ -102,6 +103,31 @@
     "searchPlaceholder": "Search projects...",
     "noProject": "No project found."
   },
+  "keyboardShortcuts": {
+    "title": "Keyboard Shortcuts",
+    "items": {
+      "dashboard": "Go to dashboard (home)",
+      "specs": "Go to specs list",
+      "stats": "Go to stats",
+      "dependencies": "Go to dependencies",
+      "settings": "Go to settings",
+      "search": "Focus search",
+      "quickSearch": "Open quick search"
+    }
+  },
+  "tableOfContents": {
+    "title": "Table of Contents",
+    "open": "Open table of contents",
+    "onThisPage": "On this page"
+  },
+  "subSpecTabs": {
+    "multiSectionTitle": "This spec has multiple sections",
+    "multiSectionDescription": "Use the tabs below to navigate between the main overview and detailed sections."
+  },
+  "colorPicker": {
+    "pickColor": "Pick color",
+    "selectColor": "Select color {{color}}"
+  },
   "createProject": {
     "title": "Add Project",
     "descriptionPicker": "Browse and select the project directory.",
@@ -371,10 +397,15 @@
       "openInEditor": "Open in Editor",
       "copy": "Copy",
       "copySuccess": "Copied!",
+      "defaultFileType": "text",
       "lines": "{{count}} lines",
       "modified": "Modified {{date}}",
       "size": "{{size}} KB",
       "selectFile": "Select a file to view its content"
+    },
+    "errors": {
+      "list": "Failed to load context files",
+      "file": "Failed to load file"
     }
   },
   "specTimeline": {