From 493b0b3d34eb23c49b0a6e5c8d41b562fd6825a3 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 01:05:24 -0700
Subject: [PATCH] fix: expose map layer reset

---
 .../maps/LocationMapBottomSheet.jsx           | 38 ++++++++++---------
 .../src/styles/pages/LocationMapManager.css   |  9 ++++-
 frontend/tests/location-map-manager.spec.ts   |  5 ++-
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index 3929af6..230d0d7 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -97,6 +97,7 @@ export default function LocationMapBottomSheet({
   const maxHeight = Math.max(40, Math.round(mapSize?.height || selectedHeight));
   const saveDraftLabel = savingAction === "save" ? "Saving..." : "Save Draft";
   const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
+  const resetLayerFilters = () => setFilters({ ...DEFAULT_MAP_FILTERS });
   const showSelectedZoneItems = () => {
     setFilters((current) => ({
       ...current,
@@ -162,31 +163,34 @@ export default function LocationMapBottomSheet({
             <span>{sheetDescription}</span>
           ) : null}
         </div>
-        <button
-          type="button"
-          className={`location-map-layer-toggle ${layersOpen ? "active" : ""}`}
-          onClick={() => setLayersOpen((current) => !current)}
-          aria-expanded={layersOpen}
-          aria-label={changedLayerCount ? `Layers, ${changedLayerCount} changed` : "Layers"}
-        >
-          Layers
-          {changedLayerCount ? (
-            <span className="location-map-layer-count" aria-hidden="true">{changedLayerCount}</span>
-          ) : null}
-        </button>
-      </div>
-
-      {layersOpen ? (
-        <div className="location-map-display-panel">
+        <div className="location-map-layer-actions">
           {changedLayerCount ? (
             <button
               type="button"
               className="location-map-layer-reset"
-              onClick={() => setFilters({ ...DEFAULT_MAP_FILTERS })}
+              onClick={resetLayerFilters}
+              aria-label="Reset layer filters"
             >
               Reset
             </button>
           ) : null}
+          <button
+            type="button"
+            className={`location-map-layer-toggle ${layersOpen ? "active" : ""}`}
+            onClick={() => setLayersOpen((current) => !current)}
+            aria-expanded={layersOpen}
+            aria-label={changedLayerCount ? `Layers, ${changedLayerCount} changed` : "Layers"}
+          >
+            Layers
+            {changedLayerCount ? (
+              <span className="location-map-layer-count" aria-hidden="true">{changedLayerCount}</span>
+            ) : null}
+          </button>
+        </div>
+      </div>
+
+      {layersOpen ? (
+        <div className="location-map-display-panel">
           <div className="location-map-display-controls">
             {DISPLAY_CONTROLS.map(([key, label]) => (
               <label key={key}>
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index e07e2b7..c368675 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -412,6 +412,13 @@
   text-align: center;
 }
 
+.location-map-layer-actions {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
 .location-map-layer-toggle {
   min-height: 40px;
   display: inline-flex;
@@ -452,8 +459,6 @@
 
 .location-map-layer-reset {
   min-height: 36px;
-  width: fit-content;
-  justify-self: end;
   padding: 0.35rem 0.65rem;
   border: 1px solid var(--color-border-light);
   border-radius: 999px;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 83ce83d..5b34b23 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1403,8 +1403,11 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
   await expect(produceArea.locator(".location-map-count")).toHaveText("2 items");
   await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "92");
 
-  await page.getByRole("button", { name: "Reset" }).click();
+  await page.getByRole("button", { name: "Layers, 1 changed" }).click();
+  await expect(page.getByRole("button", { name: "Reset layer filters" })).toBeVisible();
+  await page.getByRole("button", { name: "Reset layer filters" }).click();
   await expect(page.getByRole("button", { name: "Layers" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Reset layer filters" })).toHaveCount(0);
   await expect(produceArea.locator(".location-map-label tspan")).toHaveCount(2);
   await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "116");
 });