feat: add Display calendar settings (#4164)

* feat: add Color calendar setting

Closes #4067

* fix: fix wrong imports

* feat: add Display calendar settings

Closes #4068

* feat: add 12h/24h in Format option labels

* fix tests

* Fix

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx

@@ -10,9 +10,7 @@ import { SettingsAccountsListCard } from '@/settings/accounts/components/Setting
 import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-import { Section } from '@/ui/layout/section/components/Section';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 const StyledRowRightContainer = styled.div`
@@ -21,7 +19,7 @@ const StyledRowRightContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsAccountsCalendarSettingsSection = () => {
+export const SettingsAccountsCalendarAccountsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
@@ -35,25 +33,19 @@ export const SettingsAccountsCalendarSettingsSection = () => {
   });
 
   return (
-    <Section>
-      <H2Title
-        title="Calendar settings"
-        description="Sync your calendars and set your preferences"
-      />
-      <SettingsAccountsListCard
-        accounts={mockedConnectedAccounts}
-        isLoading={loading}
-        onRowClick={(account) =>
-          navigate(`/settings/accounts/calendars/${account.id}`)
-        }
-        RowIcon={IconGoogleCalendar}
-        RowRightComponent={({ account: _account }) => (
-          <StyledRowRightContainer>
-            <SettingsAccountsSynchronizationStatus synced />
-            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
-          </StyledRowRightContainer>
-        )}
-      />
-    </Section>
+    <SettingsAccountsListCard
+      accounts={mockedConnectedAccounts}
+      isLoading={loading}
+      onRowClick={(account) =>
+        navigate(`/settings/accounts/calendars/${account.id}`)
+      }
+      RowIcon={IconGoogleCalendar}
+      RowRightComponent={({ account: _account }) => (
+        <StyledRowRightContainer>
+          <SettingsAccountsSynchronizationStatus synced />
+          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+        </StyledRowRightContainer>
+      )}
+    />
   );
 };

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { formatInTimeZone } from 'date-fns-tz';
+
+import { SettingsAccountsCalendarTimeZoneSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect';
+import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
+import { Select } from '@/ui/input/components/Select';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsAccountsCalendarDisplaySettings = () => {
+  // TODO: use the user's saved time zone. If undefined, default it with the user's detected time zone.
+  const [timeZone, setTimeZone] = useState(detectTimeZone());
+
+  // TODO: use the user's saved time format.
+  const [timeFormat, setTimeFormat] = useState<12 | 24>(24);
+
+  return (
+    <StyledContainer>
+      <SettingsAccountsCalendarTimeZoneSelect
+        value={timeZone}
+        onChange={setTimeZone}
+      />
+      <Select
+        dropdownId="settings-accounts-calendar-time-format"
+        label="Format"
+        fullWidth
+        value={timeFormat}
+        options={[
+          {
+            label: `24h (${formatInTimeZone(Date.now(), timeZone, 'HH:mm')})`,
+            value: 24,
+          },
+          {
+            label: `12h (${formatInTimeZone(Date.now(), timeZone, 'h:mm aa')})`,
+            value: 12,
+          },
+        ]}
+        onChange={setTimeFormat}
+      />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx

@@ -0,0 +1,25 @@
+import { availableTimeZoneOptions } from '@/settings/accounts/constants/timeZoneSelectOptions';
+import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
+import { findAvailableTimeZoneOption } from '@/settings/accounts/utils/findAvailableTimeZoneOption';
+import { Select } from '@/ui/input/components/Select';
+
+type SettingsAccountsCalendarTimeZoneSelectProps = {
+  value?: string;
+  onChange: (nextValue: string) => void;
+};
+
+export const SettingsAccountsCalendarTimeZoneSelect = ({
+  value = detectTimeZone(),
+  onChange,
+}: SettingsAccountsCalendarTimeZoneSelectProps) => (
+  <Select
+    dropdownId="settings-accounts-calendar-time-zone"
+    dropdownWidth={416}
+    label="Time zone"
+    fullWidth
+    value={findAvailableTimeZoneOption(value)?.value}
+    options={availableTimeZoneOptions}
+    onChange={onChange}
+    withSearchInput
+  />
+);

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx

@@ -12,8 +12,6 @@ import { SettingsAccountsListCard } from '@/settings/accounts/components/Setting
 import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGmail } from '@/ui/display/icon/components/IconGmail';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Section } from '@/ui/layout/section/components/Section';
 
 const StyledRowRightContainer = styled.div`
   align-items: center;
@@ -21,7 +19,7 @@ const StyledRowRightContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsAccountsEmailsSyncSection = () => {
+export const SettingsAccountsEmailsAccountsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
@@ -53,27 +51,21 @@ export const SettingsAccountsEmailsSyncSection = () => {
   );
 
   return (
-    <Section>
-      <H2Title
-        title="Emails sync"
-        description="Sync your inboxes and set your privacy settings"
-      />
-      <SettingsAccountsListCard
-        accounts={messageChannelsWithSyncedEmails}
-        isLoading={accountsLoading || messageChannelsLoading}
-        onRowClick={(messageChannel) =>
-          navigate(`/settings/accounts/emails/${messageChannel.id}`)
-        }
-        RowIcon={IconGmail}
-        RowRightComponent={({ account: messageChannel }) => (
-          <StyledRowRightContainer>
-            <SettingsAccountsSynchronizationStatus
-              synced={messageChannel.isSynced}
-            />
-            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
-          </StyledRowRightContainer>
-        )}
-      />
-    </Section>
+    <SettingsAccountsListCard
+      accounts={messageChannelsWithSyncedEmails}
+      isLoading={accountsLoading || messageChannelsLoading}
+      onRowClick={(messageChannel) =>
+        navigate(`/settings/accounts/emails/${messageChannel.id}`)
+      }
+      RowIcon={IconGmail}
+      RowRightComponent={({ account: messageChannel }) => (
+        <StyledRowRightContainer>
+          <SettingsAccountsSynchronizationStatus
+            synced={messageChannel.isSynced}
+          />
+          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+        </StyledRowRightContainer>
+      )}
+    />
   );
 };