From 691d27fe1bab701ed2feaaca1846e6b2d2cc722c Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 21:14:45 -0700
Subject: [PATCH] fix: clarify map area toggle states

---
 .../maps/LocationMapBottomSheetSections.jsx   | 12 +++++++--
 .../src/styles/pages/LocationMapManager.css   | 25 ++++++++++++++++++-
 frontend/tests/location-map-manager.spec.ts   |  9 +++++--
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
index 7251555..eb832cb 100644
--- a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
@@ -167,7 +167,11 @@ export function SelectedMapObjectForm({
           disabled={saving}
           onClick={() => onObjectField("visible", selectedObject.visible === false)}
         >
-          Visible
+          <span
+            className={`location-map-object-flag-state ${selectedObject.visible !== false ? "is-on" : ""}`}
+            aria-hidden="true"
+          />
+          <span className="location-map-object-flag-label">Visible</span>
         </button>
         <button
           type="button"
@@ -176,7 +180,11 @@ export function SelectedMapObjectForm({
           disabled={saving}
           onClick={() => onObjectField("locked", !selectedObject.locked)}
         >
-          Locked
+          <span
+            className={`location-map-object-flag-state ${selectedObject.locked ? "is-on" : ""}`}
+            aria-hidden="true"
+          />
+          <span className="location-map-object-flag-label">Locked</span>
         </button>
       </div>
       <div className="location-map-editor-actions">
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 8baf10d..8c28130 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -762,7 +762,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.35rem 0.5rem;
+  gap: 0.4rem;
+  padding: 0.35rem 0.6rem;
   border: 1px solid var(--color-border-light);
   border-radius: 999px;
   background: rgba(15, 23, 34, 0.58);
@@ -771,6 +772,28 @@
   cursor: pointer;
 }
 
+.location-map-object-flag-state {
+  flex: 0 0 auto;
+  width: 0.85rem;
+  height: 0.85rem;
+  border: 1px solid rgba(148, 163, 184, 0.68);
+  border-radius: 999px;
+  background: rgba(2, 6, 23, 0.3);
+}
+
+.location-map-object-flag-state.is-on {
+  border-color: rgba(96, 165, 250, 0.95);
+  background: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16);
+}
+
+.location-map-object-flag-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .location-map-object-flags button.active {
   border-color: rgba(96, 165, 250, 0.76);
   background: rgba(59, 130, 246, 0.32);
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 88c5edb..1c33dbf 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -4118,8 +4118,13 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   const objectFlagButtons = page.locator(".location-map-object-flags").getByRole("button");
   await expect(objectFlagButtons).toHaveCount(2);
   await expect(page.locator(".location-map-object-flags input[type='checkbox']")).toHaveCount(0);
-  await expect(page.getByRole("button", { name: "Visible" })).toHaveAttribute("aria-pressed", "true");
-  await expect(page.getByRole("button", { name: "Locked" })).toHaveAttribute("aria-pressed", "false");
+  const visibleFlag = page.getByRole("button", { name: "Visible" });
+  const lockedFlag = page.getByRole("button", { name: "Locked" });
+  await expect(page.locator(".location-map-object-flag-state")).toHaveCount(2);
+  await expect(visibleFlag).toHaveAttribute("aria-pressed", "true");
+  await expect(visibleFlag.locator(".location-map-object-flag-state.is-on")).toHaveCount(1);
+  await expect(lockedFlag).toHaveAttribute("aria-pressed", "false");
+  await expect(lockedFlag.locator(".location-map-object-flag-state.is-on")).toHaveCount(0);
   const selectedPrimaryActions = page.locator(".location-map-selected-primary-actions");
   const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions");
   await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toHaveCount(0);