From d5cfd220144cb5a17226a5f7545a2947b54def52 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 07:53:12 -0700
Subject: [PATCH] fix: compact map setup states

---
 .../components/maps/LocationMapSetupPanel.jsx | 30 +++++++-------
 .../src/styles/pages/LocationMapManager.css   | 39 ++++++++++++-------
 frontend/tests/location-map-manager.spec.ts   | 22 ++++++++---
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapSetupPanel.jsx b/frontend/src/components/maps/LocationMapSetupPanel.jsx
index f0874b0..d41d3fb 100644
--- a/frontend/src/components/maps/LocationMapSetupPanel.jsx
+++ b/frontend/src/components/maps/LocationMapSetupPanel.jsx
@@ -10,14 +10,12 @@ export default function LocationMapSetupPanel({
   onCreateFromZones,
   onCreateBlank,
 }) {
-  const description = hasAnyMap
-    ? canManage
-      ? "A draft map exists for this location."
-      : "A map draft exists for this location, but it has not been published yet."
-    : canManage
-      ? "Create a rough map for this store location."
-      : "A household admin has not published a map yet.";
   const hasZones = zoneCount > 0;
+  const status = hasAnyMap
+    ? "Draft"
+    : canManage
+      ? "Not started"
+      : "Not published";
   const createFromZonesLabel = hasZones
     ? `Create From ${zoneCount} Zone${zoneCount === 1 ? "" : "s"}`
     : "Create From Zones";
@@ -28,7 +26,18 @@ export default function LocationMapSetupPanel({
   return (
     <section className="location-map-setup">
       <h2>{hasAnyMap ? "Draft Map" : "No Map"}</h2>
-      <p>{description}</p>
+      <div className="location-map-setup-rows" role="group" aria-label="Map setup status">
+        <div className="location-map-setup-row">
+          <span>Status</span>
+          <strong>{status}</strong>
+        </div>
+        {canManage ? (
+          <div className="location-map-setup-row">
+            <span>Zones</span>
+            <strong>{zoneCount}</strong>
+          </div>
+        ) : null}
+      </div>
       {hasAnyMap && canManage ? (
         <div className="location-map-setup-actions">
           <button type="button" className="btn-primary" onClick={onContinue} disabled={saving}>
@@ -43,11 +52,6 @@ export default function LocationMapSetupPanel({
         </div>
       ) : !hasAnyMap && canManage ? (
         <div className="location-map-setup-actions">
-          {!hasZones ? (
-            <p className="location-map-setup-note">
-              No zones are available yet. Create a blank map now, or add zones first for an automatic starter layout.
-            </p>
-          ) : null}
           {!hasZones ? (
             <>
               <button type="button" className="btn-primary" onClick={onCreateBlank} disabled={saving}>
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index d7c11f7..774a1f1 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -777,9 +777,33 @@
   font-size: 1.35rem;
 }
 
-.location-map-setup p {
-  margin-bottom: 1rem;
+.location-map-setup-rows {
+  display: grid;
+  gap: 0.4rem;
+  margin-bottom: 0.9rem;
+}
+
+.location-map-setup-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-height: 40px;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(8, 15, 25, 0.42);
+}
+
+.location-map-setup-row span {
   color: #9fb3c8;
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.location-map-setup-row strong {
+  color: #f8fafc;
+  font-weight: 900;
 }
 
 .location-map-setup-actions {
@@ -787,17 +811,6 @@
   gap: 0.6rem;
 }
 
-.location-map-setup-note {
-  margin: 0;
-  padding: 0.6rem 0.7rem;
-  border: 1px solid rgba(245, 158, 11, 0.28);
-  border-radius: 8px;
-  background: rgba(245, 158, 11, 0.1);
-  color: #f8fafc;
-  font-size: 0.9rem;
-  font-weight: 700;
-}
-
 .location-map-loading {
   margin: 3rem auto;
   color: #9fb3c8;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index a33f652..4ef5b1a 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -393,7 +393,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await expect(page.getByText("loose batteries")).toBeVisible();
 });
 
-test("admin setup explains when no zones exist yet", async ({ page }) => {
+test("admin setup uses compact status rows when no zones exist yet", async ({ page }) => {
   await mockMapShell(page);
 
   await page.route("**/households/1/locations/10/map", async (route) => {
@@ -412,7 +412,12 @@ test("admin setup explains when no zones exist yet", async ({ page }) => {
   await page.goto("/stores/100/locations/10/map");
 
   await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
-  await expect(page.getByText("No zones are available yet.")).toBeVisible();
+  const setupStatus = page.getByRole("group", { name: "Map setup status" });
+  await expect(setupStatus.getByText("Status")).toBeVisible();
+  await expect(setupStatus.getByText("Not started")).toBeVisible();
+  await expect(setupStatus.getByText("Zones")).toBeVisible();
+  await expect(setupStatus.getByText("0")).toBeVisible();
+  await expect(page.getByText("No zones are available yet.")).toHaveCount(0);
   await expect(page.getByRole("button", { name: "Create From Zones" })).toBeDisabled();
   await expect(page.getByRole("button", { name: "Create Blank Map" })).toBeEnabled();
   const blankButtonBox = await page.getByRole("button", { name: "Create Blank Map" }).boundingBox();
@@ -2826,8 +2831,12 @@ test("members see a clean empty state when no map is published", async ({ page }
   await page.goto("/stores/100/locations/10/map");
 
   await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
-  await expect(page.getByText("A household admin has not published a map yet.")).toBeVisible();
-  await expect(page.getByText("Create a rough map for this store location.")).toHaveCount(0);
+  const setupStatus = page.getByRole("group", { name: "Map setup status" });
+  await expect(setupStatus.getByText("Status")).toBeVisible();
+  await expect(setupStatus.getByText("Not published")).toBeVisible();
+  await expect(setupStatus.getByText("Zones")).toHaveCount(0);
+  await expect(page.getByText("A household admin has not published a map yet.")).toHaveCount(0);
+  await expect(page.getByText("Not started")).toHaveCount(0);
   await expect(page.getByRole("button", { name: /Create From/ })).toHaveCount(0);
   await expect(page.getByRole("button", { name: "Create Blank Map" })).toHaveCount(0);
   await expect(page.getByLabel("Map controls")).toHaveCount(0);
@@ -2866,7 +2875,10 @@ test("members do not see unpublished draft maps", async ({ page }) => {
   await page.goto("/stores/100/locations/10/map");
 
   await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
-  await expect(page.getByText("A household admin has not published a map yet.")).toBeVisible();
+  const setupStatus = page.getByRole("group", { name: "Map setup status" });
+  await expect(setupStatus.getByText("Status")).toBeVisible();
+  await expect(setupStatus.getByText("Not published")).toBeVisible();
+  await expect(page.getByText("A household admin has not published a map yet.")).toHaveCount(0);
   await expect(page.getByRole("heading", { name: "Draft Map" })).toHaveCount(0);
   await expect(page.getByText("A map draft exists for this location")).toHaveCount(0);
   await expect(page.getByText("Draft Bakery")).toHaveCount(0);