Feat/open comment drawer from comment chip (#187)

* wip

* Can open comment right drawer from company name cell

front/src/components/people/EditablePeopleFullName.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import PersonChip from '../chips/PersonChip';
 import { EditableDoubleText } from '../editable-cell/EditableDoubleText';
+import { CellCommentChip } from '../comments/CellCommentChip';
+import styled from '@emotion/styled';
 
 type OwnProps = {
   firstname: string;
@@ -8,6 +10,13 @@ type OwnProps = {
   onChange: (firstname: string, lastname: string) => void;
 };
 
+const StyledDiv = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 export function EditablePeopleFullName({
   firstname,
   lastname,
@@ -26,6 +35,12 @@ export function EditablePeopleFullName({
     onChange(firstValue, secondValue);
   }
 
+  function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log('comment clicked');
+  }
+
   return (
     <EditableDoubleText
       firstValue={firstnameValue}
@@ -33,7 +48,14 @@ export function EditablePeopleFullName({
       firstValuePlaceholder="First name"
       secondValuePlaceholder="Last name"
       onChange={handleDoubleTextChange}
-      nonEditModeContent={<PersonChip name={firstname + ' ' + lastname} />}
+      nonEditModeContent={
+        <>
+          <StyledDiv>
+            <PersonChip name={firstname + ' ' + lastname} />
+          </StyledDiv>
+          <CellCommentChip count={12} onClick={handleCommentClick} />
+        </>
+      }
     />
   );
 }