feat: add Month headers to Show Page Calendar tab (#4326)

Closes #4288

packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx

@@ -1,8 +1,11 @@
 import styled from '@emotion/styled';
-import { startOfMonth } from 'date-fns';
+import { format, getYear, startOfMonth } from 'date-fns';
+import mapValues from 'lodash.mapvalues';
 
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { sortCalendarEventsDesc } from '@/activities/calendar/utils/sortCalendarEvents';
+import { H3Title } from '@/ui/display/typography/components/H3Title';
+import { Section } from '@/ui/layout/section/components/Section';
 import { mockedCalendarEvents } from '~/testing/mock-data/calendar';
 import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
 import { sortDesc } from '~/utils/sort';
@@ -16,6 +19,10 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
+const StyledYear = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
 export const Calendar = () => {
   const sortedCalendarEvents = [...mockedCalendarEvents].sort(
     sortCalendarEventsDesc,
@@ -27,18 +34,32 @@ export const Calendar = () => {
   const sortedMonthTimes = Object.keys(calendarEventsByMonthTime)
     .map(Number)
     .sort(sortDesc);
+  const monthTimesByYear = groupArrayItemsBy(sortedMonthTimes, getYear);
+  const lastMonthTimeByYear = mapValues(monthTimesByYear, (monthTimes = []) =>
+    Math.max(...monthTimes),
+  );
 
   return (
     <StyledContainer>
       {sortedMonthTimes.map((monthTime) => {
         const monthCalendarEvents = calendarEventsByMonthTime[monthTime];
+        const year = getYear(monthTime);
+        const isLastMonthOfYear = lastMonthTimeByYear[year] === monthTime;
+        const monthLabel = format(monthTime, 'MMMM');
 
         return (
           !!monthCalendarEvents?.length && (
-            <CalendarMonthCard
-              key={monthTime}
-              calendarEvents={monthCalendarEvents}
-            />
+            <Section key={monthTime}>
+              <H3Title
+                title={
+                  <>
+                    {monthLabel}
+                    {isLastMonthOfYear && <StyledYear> {year}</StyledYear>}
+                  </>
+                }
+              />
+              <CalendarMonthCard calendarEvents={monthCalendarEvents} />
+            </Section>
           )
         );
       })}