Fix timezone display + translate dates (#12147)

Fixes https://github.com/twentyhq/twenty/issues/11566 + translates dates

- Date display bug: We had an issue with date (not date time) display
depending on the timezone the user had selected. The date is stored in
the db as yyyy-mm-dd, eg. 2025-05-01 for **May 1st, 2025**. When
returned this date is formatted in a UTC DateTime at midnight, so
2025-05-1 00:00:00. Then when displaying the date we were converting
this date using the timeZone, so 2025-04-30 17:00:00, thus displaying
**April 30th, 2025**. The fix chosen is that we should not take into
account the timezone for date (not date time!) displays as we always
want to show the same date.
- Date translation: dates were not translated, not in their default
display (_May 1st, 2025_) nor in their relative display (_about a month
ago_). The lib we use for date formatting, date-fns, offers a
translation option with pre-built `Locale`s from their lib.
Unfortunately and surprisingly we cannot just use directly string locale
codes (like `fr-FR`), cf [open issue on
date-fns](https://github.com/date-fns/date-fns/issues/3660). A util was
introduced to offset this by dynamically importing the right date-fns
Locale based on the locale code.

packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
@@ -18,12 +18,15 @@ import { detectTimeZone } from '@/localization/utils/detectTimeZone';
 import { getDateFormatFromWorkspaceDateFormat } from '@/localization/utils/getDateFormatFromWorkspaceDateFormat';
 import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTimeFormatFromWorkspaceTimeFormat';
 import { AppPath } from '@/types/AppPath';
+import { getDateFnsLocale } from '@/ui/field/display/utils/getDateFnsLocale.util';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+import { enUS } from 'date-fns/locale';
 import { useLocation } from 'react-router-dom';
 import { APP_LOCALES, SOURCE_LOCALE } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
 import { WorkspaceMember } from '~/generated-metadata/graphql';
 import { useGetCurrentUserQuery } from '~/generated/graphql';
+import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
@@ -38,8 +41,22 @@ export const UserProviderEffect = () => {
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
   const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
   const setWorkspaces = useSetRecoilState(workspacesState);
-
   const setDateTimeFormat = useSetRecoilState(dateTimeFormatState);
+  const updateLocaleCatalog = useRecoilCallback(
+    ({ snapshot, set }) =>
+      async (newLocale: keyof typeof APP_LOCALES) => {
+        const localeValue = snapshot.getLoadable(dateLocaleState).getValue();
+        if (localeValue.locale !== newLocale) {
+          getDateFnsLocale(newLocale).then((localeCatalog) => {
+            set(dateLocaleState, {
+              locale: newLocale,
+              localeCatalog: localeCatalog || enUS,
+            });
+          });
+        }
+      },
+    [],
+  );
 
   const setCurrentWorkspaceMember = useSetRecoilState(
     currentWorkspaceMemberState,
@@ -98,9 +115,11 @@ export const UserProviderEffect = () => {
     };
 
     if (isDefined(workspaceMember)) {
-      setCurrentWorkspaceMember(
-        affectDefaultValuesOnEmptyWorkspaceMemberFields(workspaceMember),
-      );
+      const updatedWorkspaceMember =
+        affectDefaultValuesOnEmptyWorkspaceMemberFields(workspaceMember);
+      setCurrentWorkspaceMember(updatedWorkspaceMember);
+
+      updateLocaleCatalog(updatedWorkspaceMember.locale);
 
       // TODO: factorize
       setDateTimeFormat({
@@ -152,6 +171,7 @@ export const UserProviderEffect = () => {
     setIsCurrentUserLoaded,
     setDateTimeFormat,
     setCurrentWorkspaceMembersWithDeleted,
+    updateLocaleCatalog,
   ]);
 
   return <></>;