feat: Revamp navigation bar (#6031)

closes: #4428

Testing for fetchMoreRecords is pending, along with component tests

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { TimelineActivityContext } from '@/activities/timelineActivities/contexts/TimelineActivityContext';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
 import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
+import { useRecordShowPagePagination } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { PageBody } from '@/ui/layout/page/PageBody';
@@ -35,16 +36,35 @@ export const RecordShowPage = () => {
     parameters.objectRecordId ?? '',
   );
 
+  const {
+    viewName,
+    hasPreviousRecord,
+    hasNextRecord,
+    navigateToPreviousRecord,
+    navigateToNextRecord,
+    navigateToIndexView,
+    isLoadingPagination,
+  } = useRecordShowPagePagination(
+    parameters.objectNameSingular ?? '',
+    parameters.objectRecordId ?? '',
+  );
+
   return (
     <RecordFieldValueSelectorContextProvider>
       <RecordValueSetterEffect recordId={objectRecordId} />
       <PageContainer>
         <PageTitle title={pageTitle} />
         <PageHeader
-          title={pageName ?? ''}
-          hasBackButton
+          title={viewName}
+          hasPaginationButtons
+          hasClosePageButton
+          onClosePage={navigateToIndexView}
+          hasPreviousRecord={hasPreviousRecord}
+          navigateToPreviousRecord={navigateToPreviousRecord}
+          hasNextRecord={hasNextRecord}
+          navigateToNextRecord={navigateToNextRecord}
           Icon={headerIcon}
-          loading={loading}
+          loading={loading || isLoadingPagination}
         >
           <>
             <PageFavoriteButton

packages/twenty-front/src/pages/object-record/__stories__/RecordShowPage.stories.tsx

@@ -8,7 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getPeopleMock } from '~/testing/mock-data/people';
+import { getPeopleMock, peopleQueryResult } from '~/testing/mock-data/people';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 
 import { RecordShowPage } from '../RecordShowPage';
@@ -22,12 +22,17 @@ const meta: Meta<PageDecoratorArgs> = {
     routePath: '/object/:objectNameSingular/:objectRecordId',
     routeParams: {
       ':objectNameSingular': 'person',
-      ':objectRecordId': '1234',
+      ':objectRecordId': peopleMock[0].id,
     },
   },
   parameters: {
     msw: {
       handlers: [
+        graphql.query('FindManyPeople', () => {
+          return HttpResponse.json({
+            data: peopleQueryResult,
+          });
+        }),
         graphql.query('FindOnePerson', () => {
           return HttpResponse.json({
             data: {
@@ -64,8 +69,8 @@ const meta: Meta<PageDecoratorArgs> = {
                 edges: [],
                 pageInfo: {
                   hasNextPage: false,
-                  startCursor: '1234',
-                  endCursor: '1234',
+                  startCursor: peopleMock[0].id,
+                  endCursor: peopleMock[0].id,
                 },
                 totalCount: 0,
               },