feat: add lingui/no-unlocalized-strings ESLint rule and fix translations (#16610)

## Summary
This PR adds the `lingui/no-unlocalized-strings` ESLint rule to detect
untranslated strings and fixes translation issues across multiple
components.

## Changes

### ESLint Configuration (`eslint.config.react.mjs`)
- Added comprehensive `ignore` patterns for non-translatable strings
(CSS values, HTML attributes, technical identifiers)
- Added `ignoreNames` for props that don't need translation (className,
data-*, aria-*, etc.)
- Added `ignoreFunctions` for console methods, URL APIs, and other
non-user-facing functions
- Disabled rule for debug files, storybook, and test files

### Components Fixed (~19 files)
- Object record components (field inputs, pickers, merge dialogs)
- Settings components (accounts, admin panel)
- Serverless function components
- Record table and title cell components

## Status
🚧 **Work in Progress** - ~124 files remaining to fix

This PR is being submitted as draft to allow progressive fixing of
remaining translation issues.

## Testing
- Run `npx eslint "src/**/*.tsx"` in `packages/twenty-front` to check
remaining issues

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx

@@ -1,5 +1,6 @@
 import { type CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Fragment } from 'react/jsx-runtime';
 import { isDefined } from 'twenty-shared/utils';
@@ -84,7 +85,7 @@ export const CommandMenuContextChip = ({
       {text?.trim?.() ? (
         <OverflowingTextWithTooltip text={text} />
       ) : !forceEmptyText ? (
-        <StyledEmptyText>Untitled</StyledEmptyText>
+        <StyledEmptyText>{t`Untitled`}</StyledEmptyText>
       ) : (
         ''
       )}

packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx

@@ -10,6 +10,7 @@ import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelect
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import { useSetRecoilState } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
@@ -93,7 +94,7 @@ export const CommandMenuList = ({
               ) : null,
             )}
             {noResults && !loading && (
-              <StyledEmpty>No results found</StyledEmpty>
+              <StyledEmpty>{t`No results found`}</StyledEmpty>
             )}
           </SelectableList>
         </StyledInnerList>

packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx

@@ -97,9 +97,9 @@ export const CommandMenuWorkflowStepInfo = ({
       ? isTrigger
         ? (stepDefinition.definition.name ??
           (stepDefinition.definition.type === 'MANUAL'
-            ? 'Launch manually'
-            : 'Trigger'))
-        : (stepDefinition.definition.name ?? 'Action')
+            ? t`Launch manually`
+            : t`Trigger`))
+        : (stepDefinition.definition.name ?? t`Action`)
       : '';
 
   const [editedTitle, setEditedTitle] = useState<string | null>(null);
@@ -135,7 +135,7 @@ export const CommandMenuWorkflowStepInfo = ({
         actionType: stepDefinition.definition.type,
       });
 
-  const headerType = isTrigger ? 'Trigger' : 'Action';
+  const headerType = isTrigger ? t`Trigger` : t`Action`;
 
   const Icon = getIcon(headerIcon ?? 'IconDefault');
 

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -104,7 +104,6 @@ const meta: Meta<typeof CommandMenu> = {
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
     ComponentWithRouterDecorator,
-    I18nFrontDecorator,
   ],
   parameters: {
     msw: graphqlMocks,

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -11,6 +11,7 @@ import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyO
 import { emitSidePanelOpenEvent } from '@/ui/layout/right-drawer/utils/emitSidePanelOpenEvent';
 import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
 import { IconDotsVertical } from 'twenty-ui/display';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
@@ -50,7 +51,7 @@ export const useCommandMenu = () => {
     closeAnyOpenDropdown();
     navigateCommandMenu({
       page: CommandMenuPages.Root,
-      pageTitle: 'Command Menu',
+      pageTitle: t`Command Menu`,
       pageIcon: IconDotsVertical,
       resetNavigationStack: true,
     });

packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts

@@ -1,6 +1,7 @@
 import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
 import { v4 } from 'uuid';
 import { IconMail } from 'twenty-ui/display';
@@ -47,7 +48,7 @@ export const useOpenEmailThreadInCommandMenu = () => {
 
         navigateCommandMenu({
           page: CommandMenuPages.ViewEmailThread,
-          pageTitle: 'Email Thread',
+          pageTitle: t`Email Thread`,
           pageIcon: IconMail,
           pageId: pageComponentInstanceId,
         });

packages/twenty-front/src/modules/command-menu/hooks/useRichTextCommandMenu.ts

@@ -1,6 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { viewableRichTextComponentState } from '@/command-menu/pages/rich-text-page/states/viewableRichTextComponentState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { IconPencil } from 'twenty-ui/display';
@@ -25,7 +26,7 @@ export const useRichTextCommandMenu = () => {
         openCommandMenu();
         navigateCommandMenu({
           page: CommandMenuPages.EditRichText,
-          pageTitle: 'Rich Text',
+          pageTitle: t`Rich Text`,
           pageIcon: IconPencil,
         });
       },

packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx

@@ -135,7 +135,7 @@ export const CommandMenuMessageThreadPage = () => {
     <StyledWrapper>
       <StyledContainer>
         {threadLoading ? (
-          <EmailLoader loadingText="Loading thread" />
+          <EmailLoader loadingText={t`Loading thread`} />
         ) : (
           <>
             <EmailThreadHeader

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx

@@ -77,7 +77,7 @@ export const CommandMenuPageLayoutIframeSettings = () => {
       <StyledContainer>
         <FormTextFieldInput
           label={t`URL to Embed`}
-          placeholder="https://example.com/embed"
+          placeholder={t`https://example.com/embed`}
           defaultValue={url}
           onChange={handleUrlChange}
           error={urlError}

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx

@@ -64,7 +64,7 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
 
   const handleNavigateToIframeSettings = () => {
     if (!isDefined(pageLayoutEditingWidgetId)) {
-      const newWidget = createPageLayoutIframeWidget('Untitled iFrame', null);
+      const newWidget = createPageLayoutIframeWidget(t`Untitled iFrame`, null);
 
       setPageLayoutEditingWidgetId(newWidget.id);
     }

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx

@@ -1,6 +1,7 @@
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import { type ThemeColor } from 'twenty-ui/theme';
@@ -57,7 +58,7 @@ export const ChartColorPaletteOption = ({
       }}
     >
       <MenuItemSelect
-        text={'Palette'}
+        text={t`Palette`}
         selected={false}
         focused={selectedItemId === 'auto' || currentColor === 'auto'}
         contextualText={colorSamples}

packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx

@@ -24,6 +24,7 @@ import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/uti
 import { WorkflowIteratorSubStepSwitcher } from '@/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher';
 import styled from '@emotion/styled';
 import { isNull } from '@sniptt/guards';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui/display';
 
@@ -96,18 +97,18 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
   const tabs: SingleTabProps<TabId>[] = [
     {
       id: WorkflowRunTabId.OUTPUT,
-      title: 'Output',
+      title: t`Output`,
       Icon: IconLogout,
       disabled: isOutputTabDisabled,
     },
     {
       id: WorkflowRunTabId.NODE,
-      title: 'Node',
+      title: t`Node`,
       Icon: IconStepInto,
     },
     {
       id: WorkflowRunTabId.INPUT,
-      title: 'Input',
+      title: t`Input`,
       Icon: IconLogin2,
       disabled: isInputTabDisabled,
     },

packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx

@@ -15,6 +15,7 @@ import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Other
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
 import { useTheme } from '@emotion/react';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
 import { useIcons } from 'twenty-ui/display';
@@ -76,7 +77,7 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
   return (
     <RightDrawerStepListContainer>
       <RightDrawerWorkflowSelectStepTitle>
-        Data
+        {t`Data`}
       </RightDrawerWorkflowSelectStepTitle>
       {DATABASE_TRIGGER_TYPES.map((action) => {
         const Icon = getIcon(action.icon);
@@ -92,7 +93,7 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
       })}
 
       <RightDrawerWorkflowSelectStepTitle>
-        Others
+        {t`Others`}
       </RightDrawerWorkflowSelectStepTitle>
       {OTHER_TRIGGER_TYPES.map((action) => {
         const Icon = getIcon(action.icon);