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/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -1,33 +1,61 @@
+import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import {
+  OutsideClickAlerterMode,
+  useOutsideAlerter,
+} from '@/ui/hooks/useOutsideAlerter';
 import { isDefined } from '@/utils/type-guards/isDefined';
 
-import { Panel } from '../../Panel';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 
 import { RightDrawerRouter } from './RightDrawerRouter';
 
+const StyledContainer = styled.div`
+  background: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  height: 100%;
+  overflow-x: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: width 0.5s;
+  width: ${({ theme }) => theme.rightDrawerWidth};
+  z-index: 2;
+`;
+
 const StyledRightDrawer = styled.div`
   display: flex;
   flex-direction: row;
-  width: ${({ theme }) => theme.rightDrawerWidth};
+  width: 100%;
 `;
 
 export function RightDrawer() {
-  const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+  const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
+    isRightDrawerOpenState,
+  );
+
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
 
+  const rightDrawerRef = useRef(null);
+  useOutsideAlerter({
+    ref: rightDrawerRef,
+    callback: () => setIsRightDrawerOpen(false),
+    mode: OutsideClickAlerterMode.absolute,
+  });
   if (!isRightDrawerOpen || !isDefined(rightDrawerPage)) {
     return <></>;
   }
 
   return (
-    <StyledRightDrawer>
-      <Panel>
-        <RightDrawerRouter />
-      </Panel>
-    </StyledRightDrawer>
+    <>
+      <StyledContainer>
+        <StyledRightDrawer ref={rightDrawerRef}>
+          <RightDrawerRouter />
+        </StyledRightDrawer>
+      </StyledContainer>
+    </>
   );
 }

front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx

@@ -3,5 +3,7 @@ import styled from '@emotion/styled';
 export const RightDrawerBody = styled.div`
   display: flex;
   flex-direction: column;
+  height: calc(100vh - ${({ theme }) => theme.spacing(10)});
   overflow: auto;
+  position: relative;
 `;

front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -1,10 +1,12 @@
 import { useRecoilState } from 'recoil';
 
-import { RightDrawerComments } from '@/comments/components/RightDrawerComments';
-import { RightDrawerCreateCommentThread } from '@/comments/components/RightDrawerCreateCommentThread';
+import { RightDrawerCreateCommentThread } from '@/comments/components/right-drawer/create/RightDrawerCreateCommentThread';
+import { RightDrawerEditCommentThread } from '@/comments/components/right-drawer/edit/RightDrawerEditCommentThread';
+import { RightDrawerTimeline } from '@/comments/components/right-drawer/RightDrawerTimeline';
 import { isDefined } from '@/utils/type-guards/isDefined';
 
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
+import { RightDrawerPages } from '../types/RightDrawerPages';
 
 export function RightDrawerRouter() {
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
@@ -13,11 +15,14 @@ export function RightDrawerRouter() {
     return <></>;
   }
 
-  return rightDrawerPage === 'comments' ? (
-    <RightDrawerComments />
-  ) : rightDrawerPage === 'create-comment-thread' ? (
-    <RightDrawerCreateCommentThread />
-  ) : (
-    <></>
-  );
+  switch (rightDrawerPage) {
+    case RightDrawerPages.Timeline:
+      return <RightDrawerTimeline />;
+    case RightDrawerPages.CreateCommentThread:
+      return <RightDrawerCreateCommentThread />;
+    case RightDrawerPages.EditCommentThread:
+      return <RightDrawerEditCommentThread />;
+    default:
+      return <></>;
+  }
 }

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import { Button } from '@/ui/components/buttons/Button';
+
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 
 const StyledRightDrawerTopBar = styled.div`
@@ -8,7 +10,7 @@ const StyledRightDrawerTopBar = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: row;
-  font-size: 13px;
+  font-size: ${({ theme }) => theme.font.size.md};
   justify-content: space-between;
   min-height: 40px;
   padding-left: 8px;
@@ -17,19 +19,24 @@ const StyledRightDrawerTopBar = styled.div`
 
 const StyledTopBarTitle = styled.div`
   align-items: center;
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-export function RightDrawerTopBar({
-  title,
-}: {
+type OwnProps = {
   title: string | null | undefined;
-}) {
+  onSave?: () => void;
+};
+
+export function RightDrawerTopBar({ title, onSave }: OwnProps) {
+  function handleOnClick() {
+    onSave?.();
+  }
   return (
     <StyledRightDrawerTopBar>
-      <StyledTopBarTitle>{title}</StyledTopBarTitle>
       <RightDrawerTopBarCloseButton />
+      <StyledTopBarTitle>{title}</StyledTopBarTitle>
+      {onSave && <Button title="Save" onClick={handleOnClick} />}
     </StyledRightDrawerTopBar>
   );
 }

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
-import { IconPlus } from '@/ui/icons/index';
+import { IconChevronsRight } from '@/ui/icons/index';
 
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 
@@ -24,7 +24,6 @@ const StyledButton = styled.button`
   }
   svg {
     color: ${({ theme }) => theme.font.color.tertiary};
-    transform: rotate(45deg);
   }
 `;
 
@@ -37,7 +36,7 @@ export function RightDrawerTopBarCloseButton() {
 
   return (
     <StyledButton onClick={handleButtonClick}>
-      <IconPlus size={16} />
+      <IconChevronsRight size={16} />
     </StyledButton>
   );
 }

front/src/modules/ui/layout/right-drawer/hooks/useOpenRightDrawer.ts

@@ -2,13 +2,13 @@ import { useRecoilState } from 'recoil';
 
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
-import { RightDrawerPage } from '../types/RightDrawerPage';
+import { RightDrawerPages } from '../types/RightDrawerPages';
 
 export function useOpenRightDrawer() {
   const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
   const [, setRightDrawerPage] = useRecoilState(rightDrawerPageState);
 
-  return function openRightDrawer(rightDrawerPage: RightDrawerPage) {
+  return function openRightDrawer(rightDrawerPage: RightDrawerPages) {
     setRightDrawerPage(rightDrawerPage);
     setIsRightDrawerOpen(true);
   };

front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts

@@ -1,8 +1,8 @@
 import { atom } from 'recoil';
 
-import { RightDrawerPage } from '../types/RightDrawerPage';
+import { RightDrawerPages } from '../types/RightDrawerPages';
 
-export const rightDrawerPageState = atom<RightDrawerPage | null>({
+export const rightDrawerPageState = atom<RightDrawerPages | null>({
   key: 'ui/layout/right-drawer-page',
   default: null,
 });

front/src/modules/ui/layout/right-drawer/types/RightDrawerPage.ts

@@ -1 +0,0 @@
-export type RightDrawerPage = 'comments' | 'create-comment-thread';

front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts

@@ -0,0 +1,5 @@
+export enum RightDrawerPages {
+  Timeline = 'timeline',
+  CreateCommentThread = 'create-comment-thread',
+  EditCommentThread = 'edit-comment-thread',
+}