diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx
index d183e884db..b8d3a63744 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx
@@ -1,4 +1,5 @@
import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useDeletePageLayoutWidget } from '@/page-layout/hooks/useDeletePageLayoutWidget';
import { useDuplicatePageLayoutWidget } from '@/page-layout/hooks/useDuplicatePageLayoutWidget';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { OptionsDropdownMenu } from '@/ui/layout/dropdown/components/OptionsDropdownMenu';
@@ -10,7 +11,7 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho
import { useLingui } from '@lingui/react/macro';
import { useId } from 'react';
import { isDefined } from 'twenty-shared/utils';
-import { IconCopyPlus } from 'twenty-ui/display';
+import { IconCopyPlus, IconTrash } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const WidgetSettingsFooter = () => {
@@ -20,7 +21,7 @@ export const WidgetSettingsFooter = () => {
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { duplicateWidget } = useDuplicatePageLayoutWidget(pageLayoutId);
-
+ const { deletePageLayoutWidget } = useDeletePageLayoutWidget(pageLayoutId);
const editingWidgetId = useRecoilComponentValue(
pageLayoutEditingWidgetIdComponentState,
pageLayoutId,
@@ -33,6 +34,13 @@ export const WidgetSettingsFooter = () => {
closeDropdown(dropdownId);
};
+ const handleDeleteWidget = () => {
+ if (isDefined(editingWidgetId)) {
+ deletePageLayoutWidget(editingWidgetId);
+ }
+ closeDropdown(dropdownId);
+ };
+
const selectedItemId = useRecoilComponentValue(
selectedItemIdComponentState,
dropdownId,
@@ -45,7 +53,7 @@ export const WidgetSettingsFooter = () => {
key="options"
dropdownId={dropdownId}
selectableListId={dropdownId}
- selectableItemIdArray={['duplicate-widget']}
+ selectableItemIdArray={['duplicate-widget', 'delete-widget']}
>
{
LeftIcon={IconCopyPlus}
/>
+
+
+
+
,
]}
/>