New page structure (#1377)

* - new page structure

* - removed unecessary task changes

* - handleClick -> onClick

front/src/modules/ui/layout/components/PageAddButton.tsx

@@ -0,0 +1,19 @@
+import { IconButton } from '@/ui/button/components/IconButton';
+import { IconPlus } from '@/ui/icon';
+
+type OwnProps = {
+  onClick: () => void;
+};
+
+export function PageAddButton({ onClick }: OwnProps) {
+  return (
+    <IconButton
+      icon={<IconPlus size={16} />}
+      size="medium"
+      variant="secondary"
+      data-testid="add-button"
+      accent="default"
+      onClick={onClick}
+    />
+  );
+}

front/src/modules/ui/layout/components/PageBody.tsx

@@ -1,5 +1,4 @@
-import { PAGE_BAR_MIN_HEIGHT } from '../page-bar/components/PageBar';
-
+import { PAGE_BAR_MIN_HEIGHT } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {

front/src/modules/ui/layout/components/PageFavoriteButton.tsx

@@ -0,0 +1,20 @@
+import { IconButton } from '@/ui/button/components/IconButton';
+import { IconHeart } from '@/ui/icon';
+
+type OwnProps = {
+  isFavorite: boolean;
+  onClick: () => void;
+};
+
+export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) {
+  return (
+    <IconButton
+      icon={<IconHeart size={16} />}
+      size="medium"
+      variant="secondary"
+      data-testid="add-button"
+      accent={isFavorite ? 'danger' : 'default'}
+      onClick={onClick}
+    />
+  );
+}

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -67,7 +67,7 @@ type OwnProps = {
   title: string;
   hasBackButton?: boolean;
   icon: ReactNode;
-  children: JSX.Element | JSX.Element[];
+  children?: JSX.Element | JSX.Element[];
 };
 
 export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {

front/src/modules/ui/layout/components/PageHotkeys.tsx

@@ -0,0 +1,14 @@
+import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+type OwnProps = {
+  onAddButtonClick?: () => void;
+};
+
+export function PageHotkeys({ onAddButtonClick }: OwnProps) {
+  useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
+    onAddButtonClick,
+  ]);
+
+  return <></>;
+}

front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-import { PageBar } from '../page-bar/components/PageBar';
-
+import { PageHeader } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {
@@ -24,7 +23,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
 
   return (
     <StyledContainer isMobile={isMobile}>
-      {isMobile && <PageBar title={title} icon={icon} />}
+      {isMobile && <PageHeader title={title} icon={icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );

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

@@ -1,53 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-import { PAGE_BAR_MIN_HEIGHT, PageBar } from '../page-bar/components/PageBar';
-import { PageBarHotkeys } from '../page-bar/components/PageBarHotkeys';
-
-import { RightDrawerContainer } from './RightDrawerContainer';
-
-type OwnProps = {
-  children: JSX.Element | JSX.Element[];
-  title: string;
-  hasBackButton?: boolean;
-  isFavorite?: boolean;
-  icon: ReactNode;
-  onAddButtonClick?: () => void;
-  onFavoriteButtonClick?: () => void;
-  extraButtons?: ReactNode[];
-};
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-
-export function WithTopBarContainer({
-  children,
-  title,
-  hasBackButton,
-  isFavorite,
-  icon,
-  onAddButtonClick,
-  onFavoriteButtonClick,
-  extraButtons,
-}: OwnProps) {
-  return (
-    <StyledContainer>
-      <PageBarHotkeys onAddButtonClick={onAddButtonClick} />
-      <PageBar
-        title={title}
-        hasBackButton={hasBackButton}
-        isFavorite={isFavorite}
-        icon={icon}
-        onAddButtonClick={onAddButtonClick}
-        onFavoriteButtonClick={onFavoriteButtonClick}
-        extraButtons={extraButtons}
-      />
-      <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
-        {children}
-      </RightDrawerContainer>
-    </StyledContainer>
-  );
-}