From 9f4420b23c1a6f41456f62b16aae6069bebb3a57 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 15:03:03 -0700
Subject: [PATCH] fix: close map layers on mode switches

---
 .../src/hooks/useLocationMapViewControls.js   |  8 ++-
 frontend/src/pages/LocationMapManager.jsx     |  1 +
 frontend/tests/location-map-manager.spec.ts   | 68 +++++++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/useLocationMapViewControls.js b/frontend/src/hooks/useLocationMapViewControls.js
index 7db0051..cf8295d 100644
--- a/frontend/src/hooks/useLocationMapViewControls.js
+++ b/frontend/src/hooks/useLocationMapViewControls.js
@@ -19,6 +19,7 @@ export default function useLocationMapViewControls({
   setFuture,
   setHasUnsavedChanges,
   setHistory,
+  setLayersOpen,
   setMode,
   setObjects,
   setPreviewDraft,
@@ -72,13 +73,15 @@ export default function useLocationMapViewControls({
   const handlePreviewDraft = useCallback(() => {
     setMode("view");
     setEditorTool("pan");
+    setLayersOpen(false);
     setPreviewDraft(true);
     setSelectedObjectKey(null);
-  }, [setEditorTool, setMode, setPreviewDraft, setSelectedObjectKey]);
+  }, [setEditorTool, setLayersOpen, setMode, setPreviewDraft, setSelectedObjectKey]);
 
   const handleViewMode = useCallback(() => {
     setMode("view");
     setEditorTool("pan");
+    setLayersOpen(false);
     if (hasUnsavedChanges) {
       setPreviewDraft(true);
       setSelectedObjectKey(null);
@@ -92,6 +95,7 @@ export default function useLocationMapViewControls({
     hasUnsavedChanges,
     mapState,
     setEditorTool,
+    setLayersOpen,
     setMode,
     setPreviewDraft,
     setSelectedObjectKey,
@@ -101,6 +105,7 @@ export default function useLocationMapViewControls({
   const handleEditMode = useCallback(() => {
     setMode("edit");
     setEditorTool("edit");
+    setLayersOpen(false);
     setPreviewDraft(true);
     if (!previewDraft && mapState && !hasUnsavedChanges) {
       syncMapDraftFromState(mapState, "edit", true);
@@ -110,6 +115,7 @@ export default function useLocationMapViewControls({
     mapState,
     previewDraft,
     setEditorTool,
+    setLayersOpen,
     setMode,
     setPreviewDraft,
     syncMapDraftFromState,
diff --git a/frontend/src/pages/LocationMapManager.jsx b/frontend/src/pages/LocationMapManager.jsx
index 26ca2c2..15ce50f 100644
--- a/frontend/src/pages/LocationMapManager.jsx
+++ b/frontend/src/pages/LocationMapManager.jsx
@@ -340,6 +340,7 @@ export default function LocationMapManager() {
     setFuture,
     setHasUnsavedChanges,
     setHistory,
+    setLayersOpen,
     setMode,
     setObjects,
     setPreviewDraft,
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 8301734..0c843b1 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1182,6 +1182,74 @@ test("admin status follows the visible map when a saved draft exists", async ({
   await expect(page.locator(".location-map-object", { hasText: "Live Bakery" })).toBeVisible();
 });
 
+test("mode switches close open map layers without resetting filters", async ({ page }) => {
+  await mockMapShell(page);
+
+  const publishedObjects = [
+    {
+      id: 1241,
+      location_map_id: 901,
+      zone_id: 501,
+      zone_name: "Bakery",
+      type: "zone",
+      label: "Live Bakery",
+      x: 40,
+      y: 40,
+      width: 260,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ];
+  const draftObjects = [
+    {
+      ...publishedObjects[0],
+      id: 1242,
+      location_map_id: 900,
+      label: "Draft Bakery",
+      x: 80,
+      y: 80,
+    },
+  ];
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(draftAndPublishedMapState(draftObjects, publishedObjects, true)),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+
+  await page.getByRole("button", { name: "Layers" }).click();
+  await page.getByRole("button", { name: "Pins" }).click();
+  await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "true");
+  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+
+  await page.getByRole("button", { name: "Edit Draft" }).click();
+
+  await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
+  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+
+  await page.getByRole("button", { name: "Layers, 1 changed" }).click();
+  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+  await page.getByRole("button", { name: "View", exact: true }).click();
+
+  await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
+  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+
+  await page.getByRole("button", { name: "Edit Draft" }).click();
+  await page.getByRole("button", { name: "Layers, 1 changed" }).click();
+  await expect(page.locator(".location-map-display-panel")).toBeVisible();
+  await page.getByRole("button", { name: "Preview Draft" }).click();
+
+  await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
+  await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
+});
+
 test("mobile keeps draft preview status compact in the topbar", async ({ page }) => {
   await page.setViewportSize({ width: 409, height: 838 });
   await mockMapShell(page);