diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts index 25a56d6fe..12a81985a 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts @@ -8,6 +8,7 @@ import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useRecoilValue } from 'recoil'; import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui'; @@ -34,6 +35,10 @@ export const useManageFavoritesSingleRecordAction = ({ const isFavorite = !!foundFavorite; + const isPageHeaderV2Enabled = useIsFeatureEnabled( + 'IS_PAGE_HEADER_V2_ENABLED', + ); + const registerManageFavoritesSingleRecordAction = ({ position, }: { @@ -47,6 +52,7 @@ export const useManageFavoritesSingleRecordAction = ({ type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, key: 'manage-favorites-single-record', + isPinned: isPageHeaderV2Enabled, label: isFavorite ? 'Remove from favorites' : 'Add to favorites', position, Icon: isFavorite ? IconHeartOff : IconHeart, diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx index 177892d1d..ba4467d9e 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx @@ -1,6 +1,7 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter'; import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; +import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; @@ -29,6 +30,10 @@ export const RecordShowActionMenu = ({ const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED'); + const isPageHeaderV2Enabled = useIsFeatureEnabled( + 'IS_PAGE_HEADER_V2_ENABLED', + ); + // TODO: refactor RecordShowPageBaseHeader to use the context store return ( @@ -40,15 +45,19 @@ export const RecordShowActionMenu = ({ onActionExecutedCallback: () => {}, }} > - + {isPageHeaderV2Enabled ? ( + + ) : ( + + )} {isWorkflowEnabled && } diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx new file mode 100644 index 000000000..3f827c609 --- /dev/null +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx @@ -0,0 +1,33 @@ +import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; +import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { Button, useIsMobile } from 'twenty-ui'; + +export const RecordShowActionMenuButtons = () => { + const actionMenuEntries = useRecoilComponentValueV2( + actionMenuEntriesComponentSelector, + ); + + const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned); + + const isMobile = useIsMobile(); + + return ( + <> + {!isMobile && + pinnedEntries.map((entry, index) => ( +