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>
           )
         );
       })}

packages/twenty-front/src/modules/ui/display/typography/components/H3Title.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type H3TitleProps = {
+  title: ReactNode;
+  className?: string;
+};
+
+const StyledH3Title = styled.h3`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const H3Title = ({ title, className }: H3TitleProps) => {
+  return <StyledH3Title className={className}>{title}</StyledH3Title>;
+};

packages/twenty-front/src/modules/ui/display/typography/components/__stories__/H3Title.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { H3Title } from '../H3Title';
+
+const meta: Meta<typeof H3Title> = {
+  title: 'UI/Display/Typography/Title/H3Title',
+  component: H3Title,
+  decorators: [ComponentDecorator],
+  args: {
+    title: 'H3 title',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H3Title>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};