Refactor Calendar Settings into tabs (#6153)

This PR migrates Calendar Settings into Tabs: 

<img width="1512" alt="image"
src="https://github.com/twentyhq/twenty/assets/12035771/2531d0f1-ddfd-46c6-8678-bd76d78447b6">

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -1,85 +1,14 @@
-import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
-import { useRecoilValue } from 'recoil';
-import { H2Title, IconSettings } from 'twenty-ui';
+import { IconSettings } from 'twenty-ui';
 
-import { CalendarChannel } from '@/accounts/types/CalendarChannel';
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
-import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsCalendarChannelsListCard } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsListCard';
-import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
+import { SettingsAccountsCalendarChannelsContainer } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { CalendarChannelVisibility } from '~/generated/graphql';
-import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 
 export const SettingsAccountsCalendars = () => {
-  const calendarSettingsEnabled = false;
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const { records: accounts } = useFindManyRecords<ConnectedAccount>({
-    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
-    filter: {
-      accountOwnerId: {
-        eq: currentWorkspaceMember?.id,
-      },
-    },
-  });
-
-  const { records: calendarChannels } = useFindManyRecords<CalendarChannel>({
-    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
-    filter: {
-      connectedAccountId: {
-        in: accounts.map((account) => account.id),
-      },
-    },
-  });
-
-  const exampleStartDate = new Date();
-  const exampleEndDate = min([
-    addMinutes(exampleStartDate, 30),
-    endOfDay(exampleStartDate),
-  ]);
-  const exampleDayTime = startOfDay(exampleStartDate).getTime();
-  const exampleCalendarEvent: TimelineCalendarEvent = {
-    id: '',
-    participants: [
-      {
-        firstName: currentWorkspaceMember?.name.firstName || '',
-        lastName: currentWorkspaceMember?.name.lastName || '',
-        displayName: currentWorkspaceMember
-          ? [
-              currentWorkspaceMember.name.firstName,
-              currentWorkspaceMember.name.lastName,
-            ].join(' ')
-          : '',
-        avatarUrl: currentWorkspaceMember?.avatarUrl || '',
-        handle: '',
-        personId: '',
-        workspaceMemberId: currentWorkspaceMember?.id || '',
-      },
-    ],
-    endsAt: exampleEndDate.toISOString(),
-    isFullDay: false,
-    startsAt: exampleStartDate.toISOString(),
-    conferenceSolution: '',
-    conferenceLink: {
-      label: '',
-      url: '',
-    },
-    description: '',
-    isCanceled: false,
-    location: '',
-    title: 'Onboarding call',
-    visibility: CalendarChannelVisibility.ShareEverything,
-  };
-
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -93,41 +22,8 @@ export const SettingsAccountsCalendars = () => {
           ]}
         />
         <Section>
-          <H2Title
-            title="Calendar settings"
-            description="Sync your calendars and set your preferences"
-          />
-          <SettingsAccountsCalendarChannelsListCard />
+          <SettingsAccountsCalendarChannelsContainer />
         </Section>
-        {!!calendarChannels.length && calendarSettingsEnabled && (
-          <>
-            <Section>
-              <H2Title
-                title="Display"
-                description="Configure how we should display your events in your calendar"
-              />
-              <SettingsAccountsCalendarDisplaySettings />
-            </Section>
-            <Section>
-              <H2Title
-                title="Color code"
-                description="Events you participated in are displayed in red."
-              />
-              <CalendarContext.Provider
-                value={{
-                  currentCalendarEvent: exampleCalendarEvent,
-                  calendarEventsByDayTime: {
-                    [exampleDayTime]: [exampleCalendarEvent],
-                  },
-                  getNextCalendarEvent: () => undefined,
-                  updateCurrentCalendarEvent: () => {},
-                }}
-              >
-                <CalendarMonthCard dayTimes={[exampleDayTime]} />
-              </CalendarContext.Provider>
-            </Section>
-          </>
-        )}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );