From e2128a4ad7a8b8ef3296a25a32d193f2d37c31fc Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 3 Jun 2026 22:52:51 -0700
Subject: [PATCH] fix: lock canvas recovery while saving

---
 .../src/components/maps/LocationMapCanvas.jsx |  6 +-
 .../src/styles/pages/LocationMapManager.css   |  5 ++
 frontend/tests/location-map-manager.spec.ts   | 77 +++++++++++++++++++
 3 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/maps/LocationMapCanvas.jsx b/frontend/src/components/maps/LocationMapCanvas.jsx
index d42a8a8..4c9083c 100644
--- a/frontend/src/components/maps/LocationMapCanvas.jsx
+++ b/frontend/src/components/maps/LocationMapCanvas.jsx
@@ -39,7 +39,7 @@ export default function LocationMapCanvas({
     : 0;
   const hasNoVisibleObjects = objects.length > 0 && filters.showZones && visibleObjectCount === 0;
   const canAddFirstArea =
-    !editingLocked && mode === "edit" && objects.length === 0 && typeof onAddObject === "function";
+    mode === "edit" && objects.length === 0 && typeof onAddObject === "function";
   const canRecoverHiddenAreas =
     mode === "edit" && hasNoVisibleObjects && hiddenAreaCount > 0 && typeof onShowHiddenAreas === "function";
   const hasEmptyCanvasAction = canAddFirstArea || hiddenByZonesLayer || canRecoverHiddenAreas;
@@ -165,11 +165,13 @@ export default function LocationMapCanvas({
 
   const handleAddObject = (event) => {
     event.stopPropagation();
+    if (editingLocked) return;
     onAddObject?.();
   };
 
   const handleShowHiddenAreas = (event) => {
     event.stopPropagation();
+    if (editingLocked) return;
     onShowHiddenAreas?.();
   };
 
@@ -417,6 +419,7 @@ export default function LocationMapCanvas({
             {canAddFirstArea ? (
               <button
                 type="button"
+                disabled={editingLocked}
                 onPointerDown={(event) => event.stopPropagation()}
                 onClick={handleAddObject}
               >
@@ -433,6 +436,7 @@ export default function LocationMapCanvas({
             ) : canRecoverHiddenAreas ? (
               <button
                 type="button"
+                disabled={editingLocked}
                 onPointerDown={(event) => event.stopPropagation()}
                 onClick={handleShowHiddenAreas}
               >
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 6d9d75c..5b19359 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -345,6 +345,11 @@
   cursor: pointer;
 }
 
+.location-map-empty-canvas button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .location-map-bottom-sheet {
   max-height: 43vh;
   overflow-y: auto;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 51e9f65..c4dfa2f 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1049,6 +1049,83 @@ test("admin save progress locks draft controls", async ({ page }) => {
   await expect(page.getByRole("button", { name: "Save Draft" })).toBeDisabled();
 });
 
+test("admin save progress locks empty-canvas recovery actions", async ({ page }) => {
+  await mockMapShell(page);
+
+  let mapState = draftMapState([
+    {
+      id: 1362,
+      location_map_id: 900,
+      zone_id: 501,
+      zone_name: "Bakery",
+      type: "zone",
+      label: "Bakery",
+      x: 40,
+      y: 40,
+      width: 260,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ], true);
+  let releaseSave: () => void = () => {};
+  let saveStarted = false;
+  const saveGate = new Promise<void>((resolve) => {
+    releaseSave = resolve;
+  });
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.route("**/households/1/locations/10/map/draft", async (route) => {
+    saveStarted = true;
+    const payload = await route.request().postDataJSON();
+    await saveGate;
+    const savedObjects = (payload.objects as Array<Record<string, unknown>>).map((object, index) => ({
+      ...(mapState.draft_objects[index] || {}),
+      ...object,
+    }));
+    mapState = draftMapState(savedObjects, true);
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+  await page.getByRole("button", { name: "Continue Editing" }).click();
+  await page.getByRole("button", { name: "Edit Objects" }).click();
+  await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
+  await page.getByLabel("Visible").click();
+
+  await expect(page.getByText("No visible map areas")).toBeVisible();
+  await expect(
+    page.locator(".location-map-empty-canvas").getByRole("button", { name: "Show Hidden" })
+  ).toBeEnabled();
+  await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toBeEnabled();
+
+  await page.getByRole("button", { name: "Save Draft" }).click();
+  await expect.poll(() => saveStarted).toBe(true);
+  await expect(
+    page.locator(".location-map-empty-canvas").getByRole("button", { name: "Show Hidden" })
+  ).toBeDisabled();
+  await expect(page.getByRole("button", { name: "Show Hidden Areas (1)" })).toBeDisabled();
+
+  releaseSave();
+  await expect(page.locator(".location-map-status")).toHaveText("Draft");
+  await expect(
+    page.locator(".location-map-empty-canvas").getByRole("button", { name: "Show Hidden" })
+  ).toBeEnabled();
+});
+
 test("admin hard navigation warns when draft edits are unsaved", async ({ page }) => {
   await mockMapShell(page);