4900 multi select field front implement expanded cells (#5151)

Add expanded cell


https://github.com/twentyhq/twenty/assets/29927851/363f2b44-7b3c-4771-a651-dfc4014da6ac


![image](https://github.com/twentyhq/twenty/assets/29927851/741bb0f9-fd1e-4a38-8b0e-71e144376876)

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

@@ -6,9 +6,8 @@ import {
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
 
-import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
-import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
 import { Activity } from '@/activities/types/Activity';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
 import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
@@ -18,7 +17,7 @@ import { useCompleteTask } from '../hooks/useCompleteTask';
 
 const StyledContainer = styled.div`
   align-items: center;
-  align-self: stretch;
+  justify-content: space-between;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   cursor: pointer;
   display: inline-flex;
@@ -34,9 +33,6 @@ const StyledContainer = styled.div`
 const StyledTaskBody = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 1px;
 `;
 
 const StyledTaskTitle = styled.div<{
@@ -64,9 +60,10 @@ const StyledDueDate = styled.div<{
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
+  white-space: nowrap;
 `;
 
-const StyledFieldsContainer = styled.div`
+const StyledRightSideContainer = styled.div`
   display: flex;
 `;
 
@@ -74,6 +71,14 @@ const StyledPlaceholder = styled.div`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
+const StyledLeftSideContainer = styled.div`
+  display: flex;
+`;
+
+const StyledCheckboxContainer = styled.div`
+  display: flex;
+`;
+
 export const TaskRow = ({ task }: { task: Activity }) => {
   const theme = useTheme();
   const openActivityRightDrawer = useOpenActivityRightDrawer();
@@ -81,39 +86,42 @@ export const TaskRow = ({ task }: { task: Activity }) => {
   const body = getActivitySummary(task.body);
   const { completeTask } = useCompleteTask(task);
 
-  const { activityTargetObjectRecords } = useActivityTargetObjectRecords(task);
-
   return (
     <StyledContainer
       onClick={() => {
         openActivityRightDrawer(task.id);
       }}
     >
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <Checkbox
-          checked={!!task.completedAt}
-          shape={CheckboxShape.Rounded}
-          onCheckedChange={completeTask}
-        />
-      </div>
-      <StyledTaskTitle completed={task.completedAt !== null}>
-        {task.title || <StyledPlaceholder>Task title</StyledPlaceholder>}
-      </StyledTaskTitle>
-      <StyledTaskBody>
-        <OverflowingTextWithTooltip text={body} />
-        {task.comments && task.comments.length > 0 && (
-          <StyledCommentIcon>
-            <IconComment size={theme.icon.size.md} />
-          </StyledCommentIcon>
-        )}
-      </StyledTaskBody>
-      <StyledFieldsContainer>
-        <ActivityTargetChips
-          activityTargetObjectRecords={activityTargetObjectRecords}
+      <StyledLeftSideContainer>
+        <StyledCheckboxContainer
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <Checkbox
+            checked={!!task.completedAt}
+            shape={CheckboxShape.Rounded}
+            onCheckedChange={completeTask}
+          />
+        </StyledCheckboxContainer>
+        <StyledTaskTitle completed={task.completedAt !== null}>
+          {task.title || <StyledPlaceholder>Task title</StyledPlaceholder>}
+        </StyledTaskTitle>
+        <StyledTaskBody>
+          <OverflowingTextWithTooltip text={body} />
+          {task.comments && task.comments.length > 0 && (
+            <StyledCommentIcon>
+              <IconComment size={theme.icon.size.md} />
+            </StyledCommentIcon>
+          )}
+        </StyledTaskBody>
+      </StyledLeftSideContainer>
+      <StyledRightSideContainer>
+        <ActivityTargetsInlineCell
+          activity={task}
+          showLabel={false}
+          maxWidth={200}
+          readonly
         />
         <StyledDueDate
           isPast={
@@ -123,7 +131,7 @@ export const TaskRow = ({ task }: { task: Activity }) => {
           <IconCalendar size={theme.icon.size.md} />
           {task.dueAt && beautifyExactDate(task.dueAt)}
         </StyledDueDate>
-      </StyledFieldsContainer>
+      </StyledRightSideContainer>
     </StyledContainer>
   );
 };