fix: buy map zone items in place

frontend/src/components/maps/LocationMapBottomSheet.jsx

@@ -43,6 +43,7 @@ export default function LocationMapBottomSheet({
   onDuplicateObject,
   onDeleteObject,
   onShowHiddenAreas,
+  onSelectZoneItem,
 }) {
   const selectedTitle = getMapObjectDisplayLabel(selectedObject);
   const selectedZoneId = objectZoneId(selectedObject);
@@ -271,6 +272,7 @@ export default function LocationMapBottomSheet({
           hasHiddenSelectedItems={hasHiddenSelectedItems}
           hiddenSelectedItemCount={hiddenSelectedItemCount}
           onShowSelectedZoneItems={showSelectedZoneItems}
+          onSelectZoneItem={onSelectZoneItem}
         />
       ) : null}
 

frontend/src/components/maps/LocationMapBottomSheetSections.jsx

@@ -114,6 +114,7 @@ export function SelectedZoneItemsPanel({
   hasHiddenSelectedItems,
   hiddenSelectedItemCount,
   onShowSelectedZoneItems,
+  onSelectZoneItem,
 }) {
   if (selectedZoneItems.length === 0) {
     return (
@@ -139,8 +140,15 @@ export function SelectedZoneItemsPanel({
       <ul>
         {selectedZoneItems.map((item) => (
           <li key={item.id}>
-            <span>{item.item_name}</span>
-            <small>x{item.quantity}</small>
+            <button
+              type="button"
+              className="location-map-zone-item-button"
+              onClick={() => onSelectZoneItem?.(item)}
+              aria-label={`Mark ${item.item_name} bought`}
+            >
+              <span>{item.item_name}</span>
+              <small>x{item.quantity}</small>
+            </button>
           </li>
         ))}
       </ul>

frontend/src/pages/LocationMapManager.jsx

@@ -1,5 +1,6 @@
-import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { getItemByName, markBought } from "../api/list";
 import { AuthContext } from "../context/AuthContext";
 import { HouseholdContext } from "../context/HouseholdContext";
 import { StoreContext } from "../context/StoreContext";
@@ -12,6 +13,7 @@ import {
 } from "../components/maps/LocationMapStateViews";
 import LocationMapToolbar from "../components/maps/LocationMapToolbar";
 import LocationMapTopbar from "../components/maps/LocationMapTopbar";
+import ConfirmBuyModal from "../components/modals/ConfirmBuyModal";
 import ConfirmSlideModal from "../components/modals/ConfirmSlideModal";
 import useActionToast from "../hooks/useActionToast";
 import useLocationMapDraftActions from "../hooks/useLocationMapDraftActions";
@@ -29,10 +31,17 @@ import {
   mapForMode,
   unmappedItems,
 } from "../lib/locationMapUtils";
+import getApiErrorMessage from "../lib/getApiErrorMessage";
 import "../styles/pages/LocationMapManager.css";
 
 const EMPTY_MAP_ITEMS = [];
 
+function getNextMapBuyItem(items, currentIndex, excludedItemId) {
+  const remainingItems = items.filter((item) => item.id !== excludedItemId);
+  if (!remainingItems.length) return null;
+  return remainingItems[Math.min(Math.max(currentIndex, 0), remainingItems.length - 1)];
+}
+
 export default function LocationMapManager() {
   const { storeId, locationId } = useParams();
   const navigate = useNavigate();
@@ -42,6 +51,7 @@ export default function LocationMapManager() {
   const { username } = useContext(AuthContext);
   const { activeHousehold, loading: householdLoading, hasLoaded } = useContext(HouseholdContext);
   const { stores, activeStore, setActiveStore } = useContext(StoreContext);
+  const [buyModalItem, setBuyModalItem] = useState(null);
 
   const {
     beginSaving,
@@ -134,6 +144,59 @@ export default function LocationMapManager() {
   );
   const shouldGuardLeave = canManage && hasUnsavedChanges;
 
+  const updateMapItems = useCallback((updater) => {
+    setMapState((currentState) => {
+      if (!currentState) return currentState;
+      const currentItems = currentState.items || EMPTY_MAP_ITEMS;
+      return { ...currentState, items: updater(currentItems) };
+    });
+  }, [setMapState]);
+
+  const handleMapBuyCancel = useCallback(() => {
+    setBuyModalItem(null);
+  }, []);
+
+  const handleMapBuyNavigate = useCallback((item) => {
+    setBuyModalItem(item);
+  }, []);
+
+  const handleMapBuyConfirm = useCallback(async (quantity) => {
+    if (!activeHousehold?.id || !locationId || !buyModalItem) {
+      setBuyModalItem(null);
+      return;
+    }
+
+    const item = selectedZoneItems.find((candidate) => candidate.id === buyModalItem.id) || buyModalItem;
+
+    try {
+      const currentIndex = selectedZoneItems.findIndex((candidate) => candidate.id === item.id);
+      const resolvedIndex = currentIndex >= 0 ? currentIndex : 0;
+
+      await markBought(activeHousehold.id, locationId, item.item_name, quantity, true);
+
+      if (quantity >= item.quantity) {
+        updateMapItems((currentItems) => currentItems.filter((candidate) => candidate.id !== item.id));
+        setBuyModalItem(getNextMapBuyItem(selectedZoneItems, resolvedIndex, item.id));
+      } else {
+        const response = await getItemByName(activeHousehold.id, locationId, item.item_name);
+        const updatedItem = response.data || {
+          ...item,
+          quantity: Math.max(1, Number(item.quantity || 1) - Number(quantity || 1)),
+        };
+
+        updateMapItems((currentItems) =>
+          currentItems.map((candidate) => (candidate.id === item.id ? updatedItem : candidate))
+        );
+        setBuyModalItem(updatedItem);
+      }
+
+      toast.success("Marked item bought", `Marked item ${item.item_name} as bought`);
+    } catch (error) {
+      const message = getApiErrorMessage(error, "Failed to mark item as bought");
+      toast.error("Mark item bought failed", `Mark item bought failed: ${message}`);
+    }
+  }, [activeHousehold?.id, buyModalItem, locationId, selectedZoneItems, toast, updateMapItems]);
+
   const mapSize = useMemo(
     () => ({
       width: mapDraft.width || activeMap?.width || DEFAULT_MAP_SIZE.width,
@@ -371,11 +434,22 @@ export default function LocationMapManager() {
               onDuplicateObject={handleDuplicateObject}
               onDeleteObject={requestDeleteObject}
               onShowHiddenAreas={handleShowHiddenAreas}
+              onSelectZoneItem={setBuyModalItem}
             />
           </>
         )}
       </main>
 
+      {buyModalItem ? (
+        <ConfirmBuyModal
+          item={buyModalItem}
+          allItems={selectedZoneItems}
+          onNavigate={handleMapBuyNavigate}
+          onCancel={handleMapBuyCancel}
+          onConfirm={handleMapBuyConfirm}
+        />
+      ) : null}
+
       <ConfirmSlideModal
         isOpen={Boolean(pendingDeleteObject)}
         title={`Delete ${getMapObjectDisplayLabel(pendingDeleteObject, "this map area")}?`}

frontend/src/styles/pages/LocationMapManager.css

@@ -752,9 +752,45 @@
   color: #f8fafc;
 }
 
+.location-map-zone-items li {
+  padding: 0;
+  overflow: hidden;
+}
+
+.location-map-zone-item-button {
+  width: 100%;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.35rem 0.55rem;
+  border: 0;
+  background: transparent;
+  color: #f8fafc;
+  font: inherit;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.location-map-zone-item-button span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.location-map-zone-item-button:hover,
+.location-map-zone-item-button:focus-visible {
+  outline: none;
+  background: rgba(96, 165, 250, 0.16);
+}
+
 .location-map-zone-items small {
   color: #cbd5e1;
   font-weight: 800;
+  white-space: nowrap;
 }
 
 .location-map-unmapped-list {

frontend/tests/location-map-manager.spec.ts

@@ -2181,6 +2181,89 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
   await expect(page.getByText("loose batteries")).toBeVisible();
 });
 
+test("viewer can buy selected zone items from the map", async ({ page }) => {
+  await mockMapShell(page);
+
+  const mapState = publishedMapState([
+    {
+      id: 1532,
+      location_map_id: 901,
+      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);
+  const boughtPayloads: Array<Record<string, unknown>> = [];
+
+  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/list/item", async (route) => {
+    if (route.request().method() !== "PATCH") {
+      await route.fulfill({ status: 404, contentType: "application/json", body: "{}" });
+      return;
+    }
+
+    boughtPayloads.push(await route.request().postDataJSON());
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ success: true }),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+  const bakeryArea = page.locator('[data-object-key="1532"]');
+  await bakeryArea.locator("rect").first().click();
+
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("2 items");
+  await expect(bakeryArea.locator(".location-map-count")).toHaveText("2 items");
+
+  await page.getByRole("button", { name: "Mark french bread bought" }).click();
+  await expect(page.locator(".confirm-buy-modal")).toBeVisible();
+  await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
+  await page.getByRole("button", { name: "Mark as Bought" }).click();
+
+  await expect.poll(() => boughtPayloads.length).toBe(1);
+  expect(boughtPayloads[0]).toMatchObject({
+    item_name: "french bread",
+    bought: true,
+    quantity_bought: 1,
+  });
+  await expect(page.locator(".confirm-buy-item-name")).toHaveText("sourdough");
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("1 item");
+  await expect(bakeryArea.locator(".location-map-count")).toHaveText("1 item");
+  await expect(page.locator(".location-map-zone-items")).not.toContainText("french bread");
+
+  await page.getByRole("button", { name: "Mark as Bought" }).click();
+
+  await expect.poll(() => boughtPayloads.length).toBe(2);
+  expect(boughtPayloads[1]).toMatchObject({
+    item_name: "sourdough",
+    bought: true,
+    quantity_bought: 1,
+  });
+  await expect(page.locator(".confirm-buy-modal")).toHaveCount(0);
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("0 items");
+  await expect(bakeryArea.locator(".location-map-count")).toHaveText("0 items");
+  await expect(page.getByText("No items assigned to this zone yet.")).toBeVisible();
+});
+
 test("viewer explains when unmapped items are hidden by filters", async ({ page }) => {
   await mockMapShell(page);