feat: add creation date to notes panel (#5432)

## Description

Adds a view for creation date and author to notes and tasks panel. Here
is a preview of the new `ActivityCreationDate` component:


![image](https://github.com/twentyhq/twenty/assets/36916632/8adfa584-5f0c-464a-9d69-753f89c19c28)

Closes #5424

### Type of change

<!-- Please delete options that are not relevant. -->

- [x] New feature (non-breaking change which adds functionality)

## Checklist

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { Activity } from '@/activities/types/Activity';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+
+const StyledCreationDisplay = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  user-select: none;
+  width: 100%;
+`;
+
+type ActivityCreationDateProps = {
+  activityId: string;
+};
+
+export const ActivityCreationDate = ({
+  activityId,
+}: ActivityCreationDateProps) => {
+  const [activityInStore] = useRecoilState(recordStoreFamilyState(activityId));
+  const activity = activityInStore as Activity;
+
+  const beautifiedDate = activity.createdAt
+    ? beautifyPastDateRelativeToNow(activity.createdAt)
+    : null;
+
+  const authorName = activity.author?.name
+    ? `${activity.author.name.firstName} ${activity.author.name.lastName}`
+    : null;
+
+  if (!activity.createdAt || !authorName) {
+    return <></>;
+  }
+
+  return (
+    <StyledCreationDisplay>
+      Created {beautifiedDate} by {authorName}
+    </StyledCreationDisplay>
+  );
+};

packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
 import { ActivityBodyEffect } from '@/activities/components/ActivityBodyEffect';
 import { ActivityComments } from '@/activities/components/ActivityComments';
+import { ActivityCreationDate } from '@/activities/components/ActivityCreationDate';
 import { ActivityEditorFields } from '@/activities/components/ActivityEditorFields';
 import { ActivityTitleEffect } from '@/activities/components/ActivityTitleEffect';
 import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
@@ -31,6 +32,13 @@ const StyledUpperPartContainer = styled.div`
   justify-content: flex-start;
 `;
 
+const StyledTitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+
 const StyledTopContainer = styled.div`
   align-items: flex-start;
   align-self: stretch;
@@ -62,7 +70,10 @@ export const ActivityEditor = ({
         <StyledTopContainer>
           <ActivityTypeDropdown activityId={activityId} />
           <ActivityTitleEffect activityId={activityId} />
-          <ActivityTitle activityId={activityId} />
+          <StyledTitleContainer>
+            <ActivityTitle activityId={activityId} />
+            <ActivityCreationDate activityId={activityId} />
+          </StyledTitleContainer>
           <ActivityEditorFields activityId={activityId} />
         </StyledTopContainer>
       </StyledUpperPartContainer>

packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx

@@ -21,7 +21,7 @@ type RightDrawerActivityProps = {
 
 export const RightDrawerActivity = ({
   activityId,
-  showComment = true,
+  showComment = false,
   fillTitleFromBody = false,
 }: RightDrawerActivityProps) => {
   return (

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -1,6 +1,6 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCheckbox, IconInbox, IconSearch, IconSettings } from 'twenty-ui';
+import { IconCheckbox, IconSearch, IconSettings } from 'twenty-ui';
 
 import { CurrentUserDueTaskCountEffect } from '@/activities/tasks/components/CurrentUserDueTaskCountEffect';
 import { currentUserDueTaskCountState } from '@/activities/tasks/states/currentUserTaskCountState';
@@ -36,12 +36,6 @@ export const MainNavigationDrawerItems = () => {
             onClick={toggleCommandMenu}
             keyboard={['⌘', 'K']}
           />
-          <NavigationDrawerItem
-            label="Inbox"
-            to="/inbox"
-            Icon={IconInbox}
-            soon
-          />
           <NavigationDrawerItem
             label="Settings"
             onClick={() => {

packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx

@@ -30,6 +30,16 @@ const StyledEditor = styled.div`
     color: ${({ theme }) => theme.font.color.tertiary};
     font-style: normal !important;
   }
+  & .editor .bn-inline-content:has(> .ProseMirror-trailingBreak):before {
+    font-style: normal;
+  }
+  & .mantine-ActionIcon-icon {
+    width: 20px;
+  }
+  & .bn-container .bn-drag-handle {
+    width: 20px;
+    height: 20px;
+  }
 `;
 
 export const BlockEditor = ({