From 628a4f48c292ba28d72923924db32854e16fdb8a Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 11:29:52 -0700
Subject: [PATCH] fix: expand long zone map item lists

---
 .../maps/LocationMapBottomSheetSections.jsx   | 90 ++++++++++---------
 .../src/styles/pages/LocationMapManager.css   |  2 +-
 frontend/tests/location-map-manager.spec.ts   | 13 ++-
 3 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
index 3ce01b0..51b0e97 100644
--- a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
@@ -12,7 +12,7 @@ export const MAP_DISPLAY_CONTROLS = [
   ["showUnmapped", "Unmapped"],
 ];
 
-const UNMAPPED_PREVIEW_LIMIT = 8;
+const MAP_ITEM_PREVIEW_LIMIT = 8;
 
 function MapItemActionRow({ item, onSelectItem }) {
   const isBought = Boolean(item.bought);
@@ -35,6 +35,44 @@ function MapItemActionRow({ item, onSelectItem }) {
   );
 }
 
+function MapItemActionList({ items, onSelectItem, itemGroupLabel }) {
+  const [showAllItems, setShowAllItems] = useState(false);
+
+  useEffect(() => {
+    if (items.length <= MAP_ITEM_PREVIEW_LIMIT) {
+      setShowAllItems(false);
+    }
+  }, [items.length]);
+
+  const visibleItems = showAllItems ? items : items.slice(0, MAP_ITEM_PREVIEW_LIMIT);
+  const overflowItemCount = items.length - visibleItems.length;
+  const hasOverflow = items.length > MAP_ITEM_PREVIEW_LIMIT;
+
+  return (
+    <ul>
+      {visibleItems.map((item) => (
+        <MapItemActionRow key={item.id} item={item} onSelectItem={onSelectItem} />
+      ))}
+      {hasOverflow ? (
+        <li className="location-map-list-more">
+          <button
+            type="button"
+            className="location-map-list-more-button"
+            onClick={() => setShowAllItems((current) => !current)}
+            aria-label={
+              showAllItems
+                ? `Show fewer ${itemGroupLabel}`
+                : `Show ${overflowItemCount} more ${itemGroupLabel}`
+            }
+          >
+            {showAllItems ? "Show fewer" : `+${overflowItemCount} more`}
+          </button>
+        </li>
+      ) : null}
+    </ul>
+  );
+}
+
 export function LocationMapLayerPanel({ filters, setFilters }) {
   return (
     <div className="location-map-display-panel">
@@ -159,11 +197,11 @@ export function SelectedZoneItemsPanel({
 
   return (
     <div className="location-map-zone-items">
-      <ul>
-        {selectedZoneItems.map((item) => (
-          <MapItemActionRow key={item.id} item={item} onSelectItem={onSelectZoneItem} />
-        ))}
-      </ul>
+      <MapItemActionList
+        items={selectedZoneItems}
+        onSelectItem={onSelectZoneItem}
+        itemGroupLabel="zone items"
+      />
       {hasHiddenSelectedItems ? (
         <div className="location-map-zone-hidden-note">
           <p className="location-map-muted">
@@ -185,14 +223,6 @@ export function UnmappedItemsPanel({
   onShowUnmappedItems,
   onSelectUnmappedItem,
 }) {
-  const [showAllUnmappedItems, setShowAllUnmappedItems] = useState(false);
-
-  useEffect(() => {
-    if (visibleUnmappedItems.length <= UNMAPPED_PREVIEW_LIMIT) {
-      setShowAllUnmappedItems(false);
-    }
-  }, [visibleUnmappedItems.length]);
-
   if (visibleUnmappedItems.length === 0 && hasHiddenUnmappedItems) {
     return (
       <div className="location-map-unmapped-list">
@@ -213,36 +243,14 @@ export function UnmappedItemsPanel({
     return null;
   }
 
-  const unmappedItemPreview = showAllUnmappedItems
-    ? visibleUnmappedItems
-    : visibleUnmappedItems.slice(0, UNMAPPED_PREVIEW_LIMIT);
-  const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
-  const hasUnmappedOverflow = visibleUnmappedItems.length > UNMAPPED_PREVIEW_LIMIT;
-
   return (
     <div className="location-map-unmapped-list">
       <strong>Unmapped Items</strong>
-      <ul>
-        {unmappedItemPreview.map((item) => (
-          <MapItemActionRow key={item.id} item={item} onSelectItem={onSelectUnmappedItem} />
-        ))}
-        {hasUnmappedOverflow ? (
-          <li className="location-map-unmapped-more">
-            <button
-              type="button"
-              className="location-map-list-more-button"
-              onClick={() => setShowAllUnmappedItems((current) => !current)}
-              aria-label={
-                showAllUnmappedItems
-                  ? "Show fewer unmapped items"
-                  : `Show ${overflowUnmappedItemCount} more unmapped items`
-              }
-            >
-              {showAllUnmappedItems ? "Show fewer" : `+${overflowUnmappedItemCount} more`}
-            </button>
-          </li>
-        ) : null}
-      </ul>
+      <MapItemActionList
+        items={visibleUnmappedItems}
+        onSelectItem={onSelectUnmappedItem}
+        itemGroupLabel="unmapped items"
+      />
       {hiddenUnmappedItemCount > 0 ? (
         <div className="location-map-zone-hidden-note">
           <p className="location-map-muted">
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 5c6d0fc..ad03b85 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -827,7 +827,7 @@
   margin-bottom: 0.45rem;
 }
 
-.location-map-unmapped-list .location-map-unmapped-more {
+.location-map-list-more {
   padding: 0;
   overflow: hidden;
   border-style: dashed;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index abcb472..382fc5e 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -2696,9 +2696,16 @@ test("viewer handles empty and many-item zone panels without default pins", asyn
 
   await page.locator('[data-object-key="1561"]').locator("rect").first().click();
   await expect(page.locator(".location-map-sheet-count")).toHaveText("14 items");
-  await expect(page.locator(".location-map-zone-items li")).toHaveCount(14);
-  await expect(page.locator(".location-map-zone-items li").first()).toContainText("bulk item 1");
-  await expect(page.locator(".location-map-zone-items li").last()).toContainText("bulk item 14");
+  await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(8);
+  await expect(page.locator(".location-map-zone-items .location-map-item-row").first()).toContainText("bulk item 1");
+  await expect(page.getByText("bulk item 9")).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "Show 6 more zone items" })).toHaveText("+6 more");
+
+  await page.getByRole("button", { name: "Show 6 more zone items" }).click();
+
+  await expect(page.locator(".location-map-zone-items .location-map-item-row")).toHaveCount(14);
+  await expect(page.locator(".location-map-zone-items .location-map-item-row").last()).toContainText("bulk item 14");
+  await expect(page.getByRole("button", { name: "Show fewer zone items" })).toHaveText("Show fewer");
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
 });