refactor(i18n): read render-path translations from useTranslate in the review animated visuals (#39696)

The codemod skipped both visuals because a timer-clearing callback
named its parameter `t`. Rename it to `timer` and convert their
copy to useTranslate.

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

config/render-path-translate-baseline.txt

@@ -204,8 +204,6 @@
 1 src/renderer/src/components/feature-tips/use-session-search-tip-setup.ts
 3 src/renderer/src/components/feature-wall/AgentCapabilitiesSetupAction.tsx
 2 src/renderer/src/components/feature-wall/FeatureWallTourSurface.tsx
-8 src/renderer/src/components/feature-wall/ReviewNotesAnimatedVisual.tsx
-17 src/renderer/src/components/feature-wall/ReviewShipAnimatedVisual.tsx
 2 src/renderer/src/components/file-actions/OpenInContextSubmenu.tsx
 5 src/renderer/src/components/floating-terminal/FloatingTerminalEmptyState.tsx
 3 src/renderer/src/components/floating-terminal/FloatingTerminalIconContextMenu.tsx

src/renderer/src/components/feature-wall/ReviewNotesAnimatedVisual.tsx

@@ -13,11 +13,12 @@ import {
 import { ReviewNotesVisualStyles } from './review-animated-visual-notes-styles'
 import { ReviewDiffRows } from './review-notes-diff-rows'
 import { resetTerminal, runTerminalPhase } from './review-notes-terminal-phase'
-import { translate } from '@/i18n/i18n'
+import { useTranslate } from '@/i18n/use-translate'
 import { forceLayoutReflow } from '@/lib/force-layout-reflow'
 
 // The animation owns timed DOM mutations to avoid React overwriting intermediate beats.
 export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JSX.Element {
+  const t = useTranslate()
   const { reducedMotion } = props
   const rootRef = useRef<HTMLDivElement | null>(null)
 
@@ -325,7 +326,7 @@ export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JS
 
     return () => {
       cancelled = true
-      timers.forEach((t) => window.clearTimeout(t))
+      timers.forEach((timer) => window.clearTimeout(timer))
     }
   }, [reducedMotion])
 
@@ -333,7 +334,7 @@ export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JS
     <div ref={rootRef} className="ravs-window" data-page="notes">
       <div className="ravs-difftoolbar">
         <span className="ravs-diff-path">
-          {translate(
+          {t(
             'auto.components.feature.wall.ReviewNotesAnimatedVisual.1eee3a397e',
             'src/server/migrate.ts (diff)'
           )}
@@ -341,10 +342,7 @@ export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JS
         <span className="ravs-ai-chip" data-ai-notes-chip>
           <button type="button" className="ravs-count-btn">
             <MessageIcon />{' '}
-            {translate(
-              'auto.components.feature.wall.ReviewNotesAnimatedVisual.5cb213f967',
-              'AI notes'
-            )}{' '}
+            {t('auto.components.feature.wall.ReviewNotesAnimatedVisual.5cb213f967', 'AI notes')}{' '}
             <span className="ravs-count-num" data-ai-count>
               0
             </span>
@@ -373,29 +371,23 @@ export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JS
         </button>
         <div className="ravs-popover" data-note-popover>
           <div className="ravs-pop-label">
-            {translate('auto.components.feature.wall.ReviewNotesAnimatedVisual.a7a89d8f94', 'Line')}{' '}
+            {t('auto.components.feature.wall.ReviewNotesAnimatedVisual.a7a89d8f94', 'Line')}{' '}
             <span data-pop-line>?</span>
           </div>
           <div className="ravs-pop-input" data-pop-input />
           <div className="ravs-pop-footer">
             <button type="button" className="ravs-pop-btn is-cancel">
-              {translate(
-                'auto.components.feature.wall.ReviewNotesAnimatedVisual.271ea0cbf3',
-                'Cancel'
-              )}
+              {t('auto.components.feature.wall.ReviewNotesAnimatedVisual.271ea0cbf3', 'Cancel')}
             </button>
             <button type="button" className="ravs-pop-btn is-add">
-              {translate(
-                'auto.components.feature.wall.ReviewNotesAnimatedVisual.ea4e45b71b',
-                'Add note'
-              )}
+              {t('auto.components.feature.wall.ReviewNotesAnimatedVisual.ea4e45b71b', 'Add note')}
               <CornerEnterIcon />
             </button>
           </div>
         </div>
         <div className="ravs-send-menu" data-send-menu>
           <div className="ravs-menu-section">
-            {translate(
+            {t(
               'auto.components.feature.wall.ReviewNotesAnimatedVisual.294aaff104',
               'Send notes to'
             )}
@@ -403,7 +395,7 @@ export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JS
           <div className="ravs-menu-row" data-send-row="claude">
             <ClaudeLogo />
             <span>
-              {translate(
+              {t(
                 'auto.components.feature.wall.ReviewNotesAnimatedVisual.09094f25e2',
                 'Claude Code'
               )}
@@ -412,10 +404,7 @@ export function ReviewNotesAnimatedVisual(props: { reducedMotion: boolean }): JS
           <div className="ravs-menu-row" data-send-row="codex">
             <CodexLogo />
             <span>
-              {translate(
-                'auto.components.feature.wall.ReviewNotesAnimatedVisual.5dbd27c4c2',
-                'Codex'
-              )}
+              {t('auto.components.feature.wall.ReviewNotesAnimatedVisual.5dbd27c4c2', 'Codex')}
             </span>
           </div>
         </div>

src/renderer/src/components/feature-wall/ReviewShipAnimatedVisual.tsx

@@ -13,10 +13,11 @@ import {
   SHIP_FILES
 } from './review-animated-visual-shared'
 import { ReviewShipVisualStyles } from './review-animated-visual-ship-styles'
-import { translate } from '@/i18n/i18n'
+import { useTranslate } from '@/i18n/use-translate'
 import { forceLayoutReflow } from '@/lib/force-layout-reflow'
 
 export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX.Element {
+  const t = useTranslate()
   const { reducedMotion } = props
   const rootRef = useRef<HTMLDivElement | null>(null)
 
@@ -236,7 +237,7 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
 
     return () => {
       cancelled = true
-      timers.forEach((t) => window.clearTimeout(t))
+      timers.forEach((timer) => window.clearTimeout(timer))
     }
   }, [reducedMotion])
 
@@ -247,7 +248,7 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
           <div className="ravs-sc-header">
             <span className="ravs-sc-ahead">
               <ArrowUpIcon />{' '}
-              {translate(
+              {t(
                 'auto.components.feature.wall.ReviewShipAnimatedVisual.cd8a3a39d7',
                 '3 commits ahead'
               )}
@@ -259,7 +260,7 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
                 type="button"
                 className="ravs-sc-sparkle"
                 data-commit-sparkle
-                aria-label={translate(
+                aria-label={t(
                   'auto.components.feature.wall.ReviewShipAnimatedVisual.d1a7f15876',
                   'Generate commit message with AI'
                 )}
@@ -267,10 +268,7 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
                 <Sparkles className="size-3.5" />
               </button>
               <span className="ravs-placeholder" data-commit-placeholder>
-                {translate(
-                  'auto.components.feature.wall.ReviewShipAnimatedVisual.7347fa5839',
-                  'Message'
-                )}
+                {t('auto.components.feature.wall.ReviewShipAnimatedVisual.7347fa5839', 'Message')}
               </span>
               <span data-commit-typed />
               <span className="ravs-caret" />
@@ -278,10 +276,7 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
             <div className="ravs-sc-split" data-sc-split>
               <span className="ravs-primary">
                 <CheckTinyIcon />{' '}
-                {translate(
-                  'auto.components.feature.wall.ReviewShipAnimatedVisual.a079083a6c',
-                  'Commit'
-                )}
+                {t('auto.components.feature.wall.ReviewShipAnimatedVisual.a079083a6c', 'Commit')}
               </span>
               <span className="ravs-chev">
                 <ChevDownIcon />
@@ -290,17 +285,11 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
           </div>
           <div className="ravs-sc-changes-header">
             <span>
-              {translate(
-                'auto.components.feature.wall.ReviewShipAnimatedVisual.e725000cd7',
-                'Changes'
-              )}{' '}
+              {t('auto.components.feature.wall.ReviewShipAnimatedVisual.e725000cd7', 'Changes')}{' '}
               <span className="ravs-sc-changes-count">{SHIP_FILES.length}</span>
             </span>
             <span className="ravs-sc-view-all">
-              {translate(
-                'auto.components.feature.wall.ReviewShipAnimatedVisual.ea0100dd15',
-                'View all'
-              )}
+              {t('auto.components.feature.wall.ReviewShipAnimatedVisual.ea0100dd15', 'View all')}
             </span>
           </div>
           <div className="ravs-sc-files">
@@ -319,7 +308,7 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
         <div className="ravs-pr-dialog">
           <div className="ravs-pr-head">
             <div className="ravs-pr-title-text">
-              {translate(
+              {t(
                 'auto.components.feature.wall.ReviewShipAnimatedVisual.c30cd930ff',
                 'Create Pull Request'
               )}
@@ -328,11 +317,11 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
               type="button"
               className="ravs-pr-gen-btn"
               data-pr-gen-btn
-              aria-label={translate(
+              aria-label={t(
                 'auto.components.feature.wall.ReviewShipAnimatedVisual.e4473d438f',
                 'Generate with AI'
               )}
-              title={translate(
+              title={t(
                 'auto.components.feature.wall.ReviewShipAnimatedVisual.e4473d438f',
                 'Generate with AI'
               )}
@@ -343,29 +332,23 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
           <div className="ravs-pr-body">
             <div className="ravs-pr-field">
               <div className="ravs-pr-field-label">
-                {translate(
+                {t(
                   'auto.components.feature.wall.ReviewShipAnimatedVisual.ce7d5d3a18',
                   'Base branch'
                 )}
               </div>
               <span className="ravs-pr-base">
                 <GitBranch className="size-3" />{' '}
-                {translate(
-                  'auto.components.feature.wall.ReviewShipAnimatedVisual.3b9b96d6a6',
-                  'main'
-                )}
+                {t('auto.components.feature.wall.ReviewShipAnimatedVisual.3b9b96d6a6', 'main')}
               </span>
             </div>
             <div className="ravs-pr-field">
               <div className="ravs-pr-field-label">
-                {translate(
-                  'auto.components.feature.wall.ReviewShipAnimatedVisual.54a093c52d',
-                  'Title'
-                )}
+                {t('auto.components.feature.wall.ReviewShipAnimatedVisual.54a093c52d', 'Title')}
               </div>
               <div className="ravs-pr-input" data-pr-title>
                 <span className="ravs-placeholder">
-                  {translate(
+                  {t(
                     'auto.components.feature.wall.ReviewShipAnimatedVisual.07da9245cc',
                     'Pull request title'
                   )}
@@ -375,14 +358,14 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
             </div>
             <div className="ravs-pr-field">
               <div className="ravs-pr-field-label">
-                {translate(
+                {t(
                   'auto.components.feature.wall.ReviewShipAnimatedVisual.3774b80eae',
                   'Description'
                 )}
               </div>
               <div className="ravs-pr-input is-body" data-pr-body>
                 <span className="ravs-placeholder">
-                  {translate(
+                  {t(
                     'auto.components.feature.wall.ReviewShipAnimatedVisual.bcd5cae3c4',
                     'Pull request description'
                   )}
@@ -392,16 +375,10 @@ export function ReviewShipAnimatedVisual(props: { reducedMotion: boolean }): JSX
             </div>
             <div className="ravs-pr-footer">
               <button type="button" className="ravs-pr-btn is-outline">
-                {translate(
-                  'auto.components.feature.wall.ReviewShipAnimatedVisual.62544e0852',
-                  'Cancel'
-                )}
+                {t('auto.components.feature.wall.ReviewShipAnimatedVisual.62544e0852', 'Cancel')}
               </button>
               <button type="button" className="ravs-pr-btn is-solid" data-pr-create-btn>
-                {translate(
-                  'auto.components.feature.wall.ReviewShipAnimatedVisual.4d99496b8c',
-                  'Create PR'
-                )}
+                {t('auto.components.feature.wall.ReviewShipAnimatedVisual.4d99496b8c', 'Create PR')}
               </button>
             </div>
           </div>