From f0aa3d149bd3de532d90947560cf4b3c376e979d Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Tue, 16 Jun 2026 13:36:20 -0700
Subject: [PATCH] Added delete button for widget.

---
 client/src/pages/home/tabs/MyDashboard.jsx | 26 +++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/home/tabs/MyDashboard.jsx b/client/src/pages/home/tabs/MyDashboard.jsx
index 3f3a9eb..17ea184 100644
--- a/client/src/pages/home/tabs/MyDashboard.jsx
+++ b/client/src/pages/home/tabs/MyDashboard.jsx
@@ -1,4 +1,5 @@
-import { Box, Text, Flex } from "@chakra-ui/react";
+import { Box, Text, Flex, IconButton } from "@chakra-ui/react";
+import { X } from "lucide-react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useDashboardStore } from "@/store/useDashboardStore.jsx";
 
@@ -10,6 +11,7 @@ export default function MyDashboard() {
   const widgets = useDashboardStore(state => state.widgets);
   const isEditing = useDashboardStore(state => state.isEditing);
   const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
+  const removeWidget = useDashboardStore(state => state.removeWidget);
 
   // 2. 🛠️ Format the data for RGL
   // RGL expects a very specific array format for its layout prop
@@ -46,7 +48,29 @@ export default function MyDashboard() {
                   borderColor={isEditing ? "gray.400" : "gray.200"}
                   overflow="hidden"
                   cursor={isEditing ? "grab" : "default"}
+                  position="relative" // 3. REQUIRED so the absolute button stays inside this box
               >
+                  {/* 4. THE DELETE BUTTON */}
+                  {isEditing && (
+                      <IconButton
+                          aria-label="Remove widget"
+                          position="absolute"
+                          top={2}
+                          right={2}
+                          size="xs"
+                          bg="white"
+                          color="gray.400"
+                          border="1px solid"
+                          borderColor="gray.200"
+                          _hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
+                          zIndex={2}
+                          onClick={() => removeWidget(widget.id)}
+                          onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
+                          onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
+                      >
+                          <X size={14} />
+                      </IconButton>
+                  )}
                 {/* 🚧 Temporary Placeholder!
               Eventually, we will swap this block out for a dynamic component loader
               that looks at widget.type and loads the correct graph or table.