refactor(plugin-detail): replace hardcoded English strings in DiffView with i18n translation calls

- Import useDetailTranslation hook
- Replace 'Unified diff', 'Side-by-side diff', 'No changes', 'Previous', 'Current' with t() calls

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Copilot

packages/plugin-detail/src/DiffView.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { cn, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { Columns2, Rows3 } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export type DiffFieldType = 'string' | 'number' | 'boolean' | 'json' | 'date';
 export type DiffMode = 'unified' | 'side-by-side';
@@ -98,6 +99,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
   mode: initialMode = 'unified',
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [mode, setMode] = React.useState<DiffMode>(initialMode);
 
   const oldLines = React.useMemo(() => valueToLines(oldValue, fieldType), [oldValue, fieldType]);
@@ -146,7 +148,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
               size="icon"
               className="h-7 w-7"
               onClick={() => setMode('unified')}
-              title="Unified diff"
+              title={t('detail.unifiedDiff')}
             >
               <Rows3 className="h-3.5 w-3.5" />
             </Button>
@@ -155,7 +157,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
               size="icon"
               className="h-7 w-7"
               onClick={() => setMode('side-by-side')}
-              title="Side-by-side diff"
+              title={t('detail.sideBySideDiff')}
             >
               <Columns2 className="h-3.5 w-3.5" />
             </Button>
@@ -164,7 +166,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
       </CardHeader>
       <CardContent className="p-0">
         {!hasChanges ? (
-          <p className="px-4 py-3 text-sm text-muted-foreground">No changes</p>
+          <p className="px-4 py-3 text-sm text-muted-foreground">{t('detail.noChanges')}</p>
         ) : mode === 'unified' ? (
           /* Unified diff view */
           <div className="font-mono text-xs overflow-x-auto">
@@ -192,10 +194,10 @@ export const DiffView: React.FC<DiffViewProps> = ({
             <div className="grid grid-cols-2 divide-x font-mono text-xs min-w-0">
               {/* Headers */}
               <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
-                Previous
+                {t('detail.previousVersion')}
               </div>
               <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
-                Current
+                {t('detail.currentVersion')}
               </div>
               {/* Rows */}
               {sideBySidePairs.map((pair, index) => (

packages/plugin-detail/src/RecordComments.tsx

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { cn, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { MessageSquare, Send, Pin, Search, X } from 'lucide-react';
 import type { CommentEntry } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RecordCommentsProps {
   comments: CommentEntry[];
@@ -50,6 +51,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
   searchable = false,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [newComment, setNewComment] = React.useState('');
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState('');
@@ -98,7 +100,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
       <CardHeader>
         <CardTitle className="flex items-center gap-2 text-base">
           <MessageSquare className="h-4 w-4" />
-          Comments
+          {t('detail.comments')}
           <span className="text-sm font-normal text-muted-foreground">
             ({comments.length})
           </span>
@@ -112,7 +114,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
               <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
               <input
                 className="w-full rounded-md border border-input bg-background pl-8 pr-8 py-1.5 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                placeholder="Search comments…"
+                placeholder={t('detail.searchComments')}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 aria-label="Search comments"
@@ -136,7 +138,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
           <div className="flex gap-2">
             <textarea
               className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
-              placeholder="Add a comment… (Ctrl+Enter to submit)"
+              placeholder={t('detail.addCommentPlaceholder')}
               value={newComment}
               onChange={(e) => setNewComment(e.target.value)}
               onKeyDown={handleKeyDown}
@@ -157,7 +159,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
         {/* Comment List */}
         {sortedComments.length === 0 ? (
           <p className="text-sm text-muted-foreground text-center py-4">
-            {searchQuery.trim() ? 'No matching comments' : 'No comments yet'}
+            {searchQuery.trim() ? t('detail.noMatchingComments') : t('detail.noCommentsYet')}
           </p>
         ) : (
           <div className="space-y-3">
@@ -187,7 +189,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
                     {comment.pinned && (
                       <span className="text-xs text-amber-600 flex items-center gap-0.5">
                         <Pin className="h-3 w-3" />
-                        Pinned
+                        {t('detail.pinned')}
                       </span>
                     )}
                   </div>
@@ -201,7 +203,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
                       aria-label={comment.pinned ? 'Unpin comment' : 'Pin comment'}
                     >
                       <Pin className="h-3 w-3" />
-                      {comment.pinned ? 'Unpin' : 'Pin'}
+                      {comment.pinned ? t('detail.unpin') : t('detail.pin')}
                     </button>
                   )}
                 </div>