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/ui/input/components/IconPicker.tsx

@@ -251,6 +251,10 @@ export const IconPicker = ({
     iconPickerVisibleCount !== undefined &&
     iconPickerVisibleCount < totalMatchingIconsCount;
 
+  const iconAriaLabel = selectedIconKey
+    ? t`(selected: ${selectedIconKey})`
+    : t`(no icon selected)`;
+
   return (
     <div className={className}>
       <Dropdown
@@ -259,11 +263,7 @@ export const IconPicker = ({
         clickableComponent={
           clickableComponent || (
             <IconButton
-              ariaLabel={`Click to select icon ${
-                selectedIconKey
-                  ? `(selected: ${selectedIconKey})`
-                  : `(no icon selected)`
-              }`}
+              ariaLabel={t`Click to select icon ${iconAriaLabel}`}
               disabled={disabled}
               Icon={icon}
               variant={variant}

packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx

@@ -10,6 +10,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { type TagColor } from 'twenty-ui/components';
 import { type SelectOption } from 'twenty-ui/input';
@@ -114,16 +115,16 @@ export const SelectInput = ({
       <DropdownMenuItemsContainer hasMaxHeight>
         {onClear && clearLabel && (
           <SelectableListItem
-            itemId={`No ${clearLabel}`}
+            itemId={t`No ${clearLabel}`}
             onEnter={handleClearOption}
           >
             <MenuItemSelectTag
-              key={`No ${clearLabel}`}
-              text={`No ${clearLabel}`}
+              key={t`No ${clearLabel}`}
+              text={t`No ${clearLabel}`}
               color="transparent"
               variant="outline"
               onClick={handleClearOption}
-              isKeySelected={selectedItemId === `No ${clearLabel}`}
+              isKeySelected={selectedItemId === t`No ${clearLabel}`}
             />
           </SelectableListItem>
         )}

packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx

@@ -2,6 +2,7 @@ import { useArgs } from '@storybook/preview-api';
 import { type Meta, type StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { sleep } from '~/utils/sleep';
 
@@ -27,7 +28,7 @@ const Render = (args: RenderProps) => {
 const meta: Meta<typeof IconPicker> = {
   title: 'UI/Input/IconPicker/IconPicker',
   component: IconPicker,
-  decorators: [IconsProviderDecorator, ComponentDecorator],
+  decorators: [I18nFrontDecorator, IconsProviderDecorator, ComponentDecorator],
   render: Render,
 };
 

packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx

@@ -1,3 +1,4 @@
+import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
@@ -27,7 +28,7 @@ export const CountrySelect = ({
       }),
     );
     countryList.unshift({
-      label: 'No country',
+      label: t`No country`,
       value: '',
       Icon: IconCircleOff,
     });

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx

@@ -1,3 +1,4 @@
+import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
 
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -41,7 +42,7 @@ export const CurrencyPickerDropdownSelect = ({
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer hasMaxHeight>
         {filteredCurrencies.length === 0 ? (
-          <MenuItem text="No results" />
+          <MenuItem text={t`No results`} />
         ) : (
           <>
             {selectedCurrency && (

packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx

@@ -4,6 +4,7 @@ import { RELATIVE_DATE_DIRECTION_SELECT_OPTIONS } from '@/ui/input/components/in
 import { RELATIVE_DATETIME_UNITS_SELECT_OPTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateTimeUnitSelectOptions';
 import { RELATIVE_DATE_UNITS_SELECT_OPTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateUnitSelectOptions';
 
+import { t } from '@lingui/core/macro';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { type Nullable } from 'twenty-shared/types';
@@ -48,7 +49,7 @@ export const RelativeDatePickerHeader = ({
   const amountString = amount?.toString() ?? '';
 
   const amountTextValue = direction === 'THIS' ? '' : amountString;
-  const amountInputPlaceholder = direction === 'THIS' ? '-' : 'Number';
+  const amountInputPlaceholder = direction === 'THIS' ? '-' : t`Number`;
 
   const [draftAmountValue, setDraftAmountValue] = useState(amountTextValue);
 

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx

@@ -1,3 +1,4 @@
+import { t } from '@lingui/core/macro';
 import styled from '@emotion/styled';
 import { useMemo, useState } from 'react';
 
@@ -56,7 +57,7 @@ export const PhoneCountryPickerDropdownSelect = ({
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer hasMaxHeight>
         {filteredCountries?.length === 0 ? (
-          <MenuItem text="No results" />
+          <MenuItem text={t`No results`} />
         ) : (
           <>
             {selectedCountry && (