Redesign Timeline (#1772)

* Timeline redesign for desktop and mobile
* Fixed nowrap on desktop

---------

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

front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer';
-import { IconCircleDot } from '@/ui/display/icon';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
-import { TimelineActivity } from './TimelineActivity';
+import { groupActivitiesByMonth } from '../utils/groupActivitiesByMonth';
+
+import { TimelineActivityGroup } from './TimelingeActivityGroup';
 
 const StyledTimelineContainer = styled.div`
   align-items: center;
@@ -18,15 +17,8 @@ const StyledTimelineContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: flex-start;
 
-  padding: ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(4)};
-`;
-
-const StyledStartIcon = styled.div`
-  align-self: flex-start;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  height: 20px;
-  width: 20px;
+  padding: ${({ theme }) => theme.spacing(4)};
+  width: calc(100% - ${({ theme }) => theme.spacing(8)});
 `;
 
 const StyledScrollWrapper = styled(ScrollWrapper)``;
@@ -38,16 +30,26 @@ export type TimelineItemsContainerProps = {
 export const TimelineItemsContainer = ({
   activities,
 }: TimelineItemsContainerProps) => {
-  const theme = useTheme();
+  const groupedActivities = groupActivitiesByMonth(activities);
+
   return (
     <StyledScrollWrapper>
       <StyledTimelineContainer>
-        {activities.map((activity) => (
-          <TimelineActivity key={activity.id} activity={activity} />
+        {groupedActivities.map((group, index) => (
+          <TimelineActivityGroup
+            key={group.year.toString() + group.month}
+            group={group}
+            month={new Date(group.items[0].createdAt).toLocaleString(
+              'default',
+              { month: 'long' },
+            )}
+            year={
+              index === 0 || group.year !== groupedActivities[index - 1].year
+                ? group.year
+                : undefined
+            }
+          />
         ))}
-        <StyledStartIcon>
-          <IconCircleDot size={theme.icon.size.lg} />
-        </StyledStartIcon>
       </StyledTimelineContainer>
     </StyledScrollWrapper>
   );