From 0b2f4cdb57e2831e0a592c7ccdf37ddd46190d39 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 2 Apr 2026 09:15:19 +0200
Subject: [PATCH] Add delete widget action in fields widget side panel (#19167)

## Context
Add a new "Manage" section in FIELDS widget side panel with a "Delete
widget" action

Next step: Deleting a non-custom fields widget should be reversible
("Reset to default" followup)

<img width="1286" height="398" alt="Screenshot 2026-03-31 at 15 17 31"
src="https://github.com/user-attachments/assets/9ee63c14-52f1-470e-9112-4538271dc6fc"
/>
---
 .../SidePanelPageLayoutFieldsSettings.tsx     | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx
index e73a224819..f8eb7b7f65 100644
--- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx
@@ -1,5 +1,6 @@
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle';
+import { useDeletePageLayoutWidget } from '@/page-layout/hooks/useDeletePageLayoutWidget';
 import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
 import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
 import { SidePanelList } from '@/side-panel/components/SidePanelList';
@@ -14,7 +15,11 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, IconLayoutSidebarRight } from 'twenty-ui/display';
+import {
+  IconChevronDown,
+  IconLayoutSidebarRight,
+  IconTrash,
+} from 'twenty-ui/display';
 import { type FieldsConfiguration } from '~/generated-metadata/graphql';
 
 const StyledContainer = styled.div`
@@ -39,6 +44,8 @@ export const SidePanelPageLayoutFieldsSettings = () => {
   const { updateCurrentWidgetConfig } =
     useUpdateCurrentWidgetConfig(pageLayoutId);
 
+  const { deletePageLayoutWidget } = useDeletePageLayoutWidget(pageLayoutId);
+
   const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
 
   const fieldsConfiguration = widgetInEditMode?.configuration as
@@ -75,6 +82,10 @@ export const SidePanelPageLayoutFieldsSettings = () => {
     });
   };
 
+  const handleDelete = () => {
+    deletePageLayoutWidget(widgetInEditMode.id);
+  };
+
   const selectableItemIds = [
     'layout',
     'new-field-default-visibility',
@@ -124,6 +135,16 @@ export const SidePanelPageLayoutFieldsSettings = () => {
               widgetId={widgetInEditMode.id}
             />
           </SidePanelGroup>
+          <SidePanelGroup heading={t`Manage`}>
+            <SelectableListItem itemId="delete" onEnter={handleDelete}>
+              <CommandMenuItem
+                id="delete"
+                Icon={IconTrash}
+                label={t`Delete widget`}
+                onClick={handleDelete}
+              />
+            </SelectableListItem>
+          </SidePanelGroup>
         </SidePanelList>
       </StyledSidePanelContainer>
       <WidgetSettingsFooter pageLayoutId={pageLayoutId} />