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 ( +
@@ -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 (
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); });