Fix/table rerenders (#609)

* Fixed top bar rerenders

* Fixed rerender on editable cell

* Fix lint

* asd

* Fix

---------

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

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

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const FlexExpandingContainer = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+`;

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

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
-import { ContentContainer } from './ContentContainer';
+import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {
-  children: JSX.Element;
+  children: JSX.Element | JSX.Element[];
 };
 
 const StyledContainer = styled.div`
@@ -15,7 +15,7 @@ const StyledContainer = styled.div`
 export function NoTopBarContainer({ children }: OwnProps) {
   return (
     <StyledContainer>
-      <ContentContainer topMargin={16}>{children}</ContentContainer>
+      <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );
 }

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

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+import { Panel } from '../Panel';
+import { RightDrawer } from '../right-drawer/components/RightDrawer';
+
+type OwnProps = {
+  children: JSX.Element | JSX.Element[];
+  topMargin?: number;
+};
+
+const StyledMainContainer = styled.div<{ topMargin: number }>`
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: calc(100% - ${(props) => props.topMargin}px);
+
+  padding-bottom: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(3)};
+  width: calc(100% - ${({ theme }) => theme.spacing(3)});
+`;
+
+type LeftContainerProps = {
+  isRightDrawerOpen?: boolean;
+};
+
+const StyledLeftContainer = styled.div<LeftContainerProps>`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+
+export function RightDrawerContainer({ children, topMargin }: OwnProps) {
+  return (
+    <StyledMainContainer topMargin={topMargin ?? 0}>
+      <StyledLeftContainer>
+        <Panel>{children}</Panel>
+      </StyledLeftContainer>
+      <RightDrawer />
+    </StyledMainContainer>
+  );
+}

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

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export function VerticalFullWidthContainer({
+  children,
+}: {
+  children: JSX.Element[];
+}) {
+  return <StyledContainer>{children}</StyledContainer>;
+}

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

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
+import { TopBarHotkeys } from '../top-bar/TableTopBarHotkeys';
 import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/TopBar';
 
-import { ContentContainer } from './ContentContainer';
+import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {
-  children: JSX.Element;
+  children: JSX.Element | JSX.Element[];
   title: string;
   icon: ReactNode;
   onAddButtonClick?: () => void;
@@ -26,10 +27,11 @@ export function WithTopBarContainer({
 }: OwnProps) {
   return (
     <StyledContainer>
+      <TopBarHotkeys onAddButtonClick={onAddButtonClick} />
       <TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
-      <ContentContainer topMargin={TOP_BAR_MIN_HEIGHT + 16 + 16}>
+      <RightDrawerContainer topMargin={TOP_BAR_MIN_HEIGHT + 16 + 16}>
         {children}
-      </ContentContainer>
+      </RightDrawerContainer>
     </StyledContainer>
   );
 }

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

@@ -0,0 +1,17 @@
+import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
+
+type OwnProps = {
+  onAddButtonClick?: () => void;
+};
+
+export function TopBarHotkeys({ onAddButtonClick }: OwnProps) {
+  useScopedHotkeys(
+    'c',
+    () => onAddButtonClick?.(),
+    InternalHotkeysScope.Table,
+    [onAddButtonClick],
+  );
+
+  return <></>;
+}

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

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
-import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { IconPlus } from '@/ui/icons/index';
 
 import NavCollapseButton from '../navbar/NavCollapseButton';
@@ -51,8 +49,6 @@ type OwnProps = {
 };
 
 export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
-  useScopedHotkeys('c', () => onAddButtonClick?.(), InternalHotkeysScope.Table);
-
   return (
     <>
       <TopBarContainer>