update RecordIndexActionMenuBar

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx

@@ -100,6 +100,7 @@ export const DeleteRecordsActionEffect = ({
         position,
         Icon: IconTrash,
         accent: 'danger',
+        isPinned: true,
         onClick: () => {
           setIsDeleteRecordsModalOpen(true);
         },

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx

@@ -31,7 +31,9 @@ export const RecordIndexActionMenuBar = () => {
     actionMenuEntriesComponentSelector,
   );
 
-  if (actionMenuEntries.length === 0) {
+  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+
+  if (pinnedEntries.length === 0) {
     return null;
   }
 
@@ -43,7 +45,7 @@ export const RecordIndexActionMenuBar = () => {
       }}
     >
       <StyledLabel>{contextStoreNumberOfSelectedRecords} selected:</StyledLabel>
-      {actionMenuEntries.map((entry, index) => (
+      {pinnedEntries.map((entry, index) => (
         <RecordIndexActionMenuBarEntry key={index} entry={entry} />
       ))}
       <RecordIndexActionMenuBarAllActionsButton />

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx

@@ -2,18 +2,14 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
 type RecordIndexActionMenuBarEntryProps = {
   entry: ActionMenuEntry;
 };
 
-const StyledButton = styled.div<{ accent: MenuItemAccent }>`
+const StyledButton = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${(props) =>
-    props.accent === 'danger'
-      ? props.theme.color.red
-      : props.theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.secondary};
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -23,10 +19,7 @@ const StyledButton = styled.div<{ accent: MenuItemAccent }>`
   user-select: none;
 
   &:hover {
-    background: ${({ theme, accent }) =>
-      accent === 'danger'
-        ? theme.background.danger
-        : theme.background.tertiary};
+    background: ${({ theme }) => theme.background.tertiary};
   }
 `;
 
@@ -40,10 +33,7 @@ export const RecordIndexActionMenuBarEntry = ({
 }: RecordIndexActionMenuBarEntryProps) => {
   const theme = useTheme();
   return (
-    <StyledButton
-      accent={entry.accent ?? 'default'}
-      onClick={() => entry.onClick?.()}
-    >
+    <StyledButton onClick={() => entry.onClick?.()}>
       {entry.Icon && <entry.Icon size={theme.icon.size.md} />}
       <StyledButtonLabel>{entry.label}</StyledButtonLabel>
     </StyledButton>

packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts

@@ -8,6 +8,7 @@ export type ActionMenuEntry = {
   label: string;
   position: number;
   Icon: IconComponent;
+  isPinned?: boolean;
   accent?: MenuItemAccent;
   onClick?: (event?: MouseEvent<HTMLElement>) => void;
   ConfirmationModal?: ReactNode;