Enhance date and time format settings to reflect system preferences (#7274)

Closes https://github.com/twentyhq/twenty/issues/6880

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts

@@ -5,6 +5,10 @@ export const detectTimeFormat = () => {
   const isHour12 = Intl.DateTimeFormat(navigator.language, {
     hour: 'numeric',
   }).resolvedOptions().hour12;
-  if (isDefined(isHour12) && isHour12) return TimeFormat.HOUR_12;
+
+  if (isDefined(isHour12) && isHour12) {
+    return TimeFormat.HOUR_12;
+  }
+
   return TimeFormat.HOUR_24;
 };

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx

@@ -1,6 +1,7 @@
 import { formatInTimeZone } from 'date-fns-tz';
 
 import { DateFormat } from '@/localization/constants/DateFormat';
+import { detectDateFormat } from '@/localization/utils/detectDateFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
 import { Select } from '@/ui/input/components/Select';
 
@@ -15,7 +16,12 @@ export const DateTimeSettingsDateFormatSelect = ({
   timeZone,
   value,
 }: DateTimeSettingsDateFormatSelectProps) => {
-  const setTimeZone = timeZone === 'system' ? detectTimeZone() : timeZone;
+  const systemTimeZone = detectTimeZone();
+
+  const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
+
+  const systemDateFormat = detectDateFormat();
+
   return (
     <Select
       dropdownId="datetime-settings-date-format"
@@ -25,13 +31,17 @@ export const DateTimeSettingsDateFormatSelect = ({
       value={value}
       options={[
         {
-          label: `System settings`,
+          label: `System settings - ${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            systemDateFormat,
+          )}`,
           value: DateFormat.SYSTEM,
         },
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.MONTH_FIRST,
           )}`,
           value: DateFormat.MONTH_FIRST,
@@ -39,7 +49,7 @@ export const DateTimeSettingsDateFormatSelect = ({
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.DAY_FIRST,
           )}`,
           value: DateFormat.DAY_FIRST,
@@ -47,7 +57,7 @@ export const DateTimeSettingsDateFormatSelect = ({
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.YEAR_FIRST,
           )}`,
           value: DateFormat.YEAR_FIRST,

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx

@@ -1,6 +1,7 @@
 import { formatInTimeZone } from 'date-fns-tz';
 
 import { TimeFormat } from '@/localization/constants/TimeFormat';
+import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
 import { Select } from '@/ui/input/components/Select';
 
@@ -15,7 +16,12 @@ export const DateTimeSettingsTimeFormatSelect = ({
   timeZone,
   value,
 }: DateTimeSettingsTimeFormatSelectProps) => {
-  const setTimeZone = timeZone === 'system' ? detectTimeZone() : timeZone;
+  const systemTimeZone = detectTimeZone();
+
+  const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
+
+  const systemTimeFormat = detectTimeFormat();
+
   return (
     <Select
       dropdownId="datetime-settings-time-format"
@@ -25,13 +31,17 @@ export const DateTimeSettingsTimeFormatSelect = ({
       value={value}
       options={[
         {
-          label: 'System settings',
+          label: `System Settings - ${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            systemTimeFormat,
+          )}`,
           value: TimeFormat.SYSTEM,
         },
         {
           label: `24h (${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             TimeFormat.HOUR_24,
           )})`,
           value: TimeFormat.HOUR_24,
@@ -39,7 +49,7 @@ export const DateTimeSettingsTimeFormatSelect = ({
         {
           label: `12h (${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             TimeFormat.HOUR_12,
           )})`,
           value: TimeFormat.HOUR_12,

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx

@@ -12,19 +12,22 @@ export const DateTimeSettingsTimeZoneSelect = ({
   value = detectTimeZone(),
   onChange,
 }: DateTimeSettingsTimeZoneSelectProps) => {
+  const systemTimeZone = detectTimeZone();
+
+  const systemTimeZoneOption = findAvailableTimeZoneOption(systemTimeZone);
+
   return (
     <Select
       dropdownId="settings-accounts-calendar-time-zone"
       dropdownWidth={416}
       label="Time zone"
       fullWidth
-      value={
+      value={value}
-        value === 'system'
-          ? 'System settings'
-          : findAvailableTimeZoneOption(value)?.value
-      }
       options={[
-        { label: 'System settings', value: 'system' },
+        {
+          label: `System settings - ${systemTimeZoneOption.label}`,
+          value: 'system',
+        },
         ...AVAILABLE_TIMEZONE_OPTIONS,
       ]}
       onChange={onChange}