Lucas/t 365 on comment drawer i see a add comment section with severa (#256)

* Added comments and authors on drawer with proper resolving

* Fixed generated front graphql from rebase

* Fixed comment chip

* wip

* wip 2

* - Added string typing for DateTime scalar
- Refactored user in a recoil state and workspace using it
- Added comment creation

* Put theme and user state in generic providers

* Fix from rebase

* Fixed app theme provider removed from storybook

* Wip

* Fix graphql front

* Fixed backend bug

* - Added comment fetching in creation mode
- Fixed drawer overflows and heights

* - Fixed autosize validation button CSS bug

* Fixed CSS bug with drawer changing height if overflow

* Fixed text input too many event catched and useless error message

* Removed console.log

* Fixed comment cell chip

* Create comment thread on each comment action bar click

* Fixed lint

* Fixed TopBar height

front/src/modules/ui/layout/containers/WithTopBarContainer.tsx

@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
 import { Panel } from '../Panel';
 import { RightDrawer } from '../right-drawer/components/RightDrawer';
 import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpenState';
-import { TopBar } from '../top-bar/TopBar';
+import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/TopBar';
 
 type OwnProps = {
   children: JSX.Element;
@@ -20,13 +20,14 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-const TOPBAR_HEIGHT = '48px';
-
 const MainContainer = styled.div`
   display: flex;
   flex-direction: row;
   width: calc(100% - ${(props) => props.theme.spacing(3)});
-  height: calc(100% - ${TOPBAR_HEIGHT} - ${(props) => props.theme.spacing(3)});
+  height: calc(
+    100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} -
+      ${(props) => props.theme.spacing(5)}
+  );
   background: ${(props) => props.theme.noisyBackground};
   padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};

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

@@ -3,4 +3,5 @@ import styled from '@emotion/styled';
 export const RightDrawerBody = styled.div`
   display: flex;
   flex-direction: column;
+  overflow: auto;
 `;

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

@@ -1,6 +1,7 @@
 import { useRecoilState } from 'recoil';
 
 import { RightDrawerComments } from '@/comments/components/comments/RightDrawerComments';
+import { RightDrawerCreateCommentThread } from '@/comments/components/comments/RightDrawerCreateCommentThread';
 import { isDefined } from '@/utils/type-guards/isDefined';
 
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
@@ -12,5 +13,11 @@ export function RightDrawerRouter() {
     return <></>;
   }
 
-  return rightDrawerPage === 'comments' ? <RightDrawerComments /> : <></>;
+  return rightDrawerPage === 'comments' ? (
+    <RightDrawerComments />
+  ) : rightDrawerPage === 'create-comment-thread' ? (
+    <RightDrawerCreateCommentThread />
+  ) : (
+    <></>
+  );
 }

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

@@ -5,7 +5,7 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 const StyledRightDrawerTopBar = styled.div`
   display: flex;
   flex-direction: row;
-  height: 40px;
+  min-height: 40px;
   align-items: center;
   justify-content: space-between;
   padding-left: 8px;

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

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

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

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

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -2,13 +2,15 @@ import { ReactNode } from 'react';
 import { TbPlus } from 'react-icons/tb';
 import styled from '@emotion/styled';
 
+export const TOP_BAR_MIN_HEIGHT = '40px';
+
 const TopBarContainer = styled.div`
   display: flex;
   flex-direction: row;
-  height: 38px;
+  min-height: ${TOP_BAR_MIN_HEIGHT};
   align-items: center;
   background: ${(props) => props.theme.noisyBackground};
-  padding: 8px;
+  padding: ${(props) => props.theme.spacing(2)};
   font-size: 14px;
   color: ${(props) => props.theme.text80};
 `;