Fix calendar events & messages fetching + fix timeline design (#11840)

Preview : 

<img width="501" alt="Screenshot 2025-05-02 at 16 24 34"
src="https://github.com/user-attachments/assets/0c649df1-0e26-4ddc-8e13-ebd78af7ec09"
/>


Done : 
- Fix getCalendarEventsFromPersonIds and getCalendarEventsFromCompanyId
(include accountOwner check)
- Fix permission check on pre-hook - Pre-hook seems useless, calendar
events are always on METADATA or SHARE_EVERYTHING visibility, else post
hook always has the responsibility of returning the data user can
access. >> To delete or to keep in case other visibility options are
added ?
- Add post hook to secure finOne / findMany calendarEvents resolver
- Update design

To do :
- same on messages (PR to arrive)

closes : https://github.com/twentyhq/twenty/issues/9826

packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx

@@ -1,19 +1,22 @@
 import styled from '@emotion/styled';
 import { isUndefined } from '@sniptt/guards';
 
+import { CalendarEventNotSharedContent } from '@/activities/calendar/components/CalendarEventNotSharedContent';
+import { CalendarEventParticipantsAvatarGroup } from '@/activities/calendar/components/CalendarEventParticipantsAvatarGroup';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { UserContext } from '@/users/contexts/UserContext';
 import { useContext } from 'react';
+import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/constants';
+import { isDefined } from 'twenty-shared/utils';
 import {
   formatToHumanReadableDay,
   formatToHumanReadableMonth,
   formatToHumanReadableTime,
 } from '~/utils/format/formatDate';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-import { isDefined } from 'twenty-shared/utils';
 
 const StyledEventCardCalendarEventContainer = styled.div`
   cursor: pointer;
@@ -29,12 +32,14 @@ const StyledCalendarEventContent = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
   justify-content: center;
   overflow: hidden;
+  width: 100%;
 `;
 
 const StyledCalendarEventTop = styled.div`
   align-items: center;
-  align-self: stretch;
   display: flex;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing(2)};
   justify-content: space-between;
 `;
 
@@ -100,6 +105,12 @@ export const EventCardCalendarEvent = ({
       title: true,
       startsAt: true,
       endsAt: true,
+      calendarEventParticipants: {
+        person: true,
+        workspaceMember: true,
+        handle: true,
+        displayName: true,
+      },
     },
     onCompleted: (data) => {
       upsertRecords([data]);
@@ -114,7 +125,7 @@ export const EventCardCalendarEvent = ({
     );
 
     if (shouldHideMessageContent) {
-      return <div>Calendar event not shared</div>;
+      return <CalendarEventNotSharedContent />;
     }
 
     const shouldHandleNotFound = error.graphQLErrors.some(
@@ -160,10 +171,21 @@ export const EventCardCalendarEvent = ({
       </StyledCalendarEventDateCard>
       <StyledCalendarEventContent>
         <StyledCalendarEventTop>
-          <StyledCalendarEventTitle>
-            {calendarEvent.title}
-          </StyledCalendarEventTitle>
+          {calendarEvent.title ===
+          FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED ? (
+            <CalendarEventNotSharedContent />
+          ) : (
+            <StyledCalendarEventTitle>
+              {calendarEvent.title}
+            </StyledCalendarEventTitle>
+          )}
+          {!!calendarEvent.calendarEventParticipants?.length && (
+            <CalendarEventParticipantsAvatarGroup
+              participants={calendarEvent.calendarEventParticipants}
+            />
+          )}
         </StyledCalendarEventTop>
+
         <StyledCalendarEventBody>
           {startsAtHour} {endsAtHour && <>→ {endsAtHour}</>}
         </StyledCalendarEventBody>