fix conflicts

packages/twenty-emails/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-emails",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "description": "",
   "author": "",
   "private": true,

packages/twenty-front/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-front",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "private": true,
   "type": "module",
   "scripts": {

packages/twenty-front/src/index.css

@@ -12,4 +12,4 @@ html {
 /* https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge */
 .grecaptcha-badge { 
   visibility: hidden !important;
-}
+}

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

@@ -256,10 +256,16 @@ export const RichTextEditor = ({
 
   const handleBodyChangeDebounced = useDebouncedCallback(handleBodyChange, 500);
 
+  // See https://github.com/twentyhq/twenty/issues/6724 for explanation
+  const setActivityBodyDebouncedToAvoidDragBug = useDebouncedCallback(
+    setActivityBody,
+    100,
+  );
+
   const handleEditorChange = () => {
     const newStringifiedBody = JSON.stringify(editor.document) ?? '';
 
-    setActivityBody(newStringifiedBody);
+    setActivityBodyDebouncedToAvoidDragBug(newStringifiedBody);
 
     handleBodyChangeDebounced(newStringifiedBody);
   };

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -91,22 +91,24 @@ export const TaskGroups = ({
     );
   }
 
+  const sortedTasksByStatus = Object.entries(
+    groupBy(tasks, ({ status }) => status),
+  ).toSorted(([statusA], [statusB]) => statusB.localeCompare(statusA));
+
   return (
     <StyledContainer>
-      {Object.entries(groupBy(tasks, ({ status }) => status)).map(
-        ([status, tasksByStatus]: [string, Task[]]) => (
-          <TaskList
-            key={status}
-            title={status}
-            tasks={tasksByStatus}
-            button={
-              showAddButton && (
-                <AddTaskButton activityTargetableObjects={targetableObjects} />
-              )
-            }
-          />
-        ),
-      )}
+      {sortedTasksByStatus.map(([status, tasksByStatus]: [string, Task[]]) => (
+        <TaskList
+          key={status}
+          title={status}
+          tasks={tasksByStatus}
+          button={
+            showAddButton && (
+              <AddTaskButton activityTargetableObjects={targetableObjects} />
+            )
+          }
+        />
+      ))}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -36,6 +36,8 @@ const StyledTaskBody = styled.div`
   max-width: 100%;
   flex: 1;
   overflow: hidden;
+
+  padding-bottom: ${({ theme }) => theme.spacing(0.25)};
 `;
 
 const StyledTaskTitle = styled.div<{
@@ -44,10 +46,13 @@ const StyledTaskTitle = styled.div<{
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   padding: 0 ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(0.25)};
   text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  align-items: center;
 `;
 
 const StyledDueDate = styled.div<{
@@ -71,8 +76,10 @@ const StyledPlaceholder = styled.div`
 `;
 
 const StyledLeftSideContainer = styled.div`
+  align-items: center;
   display: flex;
   flex: 1;
+
   overflow: hidden;
 `;
 

packages/twenty-front/src/modules/activities/timelineActivities/components/EventRow.tsx

@@ -3,7 +3,8 @@ import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { TimelineActivityContext } from '@/activities/timelineActivities/contexts/TimelineActivityContext';
-import { useLinkedObject } from '@/activities/timelineActivities/hooks/useLinkedObject';
+
+import { useLinkedObjectObjectMetadataItem } from '@/activities/timelineActivities/hooks/useLinkedObjectObjectMetadataItem';
 import { EventIconDynamicComponent } from '@/activities/timelineActivities/rows/components/EventIconDynamicComponent';
 import { EventRowDynamicComponent } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
 import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
@@ -14,6 +15,7 @@ import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 const StyledTimelineItemContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
   height: 'auto';
@@ -99,7 +101,7 @@ export const EventRow = ({
 
   const { labelIdentifierValue } = useContext(TimelineActivityContext);
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(event.createdAt);
-  const linkedObjectMetadataItem = useLinkedObject(
+  const linkedObjectMetadataItem = useLinkedObjectObjectMetadataItem(
     event.linkedObjectMetadataId,
   );
 

packages/twenty-front/src/modules/activities/timelineActivities/components/TimelineActivities.tsx

@@ -46,7 +46,7 @@ export const TimelineActivities = ({
   const isTimelineActivitiesEmpty =
     !timelineActivities || timelineActivities.length === 0;
 
-  if (loading && isTimelineActivitiesEmpty) {
+  if (loading) {
     return <SkeletonLoader withSubSections />;
   }
 

packages/twenty-front/src/modules/activities/timelineActivities/hooks/useLinkedObject.ts → packages/twenty-front/src/modules/activities/timelineActivities/hooks/useLinkedObjectObjectMetadataItem.ts

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
-export const useLinkedObject = (id: string) => {
+export const useLinkedObjectObjectMetadataItem = (id: string) => {
   const objectMetadataItems: ObjectMetadataItem[] = useRecoilValue(
     objectMetadataItemsState,
   );

packages/twenty-front/src/modules/activities/timelineActivities/hooks/useLinkedObjectsTitle.ts

@@ -0,0 +1,43 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useCombinedFindManyRecords } from '@/object-record/multiple-objects/hooks/useCombinedFindManyRecords';
+import { isNonEmptyArray } from '@sniptt/guards';
+
+export const useLinkedObjectsTitle = (linkedObjectIds: string[]) => {
+  const { loading } = useCombinedFindManyRecords({
+    skip: !isNonEmptyArray(linkedObjectIds),
+    operationSignatures: [
+      {
+        objectNameSingular: CoreObjectNameSingular.Task,
+        variables: {
+          filter: {
+            id: {
+              in: linkedObjectIds ?? [],
+            },
+          },
+        },
+        fields: {
+          id: true,
+          title: true,
+        },
+      },
+      {
+        objectNameSingular: CoreObjectNameSingular.Note,
+        variables: {
+          filter: {
+            id: {
+              in: linkedObjectIds ?? [],
+            },
+          },
+        },
+        fields: {
+          id: true,
+          title: true,
+        },
+      },
+    ],
+  });
+
+  return {
+    loading,
+  };
+};

packages/twenty-front/src/modules/activities/timelineActivities/hooks/useTimelineActivities.tsx → packages/twenty-front/src/modules/activities/timelineActivities/hooks/useTimelineActivities.ts

@@ -1,3 +1,4 @@
+import { useLinkedObjectsTitle } from '@/activities/timelineActivities/hooks/useLinkedObjectsTitle';
 import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getActivityTargetObjectFieldIdName';
@@ -19,10 +20,10 @@ export const useTimelineActivities = (
   });
 
   const {
-    records: TimelineActivities,
-    loading,
+    records: timelineActivities,
+    loading: loadingTimelineActivities,
     fetchMoreRecords,
-  } = useFindManyRecords({
+  } = useFindManyRecords<TimelineActivity>({
     objectNameSingular: CoreObjectNameSingular.TimelineActivity,
     filter: {
       [targetableObjectFieldIdName]: {
@@ -38,8 +39,17 @@ export const useTimelineActivities = (
     fetchPolicy: 'cache-and-network',
   });
 
+  const activityIds = timelineActivities
+    .filter((timelineActivity) => timelineActivity.name.match(/note|task/i))
+    .map((timelineActivity) => timelineActivity.linkedRecordId);
+
+  const { loading: loadingLinkedObjectsTitle } =
+    useLinkedObjectsTitle(activityIds);
+
+  const loading = loadingTimelineActivities || loadingLinkedObjectsTitle;
+
   return {
-    timelineActivities: TimelineActivities as TimelineActivity[],
+    timelineActivities,
     loading,
     fetchMoreRecords,
   };

packages/twenty-front/src/modules/activities/timelineActivities/rows/activity/components/EventRowActivity.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import {
@@ -8,15 +7,21 @@ import {
   StyledEventRowItemColumn,
 } from '@/activities/timelineActivities/rows/components/EventRowDynamicComponent';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
+import { isNonEmptyString } from '@sniptt/guards';
 
 type EventRowActivityProps = EventRowDynamicComponentProps;
 
 const StyledLinkedActivity = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
   cursor: pointer;
   text-decoration: underline;
 `;
 
+export const StyledEventRowItemText = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
 export const EventRowActivity = ({
   event,
   authorFullName,
@@ -30,9 +35,21 @@ export const EventRowActivity = ({
     throw new Error('Could not find linked record id for event');
   }
 
-  const [activityInStore] = useRecoilState(
-    recordStoreFamilyState(event.linkedRecordId),
-  );
+  const getActivityFromCache = useGetRecordFromCache({
+    objectNameSingular,
+    recordGqlFields: {
+      id: true,
+      title: true,
+    },
+  });
+
+  const activityInStore = getActivityFromCache(event.linkedRecordId);
+
+  const activityTitle = isNonEmptyString(activityInStore?.title)
+    ? activityInStore?.title
+    : isNonEmptyString(event.linkedRecordCachedName)
+      ? event.linkedRecordCachedName
+      : 'Untitled';
 
   const openActivityRightDrawer = useOpenActivityRightDrawer({
     objectNameSingular,
@@ -44,15 +61,11 @@ export const EventRowActivity = ({
       <StyledEventRowItemAction>
         {`${eventAction} a related ${eventObject}`}
       </StyledEventRowItemAction>
-      {activityInStore ? (
-        <StyledLinkedActivity
-          onClick={() => openActivityRightDrawer(event.linkedRecordId)}
-        >
-          {event.linkedRecordCachedName}
-        </StyledLinkedActivity>
-      ) : (
-        <span>{event.linkedRecordCachedName}</span>
-      )}
+      <StyledLinkedActivity
+        onClick={() => openActivityRightDrawer(event.linkedRecordId)}
+      >
+        {activityTitle}
+      </StyledLinkedActivity>
     </>
   );
 };

packages/twenty-front/src/modules/activities/timelineActivities/types/TimelineActivityLinkedObject.ts

@@ -0,0 +1 @@
+export type TimelineActivityLinkedObject = 'note' | 'task';

packages/twenty-front/src/modules/activities/timelineActivities/utils/filterTimelineActivityByLinkedObjectTypes.ts

@@ -0,0 +1,12 @@
+import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
+import { TimelineActivityLinkedObject } from '@/activities/timelineActivities/types/TimelineActivityLinkedObject';
+
+export const filterTimelineActivityByLinkedObjectTypes =
+  (linkedObjectTypes: TimelineActivityLinkedObject[]) =>
+  (timelineActivity: TimelineActivity) => {
+    return linkedObjectTypes.some((linkedObjectType) => {
+      const linkedObjectPartInName = timelineActivity.name.split('.')[0];
+
+      return linkedObjectPartInName.includes(linkedObjectType);
+    });
+  };

packages/twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedFindManyRecords.ts

@@ -11,13 +11,13 @@ export const useCombinedFindManyRecords = ({
   skip = false,
 }: {
   operationSignatures: RecordGqlOperationSignature[];
-  skip: boolean;
+  skip?: boolean;
 }) => {
   const findManyQuery = useGenerateCombinedFindManyRecordsQuery({
     operationSignatures,
   });
 
-  const { data } = useQuery<MultiObjectRecordQueryResult>(
+  const { data, loading } = useQuery<MultiObjectRecordQueryResult>(
     findManyQuery ?? EMPTY_QUERY,
     {
       skip,
@@ -35,5 +35,6 @@ export const useCombinedFindManyRecords = ({
 
   return {
     result: resultWithoutConnection,
+    loading,
   };
 };