fix(i18n): Add and update i18n Translation for Toolbar Tool Names (#5392)

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { CommandsManager } from '@ohif/core';
 
 import { LayoutSelector } from '@ohif/ui-next';
+import { useTranslation } from 'react-i18next';
 
 function ToolbarLayoutSelectorWithServices({
   commandsManager,
@@ -13,6 +14,7 @@ function ToolbarLayoutSelectorWithServices({
   ...props
 }) {
   const { customizationService } = servicesManager.services;
+  const { t } = useTranslation('ToolbarLayoutSelector');
 
   // Get the presets from the customization service
   const commonPresets = customizationService?.getCustomization('layoutSelector.commonPresets') || [
@@ -135,14 +137,14 @@ function ToolbarLayoutSelectorWithServices({
         onSelectionChange={handleSelectionChange}
         {...props}
       >
-        <LayoutSelector.Trigger tooltip="Change layout" />
+        <LayoutSelector.Trigger tooltip={t('Change layout')} />
         <LayoutSelector.Content>
           {/* Left side - Presets */}
           {(commonPresets.length > 0 || advancedPresets.length > 0) && (
             <div className="bg-popover flex flex-col gap-2.5 rounded-lg p-2">
               {commonPresets.length > 0 && (
                 <>
-                  <LayoutSelector.PresetSection title="Common">
+                  <LayoutSelector.PresetSection title={t('Common')}>
                     {commonPresets.map((preset, index) => (
                       <LayoutSelector.Preset
                         key={`common-preset-${index}`}
@@ -157,7 +159,7 @@ function ToolbarLayoutSelectorWithServices({
               )}
 
               {advancedPresets.length > 0 && (
-                <LayoutSelector.PresetSection title="Advanced">
+                <LayoutSelector.PresetSection title={t('Advanced')}>
                   {advancedPresets.map((preset, index) => (
                     <LayoutSelector.Preset
                       key={`advanced-preset-${index}`}
@@ -175,14 +177,15 @@ function ToolbarLayoutSelectorWithServices({
 
           {/* Right Side - Grid Layout */}
           <div className="bg-muted flex flex-col gap-2.5 border-l-2 border-solid border-black p-2">
-            <div className="text-muted-foreground text-xs">Custom</div>
+            <div className="text-muted-foreground text-xs">{t('Custom')}</div>
             <LayoutSelector.GridSelector
               rows={rows}
               columns={columns}
             />
             <LayoutSelector.HelpText>
-              Hover to select <br />
-              rows and columns <br /> Click to apply
+              {t('Hover to select')} <br />
+              {t('rows and columns')} <br />
+              {t('Click to apply')}
             </LayoutSelector.HelpText>
           </div>
         </LayoutSelector.Content>

extensions/default/src/customizations/studyBrowserCustomization.ts

@@ -1,4 +1,5 @@
 import { utils } from '@ohif/core';
+import i18n from '@ohif/i18n';
 const { formatDate } = utils;
 
 export default {
@@ -6,7 +7,7 @@ export default {
   'studyBrowser.thumbnailMenuItems': [
     {
       id: 'tagBrowser',
-      label: 'Tag Browser',
+      label: i18n.t('StudyBrowser:Tag Browser'),
       iconName: 'DicomTagBrowser',
       onClick: ({ commandsManager, displaySetInstanceUID }: withAppTypes) => {
         commandsManager.runCommand('openDICOMTagViewer', {
@@ -16,7 +17,7 @@ export default {
     },
     {
       id: 'addAsLayer',
-      label: 'Add as Layer',
+      label: i18n.t('StudyBrowser:Add as Layer'),
       iconName: 'ViewportViews',
       onClick: ({ commandsManager, displaySetInstanceUID, servicesManager }: withAppTypes) => {
         const { viewportGridService } = servicesManager.services;
@@ -37,13 +38,13 @@ export default {
   ],
   'studyBrowser.sortFunctions': [
     {
-      label: 'Series Number',
+      label: i18n.t('StudyBrowser:Series Number'),
       sortFunction: (a, b) => {
         return a?.SeriesNumber - b?.SeriesNumber;
       },
     },
     {
-      label: 'Series Date',
+      label: i18n.t('StudyBrowser:Series Date'),
       sortFunction: (a, b) => {
         const dateA = new Date(formatDate(a?.SeriesDate));
         const dateB = new Date(formatDate(b?.SeriesDate));
@@ -81,8 +82,10 @@ export default {
           } catch (error) {
             console.warn(error);
             uiNotificationService.show({
-              title: 'Thumbnail Double Click',
-              message: 'The selected display sets could not be added to the viewport.',
+              title: i18n.t('StudyBrowser:Thumbnail Double Click'),
+              message: i18n.t(
+                'StudyBrowser:The selected display sets could not be added to the viewport.'
+              ),
               type: 'error',
               duration: 3000,
             });