New page structure (#1377)

* - new page structure

* - removed unecessary task changes

* - handleClick -> onClick

front/src/pages/people/People.tsx

@@ -4,8 +4,13 @@ import { v4 } from 'uuid';
 
 import { PeopleTable } from '@/people/table/components/PeopleTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconUser } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageAddButton } from '@/ui/layout/components/PageAddButton';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
+import { PageHotkeys } from '@/ui/layout/components/PageHotkeys';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
 import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
@@ -58,19 +63,29 @@ export function People() {
 
   return (
     <SpreadsheetImportProvider>
-      <RecoilScope scopeId="people" SpecificContext={TableRecoilScopeContext}>
-        <WithTopBarContainer
+      <PageContainer>
+        <PageHeader
           title="People"
-          icon={<IconUser size={theme.icon.size.sm} />}
-          onAddButtonClick={handleAddButtonClick}
+          icon={<IconUser size={theme.icon.size.md} />}
         >
-          <StyledTableContainer>
-            <PeopleTable />
-          </StyledTableContainer>
-          <EntityTableActionBar />
-          <EntityTableContextMenu />
-        </WithTopBarContainer>
-      </RecoilScope>
+          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+            <PageHotkeys onAddButtonClick={handleAddButtonClick} />
+            <PageAddButton onClick={handleAddButtonClick} />
+          </RecoilScope>
+        </PageHeader>
+        <PageBody>
+          <RecoilScope
+            scopeId="people"
+            SpecificContext={TableRecoilScopeContext}
+          >
+            <StyledTableContainer>
+              <PeopleTable />
+            </StyledTableContainer>
+            <EntityTableActionBar />
+            <EntityTableContextMenu />
+          </RecoilScope>
+        </PageBody>
+      </PageContainer>
     </SpreadsheetImportProvider>
   );
 }

front/src/pages/people/PersonShow.tsx

@@ -6,13 +6,17 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import { usePersonQuery } from '@/people/hooks/usePersonQuery';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
 import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { IconUser } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
@@ -64,24 +68,28 @@ export function PersonShow() {
   }
 
   return (
-    <>
+    <PageContainer>
       <PageTitle title={person.displayName || 'No Name'} />
-      <WithTopBarContainer
+      <PageHeader
         title={person.firstName ?? ''}
         icon={<IconUser size={theme.icon.size.md} />}
         hasBackButton
-        isFavorite={isFavorite}
-        onFavoriteButtonClick={handleFavoriteButtonClick}
-        extraButtons={[
+      >
+        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <PageFavoriteButton
+            isFavorite={isFavorite}
+            onClick={handleFavoriteButtonClick}
+          />
           <ShowPageAddButton
             key="add"
             entity={{
               id: person.id,
               type: ActivityTargetableEntityType.Person,
             }}
-          />,
-        ]}
-      >
+          />
+        </RecoilScope>
+      </PageHeader>
+      <PageBody>
         <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
           <ShowPageContainer>
             <ShowPageLeftContainer>
@@ -130,7 +138,7 @@ export function PersonShow() {
             />
           </ShowPageContainer>
         </RecoilScope>
-      </WithTopBarContainer>
-    </>
+      </PageBody>
+    </PageContainer>
   );
 }