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/containers/ContentContainer.tsx

@@ -10,7 +10,7 @@ type OwnProps = {
   topMargin?: number;
 };
 
-const MainContainer = styled.div<{ topMargin: number }>`
+const StyledMainContainer = styled.div<{ topMargin: number }>`
   background: ${({ theme }) => theme.background.noisy};
   display: flex;
 
@@ -27,27 +27,21 @@ type LeftContainerProps = {
   isRightDrawerOpen?: boolean;
 };
 
-const LeftContainer = styled.div<LeftContainerProps>`
+const StyledLeftContainer = styled.div<LeftContainerProps>`
   display: flex;
   position: relative;
-  width: calc(
-    100% -
-      ${(props) =>
-        props.isRightDrawerOpen
-          ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
-          : '0px'}
-  );
+  width: 100%;
 `;
 
 export function ContentContainer({ children, topMargin }: OwnProps) {
   const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
 
   return (
-    <MainContainer topMargin={topMargin ?? 0}>
-      <LeftContainer isRightDrawerOpen={isRightDrawerOpen}>
+    <StyledMainContainer topMargin={topMargin ?? 0}>
+      <StyledLeftContainer isRightDrawerOpen={isRightDrawerOpen}>
         <Panel>{children}</Panel>
-      </LeftContainer>
+      </StyledLeftContainer>
       <RightDrawer />
-    </MainContainer>
+    </StyledMainContainer>
   );
 }

front/src/modules/ui/layout/navbar/NavTitle.tsx

@@ -8,7 +8,7 @@ const StyledTitle = styled.div`
   color: ${({ theme }) => theme.font.color.light};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
-  font-weight: 600;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   padding-bottom: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(8)};

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -42,7 +42,7 @@ const StyledName = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-family: 'Inter';
   font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: 500;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 

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',
+}

front/src/modules/ui/layout/show-page/ShowPageSummaryCard.tsx

@@ -0,0 +1,85 @@
+import { Tooltip } from 'react-tooltip';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { v4 as uuidV4 } from 'uuid';
+
+import { Avatar } from '@/users/components/Avatar';
+import {
+  beautifyExactDate,
+  beautifyPastDateRelativeToNow,
+} from '@/utils/datetime/date-utils';
+
+const StyledShowPageSummaryCard = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
+    ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledInfoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledDate = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  cursor: pointer;
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function ShowPageSummaryCard({
+  logoOrAvatar,
+  title,
+  date,
+}: {
+  logoOrAvatar?: string;
+  title: string;
+  date: string;
+}) {
+  const beautifiedCreatedAt =
+    date !== '' ? beautifyPastDateRelativeToNow(date) : '';
+  const exactCreatedAt = date !== '' ? beautifyExactDate(date) : '';
+  const theme = useTheme();
+  const dateElementId = `date-id-${uuidV4()}`;
+
+  return (
+    <StyledShowPageSummaryCard>
+      <Avatar
+        avatarUrl={logoOrAvatar}
+        size={theme.icon.size.xl}
+        placeholder={title}
+      />
+      <StyledInfoContainer>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledDate id={dateElementId}>
+          Added {beautifiedCreatedAt} ago
+        </StyledDate>
+        <StyledTooltip
+          anchorSelect={`#${dateElementId}`}
+          content={exactCreatedAt}
+          clickable
+          noArrow
+          place="right"
+        />
+      </StyledInfoContainer>
+    </StyledShowPageSummaryCard>
+  );
+}

front/src/modules/ui/layout/show-page/containers/ShowPageLeftContainer.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const ShowPageLeftContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border-radius: 8px;
+  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+  padding: 0px ${({ theme }) => theme.spacing(3)};
+  width: 320px;
+`;

front/src/modules/ui/layout/show-page/containers/ShowPageRightContainer.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const ShowPageRightContainer = styled.div`
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+`;