8928 refactor page header buttons (#8952)

Closes #8928 

<img width="1296" alt="Capture d’écran 2024-12-09 à 10 26 37"
src="https://github.com/user-attachments/assets/f33202b0-9c11-48da-8daa-e867d62a1803">
<img width="1296" alt="Capture d’écran 2024-12-09 à 10 26 54"
src="https://github.com/user-attachments/assets/a94f89d4-ca12-403f-bfcb-12168a82f77c">

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx

@@ -1,17 +1,19 @@
-import { IconButton, IconDotsVertical } from 'twenty-ui';
+import { Button, IconDotsVertical } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 
-export const ShowPageMoreButton = () => {
+export const PageHeaderOpenCommandMenuButton = () => {
   const { openCommandMenu } = useCommandMenu();
 
   return (
-    <IconButton
+    <Button
       Icon={IconDotsVertical}
-      size="medium"
-      dataTestId="more-showpage-button"
-      accent="default"
+      dataTestId="page-header-open-command-menu-button"
+      size="small"
       variant="secondary"
+      accent="default"
+      shortcut="⌘K"
+      ariaLabel="Open command menu"
       onClick={openCommandMenu}
     />
   );

packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx

@@ -1,17 +1,18 @@
-import { IconButton, IconPlus } from 'twenty-ui';
+import { Button, IconPlus } from 'twenty-ui';
 
 type PageAddButtonProps = {
-  onClick: () => void;
+  onClick?: () => void;
 };
 
 export const PageAddButton = ({ onClick }: PageAddButtonProps) => (
-  <IconButton
+  <Button
     Icon={IconPlus}
     dataTestId="add-button"
-    size="medium"
+    size="small"
     variant="secondary"
     accent="default"
+    title="New record"
     onClick={onClick}
-    ariaLabel="Add"
+    ariaLabel="New record"
   />
 );

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -129,24 +129,6 @@ export const PageHeader = ({
         )}
 
         <StyledTopBarIconStyledTitleContainer>
-          {hasPaginationButtons && (
-            <>
-              <IconButton
-                Icon={IconChevronUp}
-                size="small"
-                variant="secondary"
-                disabled={!hasPreviousRecord}
-                onClick={() => navigateToPreviousRecord?.()}
-              />
-              <IconButton
-                Icon={IconChevronDown}
-                size="small"
-                variant="secondary"
-                disabled={!hasNextRecord}
-                onClick={() => navigateToNextRecord?.()}
-              />
-            </>
-          )}
           {Icon && <Icon size={theme.icon.size.md} />}
           {title && (
             <StyledTitleContainer data-testid="top-bar-title">
@@ -159,7 +141,28 @@ export const PageHeader = ({
           )}
         </StyledTopBarIconStyledTitleContainer>
       </StyledLeftContainer>
-      <StyledPageActionContainer>{children}</StyledPageActionContainer>
+
+      <StyledPageActionContainer>
+        {hasPaginationButtons && (
+          <>
+            <IconButton
+              Icon={IconChevronUp}
+              size="small"
+              variant="secondary"
+              disabled={!hasPreviousRecord}
+              onClick={() => navigateToPreviousRecord?.()}
+            />
+            <IconButton
+              Icon={IconChevronDown}
+              size="small"
+              variant="secondary"
+              disabled={!hasNextRecord}
+              onClick={() => navigateToNextRecord?.()}
+            />
+          </>
+        )}
+        {children}
+      </StyledPageActionContainer>
     </StyledTopBarContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -1,11 +1,5 @@
 import styled from '@emotion/styled';
-import {
-  IconButton,
-  IconCheckbox,
-  IconNotes,
-  IconPlus,
-  MenuItem,
-} from 'twenty-ui';
+import { Button, IconCheckbox, IconNotes, IconPlus, MenuItem } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@@ -28,7 +22,7 @@ export const ShowPageAddButton = ({
 }: {
   activityTargetObject: ActivityTargetableObject;
 }) => {
-  const { closeDropdown, toggleDropdown } = useDropdown('add-show-page');
+  const { closeDropdown } = useDropdown('add-show-page');
   const openNote = useOpenCreateActivityDrawer({
     activityObjectNameSingular: CoreObjectNameSingular.Note,
   });
@@ -66,13 +60,14 @@ export const ShowPageAddButton = ({
       <Dropdown
         dropdownId={SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID}
         clickableComponent={
-          <IconButton
+          <Button
             Icon={IconPlus}
-            size="medium"
-            dataTestId="add-showpage-button"
-            accent="default"
+            dataTestId="add-button"
+            size="small"
             variant="secondary"
-            onClick={toggleDropdown}
+            accent="default"
+            title="New note/task"
+            ariaLabel="New note/task"
           />
         }
         dropdownComponents={