fix: Enable Lingui recommended rules and fix all translation violations (#14133)

- Enable lingui/no-single-variables-to-translate and all other
recommended Lingui rules
- Fix single variable translation patterns (t`${variable}` → variable)
- Fix expression-in-message violations by extracting variables
- Fix t-call-in-function violations by moving translations inside
functions
- Update ESLint configs to use linguiPlugin.configs['flat/recommended']
- Clean up unused imports and improve translation patterns

packages/twenty-front/src/modules/action-menu/actions/record-actions/run-workflow-actions/hooks/useRunWorkflowRecordActions.tsx

@@ -7,7 +7,6 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useActiveWorkflowVersionsWithManualTrigger } from '@/workflow/hooks/useActiveWorkflowVersionsWithManualTrigger';
 import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
-import { msg } from '@lingui/core/macro';
 
 import { type WorkflowVersion } from '@/workflow/types/Workflow';
 import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
@@ -81,8 +80,8 @@ export const useRunWorkflowRecordActions = ({
         type: ActionType.WorkflowRun,
         key: `workflow-run-${activeWorkflowVersion.id}`,
         scope: ActionScope.RecordSelection,
-        label: msg`${name}`,
-        shortLabel: msg`${name}`,
+        label: name,
+        shortLabel: name,
         position: index,
         Icon,
         isPinned: activeWorkflowVersion.trigger?.settings?.isPinned,

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowRecordAgnosticActions.tsx

@@ -4,11 +4,10 @@ import { ActionType } from '@/action-menu/actions/types/ActionType';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { useActiveWorkflowVersionsWithManualTrigger } from '@/workflow/hooks/useActiveWorkflowVersionsWithManualTrigger';
 import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
-import { msg } from '@lingui/core/macro';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 import { useContext } from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
-import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 
 export const useRunWorkflowRecordAgnosticActions = () => {
   const { getIcon } = useIcons();
@@ -41,7 +40,7 @@ export const useRunWorkflowRecordAgnosticActions = () => {
         type: ActionType.WorkflowRun,
         key: `workflow-run-${activeWorkflowVersion.id}`,
         scope: ActionScope.Global,
-        label: msg`${name}`,
+        label: name,
         position: index,
         Icon,
         shouldBeRegistered: () => true,

packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx

@@ -2,11 +2,13 @@ import { useRecoilValue } from 'recoil';
 
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { AppFullScreenErrorFallback } from '@/error-handler/components/AppFullScreenErrorFallback';
+import { useLingui } from '@lingui/react/macro';
 
 export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const { isErrored, error } = useRecoilValue(clientConfigApiStatusState);
+  const { t } = useLingui();
 
   return isErrored && error instanceof Error ? (
     <AppFullScreenErrorFallback
@@ -14,7 +16,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
       resetErrorBoundary={() => {
         window.location.reload();
       }}
-      title="Unable to Reach Back-end"
+      title={t`Unable to Reach Back-end`}
     />
   ) : (
     children

packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx

@@ -100,7 +100,7 @@ const StyledIcon = styled(IconReload)`
 
 export const AppRootErrorFallback = ({
   resetErrorBoundary,
-  title = 'Sorry, something went wrong',
+  title = t`Sorry, something went wrong`,
 }: AppRootErrorFallbackProps) => {
   return (
     <StyledContainer>
@@ -117,7 +117,7 @@ export const AppRootErrorFallback = ({
             />
           </StyledImageContainer>
           <StyledEmptyTextContainer>
-            <StyledEmptyTitle>{t`${title}`}</StyledEmptyTitle>
+            <StyledEmptyTitle>{title}</StyledEmptyTitle>
             <StyledEmptySubTitle>
               {t`Please refresh the page.`}
             </StyledEmptySubTitle>

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect.tsx

@@ -1,11 +1,11 @@
+import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { t } from '@lingui/core/macro';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { isDefined } from 'twenty-shared/utils';
 import { useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
 import { useValidateApprovedAccessDomainMutation } from '~/generated-metadata/graphql';
-import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
 
 export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
   const [validateApprovedAccessDomainMutation] =
@@ -45,11 +45,10 @@ export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
           });
         },
         onError: (error) => {
-          const message = error?.message
-            ? error.message
-            : 'Error validating approved access domain';
           enqueueErrorSnackBar({
-            message: t`${message}`,
+            message: error?.message
+              ? error.message
+              : t`Error validating approved access domain`,
             options: {
               dedupeKey: 'approved-access-domain-validation-error-dedupe-key',
             },

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

@@ -4,7 +4,6 @@ import {
   StyledSelectControlIconChevronDown,
 } from '@/ui/input/components/SelectControl';
 import { useTheme } from '@emotion/react';
-import { t } from '@lingui/core/macro';
 import pluralize from 'pluralize';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
@@ -64,7 +63,7 @@ export const MultiSelectControl = ({
       ) : null}
       {isDefined(fixedText) ? (
         <OverflowingTextWithTooltip
-          text={t`${selectedOptionsCount} ${
+          text={`${selectedOptionsCount} ${
             selectedOptionsCount <= 1 ? fixedText : pluralize(fixedText)
           }`}
         />

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx

@@ -35,7 +35,13 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
           <MenuItem
             key={theme.id}
             LeftIcon={theme.icon}
-            text={t`${theme.id}`}
+            text={
+              theme.id === 'System'
+                ? t`System`
+                : theme.id === 'Dark'
+                  ? t`Dark`
+                  : t`Light`
+            }
             onClick={() => setColorScheme(theme.id)}
             RightIcon={theme.id === colorScheme ? IconCheck : undefined}
           />