Add "show company / people" view and "Notes" concept (#528)

* Begin adding show view and refactoring threads to become notes

* Progress on design

* Progress redesign timeline

* Dropdown button, design improvement

* Open comment thread edit mode in drawer

* Autosave local storage and commentThreadcount

* Improve display and fix missing key issue

* Remove some hardcoded CSS properties

* Create button

* Split company show into ui/business + fix eslint

* Fix font weight

* Begin auto-save on edit mode

* Save server-side query result to Apollo cache

* Fix save behavior

* Refetch timeline after creating note

* Rename createCommentThreadWithComment

* Improve styling

* Revert "Improve styling"

This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0.

* Improve CSS styling

* Bring back border radius inadvertently removed

* padding adjustment

* Improve blocknote design

* Improve edit mode display

* Remove Comments.tsx

* Remove irrelevant comment stories

* Removed un-necessary panel component

* stop using fragment, move trash icon

* Add a basic story for CompanyShow

* Add a basic People show view

* Fix storybook tests

* Add very basic Person story

* Refactor PR1

* Refactor part 2

* Refactor part 3

* Refactor part 4

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -1,15 +1,15 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
 
-import { CellCommentChip } from '@/comments/components/CellCommentChip';
-import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
+import { CellCommentChip } from '@/comments/components/table/CellCommentChip';
+import { useOpenTimelineRightDrawer } from '@/comments/hooks/useOpenTimelineRightDrawer';
 import { EditableCellDoubleText } from '@/ui/components/editable-cell/types/EditableCellDoubleText';
 import { CommentableType, Person } from '~/generated/graphql';
 
 import { PersonChip } from './PersonChip';
 
 type OwnProps = {
-  person: Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentCount'>;
+  person: Pick<Person, 'id' | 'firstName' | 'lastName' | '_commentThreadCount'>;
   onChange: (firstName: string, lastName: string) => void;
 };
 
@@ -27,7 +27,7 @@ const RightContainer = styled.div`
 export function EditablePeopleFullName({ person, onChange }: OwnProps) {
   const [firstNameValue, setFirstNameValue] = useState(person.firstName ?? '');
   const [lastNameValue, setLastNameValue] = useState(person.lastName ?? '');
-  const openCommentRightDrawer = useOpenCommentRightDrawer();
+  const openCommentRightDrawer = useOpenTimelineRightDrawer();
 
   function handleDoubleTextChange(
     firstValue: string,
@@ -60,10 +60,13 @@ export function EditablePeopleFullName({ person, onChange }: OwnProps) {
       onChange={handleDoubleTextChange}
       nonEditModeContent={
         <NoEditModeContainer>
-          <PersonChip name={person.firstName + ' ' + person.lastName} />
+          <PersonChip
+            name={person.firstName + ' ' + person.lastName}
+            id={person.id}
+          />
           <RightContainer>
             <CellCommentChip
-              count={person._commentCount ?? 0}
+              count={person._commentThreadCount ?? 0}
               onClick={handleCommentClick}
             />
           </RightContainer>

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -30,6 +30,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
       }
       nonEditModeContent={
         <CompanyChip
+          id={people.company?.id ?? ''}
           name={people.company?.name ?? ''}
           picture={getLogoUrlFromDomainName(people.company?.domainName)}
         />

front/src/modules/people/components/PersonChip.tsx

@@ -1,54 +1,63 @@
 import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import PersonPlaceholder from './person-placeholder.png';
 
 export type PersonChipPropsType = {
+  id?: string;
   name: string;
   picture?: string;
 };
 
-const StyledContainer = styled.span`
+const baseStyle = ({ theme }: { theme: Theme }) => `
   align-items: center;
-  background-color: ${({ theme }) => theme.background.tertiary};
-  border-radius: ${({ theme }) => theme.spacing(1)};
-  color: ${({ theme }) => theme.font.color.primary};
+  background-color: ${theme.background.tertiary};
+  border-radius: ${theme.spacing(1)};
+  color: ${theme.font.color.primary};
   display: inline-flex;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${theme.spacing(1)};
   height: 12px;
-
   overflow: hidden;
-  padding: ${({ theme }) => theme.spacing(1)};
-
+  padding: ${theme.spacing(1)};
+  text-decoration: none;
   :hover {
     filter: brightness(95%);
   }
-
   img {
     border-radius: 100%;
     height: 14px;
     object-fit: cover;
     width: 14px;
   }
-
   white-space: nowrap;
 `;
 
+const StyledContainerLink = styled(Link)`
+  ${baseStyle}
+`;
+
+const StyledContainerNoLink = styled.div`
+  ${baseStyle}
+`;
+
 const StyledName = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
-export function PersonChip({ name, picture }: PersonChipPropsType) {
+export function PersonChip({ id, name, picture }: PersonChipPropsType) {
+  const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
   return (
-    <StyledContainer data-testid="person-chip">
+    <ContainerComponent data-testid="person-chip" to={`/person/${id}`}>
       <img
         data-testid="person-chip-image"
         src={picture ? picture.toString() : PersonPlaceholder.toString()}
         alt="person"
       />
       <StyledName>{name}</StyledName>
-    </StyledContainer>
+    </ContainerComponent>
   );
 }