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 a20ff64c96..8e3864ad76 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx @@ -2,6 +2,7 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-acti import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar'; +import { RecordIndexActionMenuButtons } from '@/action-menu/components/RecordIndexActionMenuButtons'; import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown'; import { RecordIndexActionMenuEffect } from '@/action-menu/components/RecordIndexActionMenuEffect'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; @@ -17,6 +18,10 @@ export const RecordIndexActionMenu = () => { const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED'); + const isPageHeaderV2Enabled = useIsFeatureEnabled( + 'IS_PAGE_HEADER_V2_ENABLED', + ); + return ( <> {contextStoreCurrentObjectMetadataId && ( @@ -26,7 +31,11 @@ export const RecordIndexActionMenu = () => { onActionExecutedCallback: () => {}, }} > - + {isPageHeaderV2Enabled ? ( + + ) : ( + + )} diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx index fcc93f5bc5..2800c62275 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx @@ -1,5 +1,3 @@ -import styled from '@emotion/styled'; - import { RecordIndexActionMenuBarAllActionsButton } from '@/action-menu/components/RecordIndexActionMenuBarAllActionsButton'; import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry'; import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; @@ -10,6 +8,7 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import styled from '@emotion/styled'; const StyledLabel = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; @@ -33,7 +32,6 @@ export const RecordIndexActionMenuBar = () => { ); const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned); - if (contextStoreNumberOfSelectedRecords === 0) { return null; } diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx index ffa52d2059..1c73010da1 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx @@ -1,8 +1,7 @@ +import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry'; - type RecordIndexActionMenuBarEntryProps = { entry: ActionMenuEntry; }; @@ -13,11 +12,9 @@ const StyledButton = styled.div` cursor: pointer; display: flex; justify-content: center; - padding: ${({ theme }) => theme.spacing(2)}; transition: background ${({ theme }) => theme.animation.duration.fast} ease; user-select: none; - &:hover { background: ${({ theme }) => theme.background.tertiary}; } @@ -32,6 +29,7 @@ export const RecordIndexActionMenuBarEntry = ({ entry, }: RecordIndexActionMenuBarEntryProps) => { const theme = useTheme(); + return ( entry.onClick?.()}> {entry.Icon && } diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx new file mode 100644 index 0000000000..34090f9922 --- /dev/null +++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx @@ -0,0 +1,37 @@ +import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; +import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { Button } from 'twenty-ui'; + +export const RecordIndexActionMenuButtons = () => { + const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2( + contextStoreNumberOfSelectedRecordsComponentState, + ); + + const actionMenuEntries = useRecoilComponentValueV2( + actionMenuEntriesComponentSelector, + ); + + const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned); + + if (contextStoreNumberOfSelectedRecords === 0) { + return null; + } + + return ( + <> + {pinnedEntries.map((entry, index) => ( +