From ad04040ea6e15562b8c85f64ae6283476145bdb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:06:09 +0100
Subject: [PATCH] 8976 modify mobile page header (#9020)

Closes #8976
---
 .../components/RecordIndexActionMenu.tsx      |  5 +-
 .../PageHeaderOpenCommandMenuButton.tsx       |  8 ++--
 .../layout/page/components/PageAddButton.tsx  |  8 ++--
 .../ui/layout/page/components/PageHeader.tsx  |  4 +-
 .../RecordShowPageBaseHeader.tsx              | 47 +++++++++++--------
 5 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
index 8e3864ad7..8eafd9040 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
@@ -10,6 +10,7 @@ import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 
 export const RecordIndexActionMenu = () => {
   const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
@@ -22,6 +23,8 @@ export const RecordIndexActionMenu = () => {
     'IS_PAGE_HEADER_V2_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {contextStoreCurrentObjectMetadataId && (
@@ -32,7 +35,7 @@ export const RecordIndexActionMenu = () => {
           }}
         >
           {isPageHeaderV2Enabled ? (
-            <RecordIndexActionMenuButtons />
+            <>{!isMobile && <RecordIndexActionMenuButtons />}</>
           ) : (
             <RecordIndexActionMenuBar />
           )}
diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index 5ae26134f..32b1427fb 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, IconDotsVertical } from 'twenty-ui';
+import { Button, IconButton, IconDotsVertical, useIsMobile } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@@ -10,16 +10,18 @@ export const PageHeaderOpenCommandMenuButton = () => {
     'IS_PAGE_HEADER_V2_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isPageHeaderV2Enabled ? (
         <Button
           Icon={IconDotsVertical}
           dataTestId="page-header-open-command-menu-button"
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          shortcut="⌘K"
+          shortcut={isMobile ? '' : '⌘K'}
           ariaLabel="Open command menu"
           onClick={openCommandMenu}
         />
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
index 05ecb17a6..32039651b 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
@@ -1,5 +1,5 @@
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { Button, IconButton, IconPlus } from 'twenty-ui';
+import { Button, IconButton, IconPlus, useIsMobile } from 'twenty-ui';
 
 type PageAddButtonProps = {
   onClick?: () => void;
@@ -9,16 +9,18 @@ export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
   const isPageHeaderV2Enabled = useIsFeatureEnabled(
     'IS_PAGE_HEADER_V2_ENABLED',
   );
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isPageHeaderV2Enabled ? (
         <Button
           Icon={IconPlus}
           dataTestId="add-button"
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          title="New record"
+          title={isMobile ? '' : 'New record'}
           onClick={onClick}
           ariaLabel="New record"
         />
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
index f5e92ad3a..be69589b3 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
@@ -170,14 +170,14 @@ export const PageHeader = ({
           <>
             <IconButton
               Icon={IconChevronUp}
-              size="small"
+              size={isMobile ? 'medium' : 'small'}
               variant="secondary"
               disabled={!hasPreviousRecord}
               onClick={() => navigateToPreviousRecord?.()}
             />
             <IconButton
               Icon={IconChevronDown}
-              size="small"
+              size={isMobile ? 'medium' : 'small'}
               variant="secondary"
               disabled={!hasNextRecord}
               onClick={() => navigateToNextRecord?.()}
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
index a1d326601..0cbbc62b9 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
@@ -6,6 +6,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 
 type RecordShowPageBaseHeaderProps = {
   isFavorite: boolean;
@@ -26,29 +27,35 @@ export const RecordShowPageBaseHeader = ({
     'IS_FAVORITE_FOLDER_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
-      {isFavoriteFolderEnabled ? (
-        <PageFavoriteFoldersDropdown
-          key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
-          dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
-          isFavorite={isFavorite}
-          record={record}
-          objectNameSingular={objectNameSingular}
-        />
-      ) : (
-        <PageFavoriteButton
-          isFavorite={isFavorite}
-          onClick={handleFavoriteButtonClick}
-        />
+      {!isMobile && (
+        <>
+          {isFavoriteFolderEnabled ? (
+            <PageFavoriteFoldersDropdown
+              key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
+              dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
+              isFavorite={isFavorite}
+              record={record}
+              objectNameSingular={objectNameSingular}
+            />
+          ) : (
+            <PageFavoriteButton
+              isFavorite={isFavorite}
+              onClick={handleFavoriteButtonClick}
+            />
+          )}
+          <ShowPageAddButton
+            key="add"
+            activityTargetObject={{
+              id: record?.id ?? '0',
+              targetObjectNameSingular: objectMetadataItem.nameSingular,
+            }}
+          />
+        </>
       )}
-      <ShowPageAddButton
-        key="add"
-        activityTargetObject={{
-          id: record?.id ?? '0',
-          targetObjectNameSingular: objectMetadataItem.nameSingular,
-        }}
-      />
       <PageHeaderOpenCommandMenuButton key="more" />
     </>
   );