From ca808f6517ea7b89dd14f28718cefc7a2567676c Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Fri, 6 Dec 2024 17:14:38 +0100
Subject: [PATCH 1/6] update new record button

---
 .../modules/ui/layout/page/components/PageAddButton.tsx  | 9 +++++----
 .../twenty-ui/src/input/button/components/Button.tsx     | 3 +++
 2 files changed, 8 insertions(+), 4 deletions(-)

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 3c1478f86260..5f9cc1d32371 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,17 +1,18 @@
-import { IconButton, IconPlus } from 'twenty-ui';
+import { Button, IconPlus } from 'twenty-ui';
 
 type PageAddButtonProps = {
   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"
   />
 );
diff --git a/packages/twenty-ui/src/input/button/components/Button.tsx b/packages/twenty-ui/src/input/button/components/Button.tsx
index d9fae551b522..241482a96bf2 100644
--- a/packages/twenty-ui/src/input/button/components/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button.tsx
@@ -30,6 +30,7 @@ export type ButtonProps = {
   target?: string;
   dataTestId?: string;
   shortcut?: string;
+  ariaLabel?: string;
 } & React.ComponentProps<'button'>;
 
 const StyledButton = styled('button', {
@@ -391,6 +392,7 @@ export const Button = ({
   target,
   dataTestId,
   shortcut,
+  ariaLabel,
 }: ButtonProps) => {
   const theme = useTheme();
 
@@ -411,6 +413,7 @@ export const Button = ({
       as={to ? Link : 'button'}
       target={target}
       data-testid={dataTestId}
+      aria-label={ariaLabel}
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}

From 22f49d1d4076bee9a728856b73d4f5018f8f48dd Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Fri, 6 Dec 2024 17:34:10 +0100
Subject: [PATCH 2/6] update showpage buttons

---
 .../components/PageFavoriteButton.tsx         | 10 +++++----
 .../RecordIndexPageKanbanAddButton.tsx        | 13 ++----------
 .../layout/page/components/PageAddButton.tsx  |  2 +-
 .../components/ShowPageAddButton.tsx          | 21 +++++++------------
 .../components/ShowPageMoreButton.tsx         | 10 +++++----
 5 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
index 2891c48f46f4..57ed73ea13d1 100644
--- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, IconHeart } from 'twenty-ui';
+import { Button, IconHeart } from 'twenty-ui';
 
 type PageFavoriteButtonProps = {
   isFavorite: boolean;
@@ -9,12 +9,14 @@ export const PageFavoriteButton = ({
   isFavorite,
   onClick,
 }: PageFavoriteButtonProps) => (
-  <IconButton
+  <Button
     Icon={IconHeart}
-    size="medium"
+    dataTestId="favorite-button"
+    size="small"
     variant="secondary"
-    data-testid="add-button"
     accent={isFavorite ? 'danger' : 'default'}
+    title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
     onClick={onClick}
+    ariaLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
   />
 );
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
index ace9040aee3e..c86ef48d6a5a 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
@@ -12,11 +12,11 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { useCallback, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconButton, IconPlus } from 'twenty-ui';
 
 const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
   width: 100%;
@@ -92,16 +92,7 @@ export const RecordIndexPageKanbanAddButton = () => {
     <Dropdown
       dropdownMenuWidth="200px"
       dropdownPlacement="bottom-start"
-      clickableComponent={
-        <IconButton
-          Icon={IconPlus}
-          dataTestId="add-button"
-          size="medium"
-          variant="secondary"
-          accent="default"
-          ariaLabel="Add"
-        />
-      }
+      clickableComponent={<PageAddButton />}
       dropdownId={dropdownId}
       dropdownComponents={
         <StyledDropDownMenu>
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 5f9cc1d32371..12dd70926e7c 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,7 +1,7 @@
 import { Button, IconPlus } from 'twenty-ui';
 
 type PageAddButtonProps = {
-  onClick: () => void;
+  onClick?: () => void;
 };
 
 export const PageAddButton = ({ onClick }: PageAddButtonProps) => (
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
index 7eb9f8360dc4..c1123c9f1b6e 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/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={
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
index 2bac20781dca..ed327bb756d5 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, IconDotsVertical } from 'twenty-ui';
+import { Button, IconDotsVertical } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 
@@ -6,12 +6,14 @@ export const ShowPageMoreButton = () => {
   const { openCommandMenu } = useCommandMenu();
 
   return (
-    <IconButton
+    <Button
       Icon={IconDotsVertical}
-      size="medium"
       dataTestId="more-showpage-button"
-      accent="default"
+      size="small"
       variant="secondary"
+      accent="default"
+      shortcut="⌘K"
+      ariaLabel="More"
       onClick={openCommandMenu}
     />
   );

From 64e47a81b5f290b2eb59de281f157bf573e4eacf Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Fri, 6 Dec 2024 17:37:44 +0100
Subject: [PATCH 3/6] Move navigation to right side

---
 .../ui/layout/page/components/PageHeader.tsx  | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

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 9b9827b54ee4..92ad7d505b11 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
@@ -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>
   );
 };

From b12fbad52e813e31a4c11d520c6ee12cf812c807 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Fri, 6 Dec 2024 17:48:09 +0100
Subject: [PATCH 4/6] create PageHeaderOpenCommandMenuButton

---
 .../components/PageHeaderOpenCommandMenuButton.tsx}           | 2 +-
 .../src/pages/object-record/RecordShowPageBaseHeader.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/twenty-front/src/modules/ui/layout/{show-page/components/ShowPageMoreButton.tsx => page-header/components/PageHeaderOpenCommandMenuButton.tsx} (88%)

diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
similarity index 88%
rename from packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
rename to packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index ed327bb756d5..e34b993fc762 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -2,7 +2,7 @@ import { Button, IconDotsVertical } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 
-export const ShowPageMoreButton = () => {
+export const PageHeaderOpenCommandMenuButton = () => {
   const { openCommandMenu } = useCommandMenu();
 
   return (
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
index 40f4424825d2..a1d32660196c 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
@@ -3,8 +3,8 @@ import { PageFavoriteFoldersDropdown } from '@/favorites/components/PageFavorite
 import { FAVORITE_FOLDER_PICKER_DROPDOWN_ID } from '@/favorites/favorite-folder-picker/constants/FavoriteFolderPickerDropdownId';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 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 { ShowPageMoreButton } from '@/ui/layout/show-page/components/ShowPageMoreButton';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
 type RecordShowPageBaseHeaderProps = {
@@ -49,7 +49,7 @@ export const RecordShowPageBaseHeader = ({
           targetObjectNameSingular: objectMetadataItem.nameSingular,
         }}
       />
-      <ShowPageMoreButton key="more" />
+      <PageHeaderOpenCommandMenuButton key="more" />
     </>
   );
 };

From 73251f21997b0ec58ab5a310b796a129f7594299 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Mon, 9 Dec 2024 10:23:19 +0100
Subject: [PATCH 5/6] add PageHeaderOpenCommandMenuButton in record index page
 header

---
 .../record-index/components/RecordIndexPageHeader.tsx           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
index 3eeec0aead72..41e832883e6c 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@@ -3,6 +3,7 @@ import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetada
 import { RecordIndexPageKanbanAddButton } from '@/object-record/record-index/components/RecordIndexPageKanbanAddButton';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
+import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
 import { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
 import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { PageHotkeysEffect } from '@/ui/layout/page/components/PageHotkeysEffect';
@@ -52,6 +53,7 @@ export const RecordIndexPageHeader = () => {
         ) : (
           <RecordIndexPageKanbanAddButton />
         ))}
+      <PageHeaderOpenCommandMenuButton />
     </PageHeader>
   );
 };

From 6a201e2d4feb5a08da60612a6a92ada728374c6d Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Mon, 9 Dec 2024 10:42:05 +0100
Subject: [PATCH 6/6] small modifications

---
 .../components/PageFavoriteButton.tsx         | 27 ++++++++++---------
 .../components/SignInBackgroundMockPage.tsx   |  2 +-
 .../PageHeaderOpenCommandMenuButton.tsx       |  4 +--
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
index 57ed73ea13d1..d5c739df00ce 100644
--- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
@@ -8,15 +8,18 @@ type PageFavoriteButtonProps = {
 export const PageFavoriteButton = ({
   isFavorite,
   onClick,
-}: PageFavoriteButtonProps) => (
-  <Button
-    Icon={IconHeart}
-    dataTestId="favorite-button"
-    size="small"
-    variant="secondary"
-    accent={isFavorite ? 'danger' : 'default'}
-    title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-    onClick={onClick}
-    ariaLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
-  />
-);
+}: PageFavoriteButtonProps) => {
+  const title = isFavorite ? 'Remove from favorites' : 'Add to favorites';
+  return (
+    <Button
+      Icon={IconHeart}
+      dataTestId="favorite-button"
+      size="small"
+      variant="secondary"
+      accent={isFavorite ? 'danger' : 'default'}
+      title={title}
+      onClick={onClick}
+      ariaLabel={title}
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
index 9b36b1541abd..c8ede31324bf 100644
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
@@ -20,7 +20,7 @@ export const SignInBackgroundMockPage = () => {
     <PageContainer>
       <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
         <PageHotkeysEffect onAddButtonClick={() => {}} />
-        <PageAddButton onClick={() => {}} />
+        <PageAddButton />
       </PageHeader>
       <PageBody>
         <RecordFieldValueSelectorContextProvider>
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 e34b993fc762..6553fc5eb2d8 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
@@ -8,12 +8,12 @@ export const PageHeaderOpenCommandMenuButton = () => {
   return (
     <Button
       Icon={IconDotsVertical}
-      dataTestId="more-showpage-button"
+      dataTestId="page-header-open-command-menu-button"
       size="small"
       variant="secondary"
       accent="default"
       shortcut="⌘K"
-      ariaLabel="More"
+      ariaLabel="Open command menu"
       onClick={openCommandMenu}
     />
   );