refactor(i18n): finish EditorFileTab and the checks tab actions on useTranslate (#39726)

ChecksTabActions is called as a plain function, so it now takes the
checks tab's `t` instead of reading translate(). EditorFileTab would go
over budget once converted, so its mode icon choice moves to its own
module first.

Co-authored-by: OrcaWin <293788423+OrcaWin@users.noreply.github.com>

config/render-path-translate-baseline.txt

@@ -161,7 +161,6 @@
 8 src/renderer/src/components/floating-terminal/FloatingTerminalOrchestrationDialog.tsx
 4 src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx
 8 src/renderer/src/components/floating-terminal/FloatingTerminalWindowControls.tsx
-8 src/renderer/src/components/github-item-dialog/inspect-pull-request/checks-tab-header.tsx
 13 src/renderer/src/components/github/CommentCodeContext.tsx
 3 src/renderer/src/components/github/CommentReactions.tsx
 1 src/renderer/src/components/github/GitHubMarkdownComposer.tsx
@@ -361,7 +360,6 @@
 20 src/renderer/src/components/stats/UsageOverviewPane.tsx
 3 src/renderer/src/components/stats/share-card-utils.tsx
 23 src/renderer/src/components/stats/usage-overview-sections.tsx
-2 src/renderer/src/components/tab-bar/EditorFileTab.tsx
 1 src/renderer/src/components/tab-group/TabGroupDropOverlay.tsx
 3 src/renderer/src/components/tab-group/TabGroupPaneActionsMenu.tsx
 1 src/renderer/src/components/tab-group/TabGroupPanel.tsx

src/renderer/src/components/github-item-dialog/inspect-pull-request/checks-tab-header.tsx

@@ -9,8 +9,7 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
-import { translate } from '@/i18n/i18n'
-import { useTranslate } from '@/i18n/use-translate'
+import { useTranslate, type Translate } from '@/i18n/use-translate'
 
 export function ChecksTabActions({
   variant,
@@ -23,7 +22,8 @@ export function ChecksTabActions({
   listLength,
   onRefresh,
   onRerun,
-  onFix
+  onFix,
+  t
 }: {
   variant: 'compact' | 'page'
   canUseChecksRepoContext: boolean
@@ -36,6 +36,8 @@ export function ChecksTabActions({
   onRefresh: () => void
   onRerun: (failedOnly: boolean) => void
   onFix: () => void
+  /** The caller's render translator; this runs as a plain function, not a component. */
+  t: Translate
 }): {
   refreshAction: React.JSX.Element
   fixBrokenChecksAction: React.JSX.Element | null
@@ -53,13 +55,13 @@ export function ChecksTabActions({
           className="size-7 shrink-0"
           disabled={!canUseChecksRepoContext || refreshing}
           onClick={() => void onRefresh()}
-          aria-label={translate('auto.components.GitHubItemDialog.9a1004fc76', 'Refresh checks')}
+          aria-label={t('auto.components.GitHubItemDialog.9a1004fc76', 'Refresh checks')}
         >
           <RefreshCw className={cn('size-3.5', refreshing && 'animate-spin')} />
         </Button>
       </TooltipTrigger>
       <TooltipContent side="bottom" sideOffset={6}>
-        {translate('auto.components.GitHubItemDialog.9a1004fc76', 'Refresh checks')}
+        {t('auto.components.GitHubItemDialog.9a1004fc76', 'Refresh checks')}
       </TooltipContent>
     </Tooltip>
   )
@@ -81,12 +83,12 @@ export function ChecksTabActions({
               <Wrench className="size-3" />
             )}
             {variant === 'compact'
-              ? translate('auto.components.GitHubItemDialog.9157d48ddb', 'Fix checks')
-              : translate('auto.components.GitHubItemDialog.2511f44bb7', 'Fix broken checks')}
+              ? t('auto.components.GitHubItemDialog.9157d48ddb', 'Fix checks')
+              : t('auto.components.GitHubItemDialog.2511f44bb7', 'Fix broken checks')}
           </Button>
         </TooltipTrigger>
         <TooltipContent side="bottom" sideOffset={6}>
-          {translate(
+          {t(
             'auto.components.GitHubItemDialog.f4b1292569',
             'Start the default AI agent on these checks'
           )}
@@ -109,7 +111,7 @@ export function ChecksTabActions({
             ) : (
               <RefreshCw className="size-3" />
             )}
-            {translate('auto.components.GitHubItemDialog.1b56e28faa', 'Rerun')}
+            {t('auto.components.GitHubItemDialog.1b56e28faa', 'Rerun')}
             <ChevronDown className="size-3 opacity-60" />
           </Button>
         </DropdownMenuTrigger>
@@ -119,11 +121,11 @@ export function ChecksTabActions({
             onSelect={() => void onRerun(true)}
           >
             <RefreshCw className="size-4" />
-            {translate('checks.rerunUnsuccessful', 'Rerun unsuccessful')}
+            {t('checks.rerunUnsuccessful', 'Rerun unsuccessful')}
           </DropdownMenuItem>
           <DropdownMenuItem disabled={rerunning} onSelect={() => void onRerun(false)}>
             <RefreshCw className="size-4" />
-            {translate('auto.components.GitHubItemDialog.71c11aff84', 'Rerun all checks')}
+            {t('auto.components.GitHubItemDialog.71c11aff84', 'Rerun all checks')}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

src/renderer/src/components/github-item-dialog/inspect-pull-request/checks-tab.tsx

@@ -298,7 +298,8 @@ export function ChecksTab({
     },
     onFix: () => {
       void handleFixBrokenChecks()
-    }
+    },
+    t
   })
   const compactHeader = (
     <ChecksTabCompactHeader

src/renderer/src/components/tab-bar/EditorFileTab.tsx

@@ -3,15 +3,7 @@ import type { EditorFileTabProps } from './editor-file-tab-props'
 import { ContextMenu, ContextMenuTrigger } from '@/components/ui/context-menu'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSortable } from '@dnd-kit/sortable'
-import {
-  GitGraph,
-  GitCompareArrows,
-  Eye,
-  ShieldAlert,
-  Pin,
-  ListChecks,
-  Smartphone
-} from 'lucide-react'
+import { Eye, ShieldAlert, Pin } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { TabHoverCard } from './TabHoverCard'
 import { basename } from '@/lib/path'
@@ -39,7 +31,8 @@ import {
 } from './drop-indicator'
 import { canOpenMarkdownPreview } from '@/components/editor/view-mode/markdown-preview-controls'
 import { EditorFileTabContextMenu } from './EditorFileTabContextMenu'
-import { translate } from '@/i18n/i18n'
+import { getEditorFileTabModeIcon } from './editor-file-tab-mode-icon'
+import { useTranslate } from '@/i18n/use-translate'
 import { TAB_LABEL_WIDTH_CLASSES } from './tab-width-rules'
 import { useTabStripSlotProps } from './use-tab-strip-slot-props'
 import { EditorFileTabCloseButton } from './EditorFileTabCloseButton'
@@ -70,6 +63,7 @@ export default function EditorFileTab({
   dropIndicator,
   includeTopTabBorder = true
 }: EditorFileTabProps): React.JSX.Element {
+  const t = useTranslate()
   const placedElsewhere = useAppStore((state) =>
     file.tabId
       ? editorTabWorkspace(state.unifiedTabsByWorktree, file.tabId) !== file.worktreeId
@@ -86,26 +80,11 @@ export default function EditorFileTab({
     data: dragData
   })
 
-  const isDiff = file.mode === 'diff'
   const isConflictReview = file.mode === 'conflict-review'
-  const isCheckDetails = file.mode === 'check-details'
   const isMarkdownPreviewTab = file.mode === 'markdown-preview'
   const customEditor = useTabCustomEditor(file)
   // Why: simulator tabs reuse this chrome with a synthetic path an icon theme would map to its file icon.
-  const ModeIcon =
-    file.mode === 'git-graph'
-      ? GitGraph
-      : isConflictReview
-        ? ShieldAlert
-        : isCheckDetails
-          ? ListChecks
-          : isDiff
-            ? GitCompareArrows
-            : isMarkdownPreviewTab
-              ? Eye
-              : file.language === 'simulator'
-                ? Smartphone
-                : null
+  const ModeIcon = getEditorFileTabModeIcon(file)
   const tabIcon = (className: string): React.ReactNode => (
     <PluginContributionIcon
       url={customEditor?.iconUrl}
@@ -290,7 +269,7 @@ export default function EditorFileTab({
             ref={setRenameInputElement}
             density="compact"
             data-tab-rename-input="true"
-            aria-label={translate(
+            aria-label={t(
               'auto.components.tab.bar.EditorFileTab.3da7445c84',
               'Rename file {{value0}}',
               { value0: basename(file.filePath) }
@@ -387,7 +366,7 @@ export default function EditorFileTab({
           ) : (
             <TabHoverCard
               title={`${getEditorDisplayLabel(file)}${placedElsewhere && repo ? ` · ${repo.displayName}` : ''}`}
-              programName={customEditor?.title ?? translate('tabHoverCard.editor', 'Editor')}
+              programName={customEditor?.title ?? t('tabHoverCard.editor', 'Editor')}
               icon={tabIcon('size-4')}
               description={file.relativePath}
             >

src/renderer/src/components/tab-bar/editor-file-tab-mode-icon.ts

@@ -0,0 +1,29 @@
+import {
+  Eye,
+  GitCompareArrows,
+  GitGraph,
+  ListChecks,
+  ShieldAlert,
+  Smartphone,
+  type LucideIcon
+} from 'lucide-react'
+import type { EditorFileTabProps } from './editor-file-tab-props'
+
+// Why: simulator tabs reuse this chrome with a synthetic path an icon theme would map to its file icon.
+export function getEditorFileTabModeIcon(
+  file: Pick<EditorFileTabProps['file'], 'mode' | 'language'>
+): LucideIcon | null {
+  return file.mode === 'git-graph'
+    ? GitGraph
+    : file.mode === 'conflict-review'
+      ? ShieldAlert
+      : file.mode === 'check-details'
+        ? ListChecks
+        : file.mode === 'diff'
+          ? GitCompareArrows
+          : file.mode === 'markdown-preview'
+            ? Eye
+            : file.language === 'simulator'
+              ? Smartphone
+              : null
+}