From 913d458fd613812c692f450528e2d55d6e81940e Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 15:17:06 -0700
Subject: [PATCH] fix: add map sheet close action

---
 .../maps/LocationMapBottomSheet.jsx           | 11 +++++++++
 frontend/src/pages/LocationMapManager.jsx     |  1 +
 .../src/styles/pages/LocationMapManager.css   | 23 +++++++++++++++++++
 frontend/tests/location-map-manager.spec.ts   | 13 ++++++++++-
 4 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index 7e05662..8ee6528 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -43,6 +43,7 @@ export default function LocationMapBottomSheet({
   onDuplicateObject,
   onDeleteObject,
   onShowHiddenAreas,
+  onClearSelection,
   onSelectZoneItem,
   onSelectUnmappedItem,
 }) {
@@ -186,6 +187,16 @@ export default function LocationMapBottomSheet({
           </div>
         </div>
         <div className="location-map-layer-actions">
+          {selectedObject ? (
+            <button
+              type="button"
+              className="location-map-sheet-close"
+              onClick={onClearSelection}
+              aria-label="Close selected map area"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          ) : null}
           {changedLayerCount ? (
             <button
               type="button"
diff --git a/frontend/src/pages/LocationMapManager.jsx b/frontend/src/pages/LocationMapManager.jsx
index 15ce50f..a79125b 100644
--- a/frontend/src/pages/LocationMapManager.jsx
+++ b/frontend/src/pages/LocationMapManager.jsx
@@ -499,6 +499,7 @@ export default function LocationMapManager() {
               onDuplicateObject={handleDuplicateObject}
               onDeleteObject={requestDeleteObject}
               onShowHiddenAreas={handleShowHiddenAreas}
+              onClearSelection={() => setSelectedObjectKey(null)}
               onSelectZoneItem={setBuyModalItem}
               onSelectUnmappedItem={setBuyModalItem}
             />
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 4a878a5..63422a5 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -471,6 +471,29 @@
   gap: 0.4rem;
 }
 
+.location-map-sheet-close {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border-light);
+  border-radius: 999px;
+  background: rgba(15, 23, 34, 0.72);
+  color: #f8fafc;
+  font-size: 1.25rem;
+  font-weight: 900;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.location-map-sheet-close:hover,
+.location-map-sheet-close:focus-visible {
+  border-color: rgba(96, 165, 250, 0.76);
+  background: rgba(59, 130, 246, 0.22);
+}
+
 .location-map-layer-toggle {
   min-height: 40px;
   display: inline-flex;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 0c843b1..80d8701 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -3821,7 +3821,18 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   expect(selectedSecondaryButtonBox.height).toBeGreaterThanOrEqual(40);
   expect(firstFieldRowBox.height).toBeLessThanOrEqual(54);
   expect(firstFlagButtonBox.height).toBeGreaterThanOrEqual(40);
-  await page.getByRole("button", { name: "View" }).click();
+  const closeSelectedButton = page.getByRole("button", { name: "Close selected map area" });
+  await expect(closeSelectedButton).toBeVisible();
+  const closeSelectedButtonBox = await closeSelectedButton.boundingBox();
+  expect(closeSelectedButtonBox).not.toBeNull();
+  if (!closeSelectedButtonBox) throw new Error("Selected area close button was not measurable");
+  expect(closeSelectedButtonBox.width).toBeGreaterThanOrEqual(40);
+  expect(closeSelectedButtonBox.height).toBeGreaterThanOrEqual(40);
+  await closeSelectedButton.click();
+  await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Areas");
+  await expect(page.getByRole("button", { name: "Save Draft" })).toBeDisabled();
+  await page.getByRole("button", { name: "View", exact: true }).click();
   await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
 });