From c5d2a89e36d7ee30ebbb8b12b80b6e8c4336db5e Mon Sep 17 00:00:00 2001
From: AjayGol <ajaygoldev@gmail.com>
Date: Tue, 7 Apr 2026 17:59:02 +0530
Subject: [PATCH] Implemented delete button on section blocks

---
 src/site/admin/ContentEditor.tsx | 15 +++++++++++++++
 src/site/admin/SectionBlock.tsx  | 19 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/site/admin/ContentEditor.tsx b/src/site/admin/ContentEditor.tsx
index 716dfa7d..9990bd9d 100644
--- a/src/site/admin/ContentEditor.tsx
+++ b/src/site/admin/ContentEditor.tsx
@@ -199,6 +199,7 @@ export function ContentEditor(props: Props) {
             section={section}
             churchSettings={churchSettings}
             onEdit={handleSectionEdit}
+            onDelete={handleSectionDelete}
             onMove={() => {
               loadDataInternal("After moving section");
             }}
@@ -244,6 +245,20 @@ export function ContentEditor(props: Props) {
     } else if (e) setEditElement(e);
   };
 
+  const handleSectionDelete = async (s: SectionInterface) => {
+    if (!s?.id) return;
+    if (window.confirm("Remove this block from the page?")) {
+      if (container) saveSnapshot(container, "Before removing section block");
+      try {
+        await ApiHelper.delete(`/sections/${s.id}`, "ContentApi");
+        loadDataInternal("After removing section block");
+      } catch (err) {
+        console.error("Failed to remove section block:", err);
+        window.alert("Unable to remove this block from the page. Please try again.");
+      }
+    }
+  };
+
   const handleElementClick = (elementId: string) => {
     setSelectedElementId(elementId);
   };
diff --git a/src/site/admin/SectionBlock.tsx b/src/site/admin/SectionBlock.tsx
index a4d98d2b..f980916c 100644
--- a/src/site/admin/SectionBlock.tsx
+++ b/src/site/admin/SectionBlock.tsx
@@ -11,13 +11,14 @@ interface Props {
   churchId?: string;
   churchSettings: any;
   onEdit?: (section: SectionInterface, element: ElementInterface) => void
+  onDelete?: (section: SectionInterface) => void
   onMove?: () => void
 }
 
 export const SectionBlock: React.FC<Props> = props => {
 
   const getEdit = () => {
-    if (props.onEdit) {
+    if (props.onEdit || props.onDelete) {
       return (
         <div className="sectionActions">
           <table style={{ float: "right" }}>
@@ -29,6 +30,22 @@ export const SectionBlock: React.FC<Props> = props => {
                     <Button size="small" variant="outlined" startIcon={<Icon>edit</Icon>} onClick={() => props.onEdit(props.section, null)} sx={{ minWidth: "auto" }}>Edit</Button>
                   </div>
                 </td>
+                {props.onDelete && (
+                  <td>
+                    <div className="sectionEditButton">
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="error"
+                        startIcon={<Icon>delete</Icon>}
+                        onClick={(e) => { e.stopPropagation(); props.onDelete(props.section); }}
+                        sx={{ minWidth: "auto" }}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  </td>
+                )}
               </tr>
             </tbody>
           </table>