diff --git a/frontend/src/components/manage/ManageStores.jsx b/frontend/src/components/manage/ManageStores.jsx index 7394a37..d477783 100644 --- a/frontend/src/components/manage/ManageStores.jsx +++ b/frontend/src/components/manage/ManageStores.jsx @@ -87,8 +87,8 @@ export default function ManageStores() {

Store Locations ({householdStores.length})

- Stores and locations are private to this household. Each location has its own zones, - item defaults, and shopping order. + Stores are private to this household. Locations define map-specific zones, item + placement, and shopping order.

{householdStores.length === 0 ? (

No store locations added yet.

@@ -96,45 +96,55 @@ export default function ManageStores() {
{groupedStores.map((storeGroup) => (
-
-

{storeGroup.name}

+
+
+

{storeGroup.name}

+
+ +
- -
- {storeGroup.locations.map((location) => ( -
-
- {locationLabel(location)} - {location.address ? ( -

{location.address}

- ) : null} - {location.is_default ? ( -

Default shopping location

- ) : null} + {storeGroup.locations.map((location) => { + const label = locationLabel(location); + const showLocationName = + storeGroup.locations.length > 1 || label !== storeGroup.name; + + return ( +
+
+ {showLocationName ? {label} : null} + {location.address ? ( +

{location.address}

+ ) : null} + {location.is_default ? ( +

Default location

+ ) : null} +
+ +
+ + + +
- - - - -
- ))} + ); + })}
))} diff --git a/frontend/src/styles/components/manage/ManageStores.css b/frontend/src/styles/components/manage/ManageStores.css index a1bfd7b..1bc7c34 100644 --- a/frontend/src/styles/components/manage/ManageStores.css +++ b/frontend/src/styles/components/manage/ManageStores.css @@ -50,11 +50,11 @@ background: var(--background); border: 1px solid var(--border); border-radius: 8px; - padding: 1.25rem; + padding: 1rem; transition: all 0.2s; display: flex; flex-direction: column; - gap: 1rem; + gap: 0.75rem; } .store-card:hover { @@ -62,16 +62,23 @@ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } +.store-card-header { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 0.75rem; + align-items: center; +} + .store-info h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); - margin: 0 0 0.5rem 0; + margin: 0; } .store-location { color: var(--text-secondary); - font-size: 0.9rem; + font-size: 0.85rem; margin: 0; } @@ -90,17 +97,37 @@ .store-location-list { display: flex; flex-direction: column; - gap: 1rem; + gap: 0.65rem; } .store-location-row { + display: flex; + flex-direction: column; + gap: 0.55rem; + padding-top: 0.65rem; + border-top: 1px solid var(--border); +} + +.store-location-row:first-child { + padding-top: 0; + border-top: 0; +} + +.store-location-copy { + display: flex; + flex-direction: column; + gap: 0.12rem; +} + +.store-location-copy strong { + color: var(--text-primary); + font-size: 0.94rem; +} + +.store-location-controls { display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 0.75rem; - padding: 1rem; - border: 1px solid var(--border); - border-radius: 8px; - background: var(--card-bg); + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.5rem; } .store-location-manager-trigger, @@ -108,9 +135,8 @@ width: 100%; } -.store-location-row > .store-zone-manager-trigger, -.store-location-row > .store-available-items-trigger { - grid-column: 1 / -1; +.store-card-header > .store-location-manager-trigger { + width: auto; } .store-items-modal-toolbar.store-management-create-row { @@ -283,13 +309,18 @@ width: 100%; } - .store-location-row, + .store-card-header, + .store-location-controls, .store-items-modal-toolbar.store-management-create-row, .store-items-modal-toolbar.store-location-create-row, .store-management-row { grid-template-columns: 1fr; } + .store-card-header > .store-location-manager-trigger { + width: 100%; + } + .store-management-order { text-align: left; } diff --git a/frontend/tests/available-items-catalog.spec.ts b/frontend/tests/available-items-catalog.spec.ts index 39b0ed6..719083f 100644 --- a/frontend/tests/available-items-catalog.spec.ts +++ b/frontend/tests/available-items-catalog.spec.ts @@ -107,6 +107,9 @@ test("manage stores opens a modal to edit and delete household store items", asy const storeCard = page.locator(".store-card").filter({ hasText: "Costco" }); await expect(storeCard).toBeVisible(); + await expect(storeCard.getByText("Costco", { exact: true })).toHaveCount(1); + await expect(storeCard.getByText("Default location")).toBeVisible(); + await expect(storeCard.getByText("Default shopping location")).toHaveCount(0); await expect(storeCard.getByRole("button", { name: "Manage Items" })).toBeVisible(); await storeCard.getByRole("button", { name: "Manage Items" }).click();