feat(plugin-detail): replace hardcoded strings with useDetailTranslation

Copilot · Copilot · Copilot · commit c99c24baea92 · 2026-03-25T13:42:47.000Z
Updated 6 components to use useDetailTranslation hook:
- RecordChatterPanel: discussion labels
- RichTextCommentInput: toolbar tooltips, placeholder
- SubscriptionToggle: subscribe/unsubscribe tooltips
- RecordNavigationEnhanced: nav titles, position indicator, search
- RecordActivityTimeline: filter options, placeholders, labels
- ThreadedReplies: reply count, placeholder

FILTER_OPTIONS converted to getFilterOptions(t) function for i18n.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/packages/plugin-detail/src/CommentAttachment.tsx b/packages/plugin-detail/src/CommentAttachment.tsx
@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { cn, Button } from '@object-ui/components';
 import { Paperclip, X, FileText, Image, FileArchive, File, Upload } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface Attachment {
   id: string;
@@ -53,6 +54,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
   className,
   readOnly = false,
 }) => {
+  const { t } = useDetailTranslation();
   const [isDragOver, setIsDragOver] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -117,7 +119,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
         >
           <Upload className="h-5 w-5 mx-auto text-muted-foreground mb-1" />
           <p className="text-xs text-muted-foreground">
-            Drop files here or click to upload
+            {t('detail.dropFilesToUpload')}
           </p>
           <input
             ref={fileInputRef}
@@ -135,7 +137,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
           <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <Paperclip className="h-3 w-3" />
             <span>
-              {attachments.length} attachment{attachments.length !== 1 ? 's' : ''}
+              {attachments.length !== 1 ? t('detail.attachmentCountPlural', { count: attachments.length }) : t('detail.attachmentCount', { count: attachments.length })}
             </span>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -176,7 +178,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
                       size="icon"
                       className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                       onClick={() => onRemove(attachment.id)}
-                      title="Remove attachment"
+                      title={t('detail.removeAttachment')}
                     >
                       <X className="h-3.5 w-3.5" />
                     </Button>
diff --git a/packages/plugin-detail/src/RecordActivityTimeline.tsx b/packages/plugin-detail/src/RecordActivityTimeline.tsx
@@ -28,6 +28,7 @@ import { FieldChangeItem } from './FieldChangeItem';
 import { ReactionPicker } from './ReactionPicker';
 import { ThreadedReplies } from './ThreadedReplies';
 import { SubscriptionToggle } from './SubscriptionToggle';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export type FeedFilterMode = 'all' | 'comments_only' | 'changes_only' | 'tasks_only';
 
@@ -81,12 +82,14 @@ const FEED_TYPE_COLORS: Record<FeedItemType, string> = {
   call: 'bg-teal-100 text-teal-600',
 };
 
-const FILTER_OPTIONS: { value: FeedFilterMode; label: string }[] = [
-  { value: 'all', label: 'All Activity' },
-  { value: 'comments_only', label: 'Comments Only' },
-  { value: 'changes_only', label: 'Field Changes' },
-  { value: 'tasks_only', label: 'Tasks Only' },
-];
+function getFilterOptions(t: (key: string) => string): { value: FeedFilterMode; label: string }[] {
+  return [
+    { value: 'all', label: t('detail.allActivity') },
+    { value: 'comments_only', label: t('detail.commentsOnly') },
+    { value: 'changes_only', label: t('detail.fieldChangesFilter') },
+    { value: 'tasks_only', label: t('detail.tasksOnly') },
+  ];
+}
 
 function formatTimestamp(timestamp: string): string {
   try {
@@ -144,6 +147,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
   collapseWhenEmpty = false,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [internalFilter, setInternalFilter] = React.useState<FeedFilterMode>('all');
   const [commentText, setCommentText] = React.useState('');
   const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -229,7 +233,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2 text-base">
             <Activity className="h-4 w-4" />
-            Activity
+            {t('detail.activity')}
             <span className="text-sm font-normal text-muted-foreground">
               ({filtered.length})
             </span>
@@ -254,7 +258,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
               onChange={(e) => handleFilterChange(e.target.value as FeedFilterMode)}
               aria-label="Filter activity"
             >
-              {FILTER_OPTIONS.map((opt) => (
+              {getFilterOptions(t).map((opt) => (
                 <option key={opt.value} value={opt.value}>
                   {opt.label}
                 </option>
@@ -268,7 +272,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
           <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="Leave a comment… (Ctrl+Enter to submit)"
+              placeholder={t('detail.leaveCommentPlaceholder')}
               value={commentText}
               onChange={(e) => setCommentText(e.target.value)}
               onKeyDown={handleKeyDown}
@@ -291,7 +295,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
         {filtered.length === 0 ? (
           collapseWhenEmpty ? null : (
             <p className="text-sm text-muted-foreground text-center py-4">
-              No activity recorded
+              {t('detail.noActivity')}
             </p>
           )
         ) : (
@@ -332,17 +336,17 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
                           <span className="text-sm font-medium">{item.actor}</span>
                           {item.source && (
                             <span className="text-xs text-muted-foreground">
-                              via {item.source}
+                              {t('detail.via', { source: item.source })}
                             </span>
                           )}
                           <span className="text-xs text-muted-foreground">
                             {formatTimestamp(item.createdAt)}
                           </span>
                           {item.edited && (
-                            <span className="text-xs text-muted-foreground italic">(edited)</span>
+                            <span className="text-xs text-muted-foreground italic">{t('detail.edited')}</span>
                           )}
                           {item.pinned && (
-                            <span className="text-xs text-amber-600">📌 Pinned</span>
+                            <span className="text-xs text-amber-600">📌 {t('detail.pinned')}</span>
                           )}
                         </div>
 
@@ -419,7 +423,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
               ) : (
                 <ChevronDown className="h-4 w-4 mr-1" />
               )}
-              Load more
+              {t('detail.loadMore')}
             </Button>
           </div>
         )}
diff --git a/packages/plugin-detail/src/RecordChatterPanel.tsx b/packages/plugin-detail/src/RecordChatterPanel.tsx
@@ -12,6 +12,7 @@ import { MessageSquare, PanelRightOpen, PanelRightClose, X } from 'lucide-react'
 import type { RecordChatterComponentProps, FeedItem, RecordSubscription } from '@object-ui/types';
 import { RecordActivityTimeline } from './RecordActivityTimeline';
 import type { FeedFilterMode, RecordActivityTimelineProps } from './RecordActivityTimeline';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RecordChatterPanelProps {
   /** Chatter panel configuration from RecordChatterComponentProps */
@@ -73,6 +74,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
   const collapsible = config?.collapsible ?? true;
   const defaultCollapsed = (collapseWhenEmpty && items.length === 0) || (config?.defaultCollapsed ?? false);
 
+  const { t } = useDetailTranslation();
   const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
 
   const isSidebar = position === 'right' || position === 'left';
@@ -115,7 +117,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
         <div className="flex items-center justify-between px-4 py-3 border-b">
           <div className="flex items-center gap-2">
             <MessageSquare className="h-4 w-4" />
-            <span className="text-sm font-medium">Discussion</span>
+            <span className="text-sm font-medium">{t('detail.discussion')}</span>
           </div>
           {collapsible && (
             <Button
@@ -164,15 +166,15 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
           aria-label="Show discussion"
         >
           <MessageSquare className="h-4 w-4" />
-          <span>Show Discussion ({items.length})</span>
+          <span>{t('detail.showDiscussion', { count: items.length })}</span>
         </Button>
       ) : (
         <div>
           {collapsible && (
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2 text-sm font-medium">
                 <MessageSquare className="h-4 w-4" />
-                Discussion
+                {t('detail.discussion')}
               </div>
               <Button
                 variant="ghost"
diff --git a/packages/plugin-detail/src/RecordNavigationEnhanced.tsx b/packages/plugin-detail/src/RecordNavigationEnhanced.tsx
@@ -15,6 +15,7 @@ import {
   ChevronRight,
   Search,
 } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RecordNavigationEnhancedProps {
   currentIndex: number;
@@ -33,6 +34,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
   onSearch,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [searchQuery, setSearchQuery] = React.useState('');
   const [isSearchOpen, setIsSearchOpen] = React.useState(false);
   const searchInputRef = React.useRef<HTMLInputElement>(null);
@@ -133,7 +135,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoFirst}
         onClick={handleFirst}
-        title="First record (Home)"
+        title={t('detail.firstRecord')}
       >
         <ChevronsLeft className="h-4 w-4" />
       </Button>
@@ -145,14 +147,14 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoPrev}
         onClick={handlePrev}
-        title="Previous record (←)"
+        title={t('detail.previousRecordKey')}
       >
         <ChevronLeft className="h-4 w-4" />
       </Button>
 
       {/* Position indicator */}
       <span className="text-xs text-muted-foreground whitespace-nowrap px-1.5 tabular-nums">
-        {totalRecords > 0 ? `${currentIndex + 1} of ${totalRecords}` : 'No records'}
+        {totalRecords > 0 ? t('detail.recordOf', { current: currentIndex + 1, total: totalRecords }) : t('detail.noRecords')}
       </span>
 
       {/* Next */}
@@ -162,7 +164,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoNext}
         onClick={handleNext}
-        title="Next record (→)"
+        title={t('detail.nextRecordKey')}
       >
         <ChevronRight className="h-4 w-4" />
       </Button>
@@ -174,7 +176,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoLast}
         onClick={handleLast}
-        title="Last record (End)"
+        title={t('detail.lastRecord')}
       >
         <ChevronsRight className="h-4 w-4" />
       </Button>
@@ -187,7 +189,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
             size="icon"
             className="h-8 w-8"
             onClick={handleToggleSearch}
-            title="Search while navigating"
+            title={t('detail.searchWhileNavigating')}
           >
             <Search className="h-4 w-4" />
           </Button>
@@ -197,7 +199,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
               <Input
                 ref={searchInputRef}
                 type="text"
-                placeholder="Search records…"
+                placeholder={t('detail.searchRecords')}
                 value={searchQuery}
                 onChange={handleSearchChange}
                 className="h-8 w-48 text-sm"
diff --git a/packages/plugin-detail/src/RichTextCommentInput.tsx b/packages/plugin-detail/src/RichTextCommentInput.tsx
@@ -18,6 +18,7 @@ import {
   Edit,
   Send,
 } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface MentionSuggestion {
   id: string;
@@ -71,10 +72,11 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
   onChange,
   onSubmit,
   mentionSuggestions = [],
-  placeholder = 'Write a comment…',
+  placeholder = '',
   className,
   disabled = false,
 }) => {
+  const { t } = useDetailTranslation();
   const [isPreview, setIsPreview] = React.useState(false);
   const [showMentions, setShowMentions] = React.useState(false);
   const [mentionQuery, setMentionQuery] = React.useState('');
@@ -214,7 +216,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleBold}
           disabled={disabled || isPreview}
-          title="Bold (Ctrl+B)"
+          title={t('detail.bold')}
         >
           <Bold className="h-3.5 w-3.5" />
         </Button>
@@ -224,7 +226,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleItalic}
           disabled={disabled || isPreview}
-          title="Italic (Ctrl+I)"
+          title={t('detail.italic')}
         >
           <Italic className="h-3.5 w-3.5" />
         </Button>
@@ -234,7 +236,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleList}
           disabled={disabled || isPreview}
-          title="List"
+          title={t('detail.listFormat')}
         >
           <List className="h-3.5 w-3.5" />
         </Button>
@@ -244,7 +246,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleCode}
           disabled={disabled || isPreview}
-          title="Inline code"
+          title={t('detail.inlineCode')}
         >
           <Code className="h-3.5 w-3.5" />
         </Button>
@@ -254,7 +256,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleMentionTrigger}
           disabled={disabled || isPreview}
-          title="Mention someone"
+          title={t('detail.mentionSomeone')}
         >
           <AtSign className="h-3.5 w-3.5" />
         </Button>
@@ -266,7 +268,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           size="icon"
           className="h-7 w-7"
           onClick={() => setIsPreview(!isPreview)}
-          title={isPreview ? 'Edit' : 'Preview'}
+          title={isPreview ? t('detail.edit') : t('detail.preview')}
         >
           {isPreview ? (
             <Edit className="h-3.5 w-3.5" />
@@ -282,7 +284,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
             className="h-7 w-7"
             onClick={onSubmit}
             disabled={disabled || !value.trim()}
-            title="Submit (Ctrl+Enter)"
+            title={t('detail.submitComment')}
           >
             <Send className="h-3.5 w-3.5" />
           </Button>
@@ -301,7 +303,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
             <textarea
               ref={textareaRef}
               className="w-full min-h-[80px] px-3 py-2 text-sm bg-transparent resize-none focus:outline-none placeholder:text-muted-foreground"
-              placeholder={placeholder}
+              placeholder={placeholder || t('detail.writeComment')}
               value={value}
               onChange={handleTextChange}
               onKeyDown={handleKeyDown}
diff --git a/packages/plugin-detail/src/SubscriptionToggle.tsx b/packages/plugin-detail/src/SubscriptionToggle.tsx
@@ -10,6 +10,7 @@ import * as React from 'react';
 import { cn, Button } from '@object-ui/components';
 import { Bell, BellOff } from 'lucide-react';
 import type { RecordSubscription } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface SubscriptionToggleProps {
   /** Current subscription state */
@@ -28,6 +29,7 @@ export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
   onToggle,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [isLoading, setIsLoading] = React.useState(false);
 
   const handleToggle = React.useCallback(async () => {
@@ -48,7 +50,7 @@ export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
       onClick={handleToggle}
       disabled={isLoading || !onToggle}
       aria-label={subscription.subscribed ? 'Unsubscribe from notifications' : 'Subscribe to notifications'}
-      title={subscription.subscribed ? 'Subscribed — click to unsubscribe' : 'Subscribe to notifications'}
+      title={subscription.subscribed ? t('detail.subscribedTooltip') : t('detail.unsubscribedTooltip')}
     >
       {subscription.subscribed ? (
         <Bell className="h-4 w-4 text-primary" />
diff --git a/packages/plugin-detail/src/ThreadedReplies.tsx b/packages/plugin-detail/src/ThreadedReplies.tsx
