fix: compact store delete count label

docs/README.md

@@ -24,6 +24,7 @@ This directory contains practical project documentation. Root-level rules still
 ## Guides
 - `guides/api-documentation.md`: REST API reference. Verify against current code before changing APIs.
 - `guides/frontend-readme.md`: frontend development notes.
+- `guides/management-modal-patterns.md`: reusable modal patterns for managing scoped item/list records.
 - `guides/MOBILE_RESPONSIVE_AUDIT.md`: mobile design and audit checklist.
 - `guides/setup-checklist.md`: older setup checklist; prefer `DEVELOPMENT.md` for current commands.
 

docs/guides/management-modal-patterns.md

@@ -0,0 +1,42 @@
+# Management Modal Patterns
+
+Use this guide for modals that manage scoped lists of app-owned records, such as store items now and store zones or locations later.
+
+## Purpose
+- Management modals should keep users in the current workflow while they inspect, edit, add, or remove records for a scoped parent.
+- The parent scope must be obvious in the title, for example `Costco Items`.
+- Modals should avoid repeating table labels inside every row. Use row layout, grouping, and the edit surface for detail.
+
+## Structure
+- Header: title, one short description when the scope is not obvious, and a close button.
+- Primary toolbar: search input plus the primary create action inline.
+- Bulk toolbar: destructive or multi-select actions above the list, separate from search/create controls.
+- List: compact rows with the record's primary identity and any essential visual affordance.
+- Editor: clicking or tapping a row opens the edit/settings modal for that record.
+- Confirmation: destructive actions must use `ConfirmSlideModal`, not browser dialogs.
+
+## Row Behavior
+- Normal mode: the entire row opens settings for that record.
+- Delete mode: the row toggles selected/unselected state and does not open settings.
+- Selection state must be visible on the row and must not rely only on color.
+- Avoid per-row action buttons when the same action applies to every row.
+
+## Bulk Delete Pattern
+- Show a `Delete Items` button above the list for users with delete permission.
+- Clicking `Delete Items` enters delete mode, clears any previous selection, and changes the button to `Confirm Delete (#)`.
+- Show a `Cancel` button while delete mode is active.
+- Disable confirm while zero items are selected.
+- Clicking confirm opens `ConfirmSlideModal`; only the slide confirmation performs the mutation.
+- On success, exit delete mode, clear selection, refresh the list, and show a toast.
+- On failure, keep the modal open and show a toast with the API error summary.
+
+## Permission Rules
+- Keep authorization server-side. Client visibility only improves UX.
+- Members can open item settings when the API allows them to manage item details.
+- Delete controls should be shown only to owners/admins when deletion is admin-scoped.
+
+## Accessibility
+- Modal containers should use dialog semantics when practical.
+- Rows that perform actions should be keyboard reachable.
+- Delete-mode rows should expose selected state with `aria-pressed` or an equivalent state.
+- Buttons must have stable labels that describe the action in the current mode.

frontend/src/components/manage/ManageHousehold.jsx

@@ -71,6 +71,7 @@ export default function ManageHousehold() {
   const [isLeaveModalOpen, setIsLeaveModalOpen] = useState(false);
   const [pendingRoleChange, setPendingRoleChange] = useState(null);
   const [pendingMemberRemoval, setPendingMemberRemoval] = useState(null);
+  const [selectedMember, setSelectedMember] = useState(null);
 
   const isManager = ["owner", "admin"].includes(activeHousehold?.role);
   const isOwner = activeHousehold?.role === "owner";
@@ -85,6 +86,19 @@ export default function ManageHousehold() {
     }
   }, [activeHousehold?.id, isManager]);
 
+  useEffect(() => {
+    if (!selectedMember) return undefined;
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setSelectedMember(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedMember]);
+
   const loadMembers = async () => {
     if (!activeHousehold?.id) return;
     setLoading(true);
@@ -360,6 +374,28 @@ export default function ManageHousehold() {
 
   const managerCount = members.filter((member) => ["owner", "admin"].includes(member.role)).length;
   const memberCount = members.filter((member) => member.role === "member").length;
+  const selectedRoleMeta = selectedMember
+    ? ROLE_METADATA[selectedMember.role] || { icon: "👤", label: selectedMember.role }
+    : null;
+  const selectedMemberIsSelf = selectedMember?.id === parseInt(userId, 10);
+  const canManageSelectedMember =
+    Boolean(selectedMember) &&
+    isManager &&
+    !selectedMemberIsSelf &&
+    selectedMember.role !== "owner";
+  const selectedMemberNextRole = selectedMember?.role === "admin" ? "member" : "admin";
+
+  const openMemberRoleChange = (nextRole) => {
+    if (!selectedMember) return;
+    handleUpdateRole(selectedMember.id, nextRole, selectedMember.username);
+    setSelectedMember(null);
+  };
+
+  const openMemberRemoval = () => {
+    if (!selectedMember) return;
+    handleRemoveMember(selectedMember.id, selectedMember.username);
+    setSelectedMember(null);
+  };
 
   return (
     <div className="manage-household">
@@ -560,7 +596,13 @@ export default function ManageHousehold() {
               const isSelf = member.id === parseInt(userId, 10);
 
               return (
-                <div key={member.id} className="member-card">
+                <button
+                  key={member.id}
+                  type="button"
+                  className="member-card member-card-button"
+                  onClick={() => setSelectedMember(member)}
+                  aria-label={`Open member actions for ${member.username}`}
+                >
                   <div className="member-main">
                     <div className="member-info">
                       <span className={`member-role member-role-${member.role}`}>
@@ -570,41 +612,73 @@ export default function ManageHousehold() {
                       {isSelf && <span className="member-self-pill">You</span>}
                     </div>
                   </div>
-                  {isManager && !isSelf && member.role !== "owner" && (
+                </button>
-                    <div className="member-actions">
-                      {isOwner && (
-                        <button
-                          onClick={() => handleUpdateRole(member.id, "owner", member.username)}
-                          className="btn-primary btn-small member-owner-action"
-                        >
-                          Make Owner
-                        </button>
-                      )}
-                      <button
-                        onClick={() => handleUpdateRole(
-                          member.id,
-                          member.role === "admin" ? "member" : "admin",
-                          member.username
-                        )}
-                        className="btn-secondary btn-small member-role-action"
-                      >
-                        {member.role === "admin" ? "Make Member" : "Make Admin"}
-                      </button>
-                      <button
-                        onClick={() => handleRemoveMember(member.id, member.username)}
-                        className="btn-danger btn-small"
-                      >
-                        Remove
-                      </button>
-                    </div>
-                  )}
-                </div>
               );
             })}
           </div>
         )}
       </section>
 
+      {selectedMember && (
+        <div className="member-actions-modal-overlay" onClick={() => setSelectedMember(null)}>
+          <div
+            className="member-actions-modal"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="member-actions-title"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className="member-actions-modal-header">
+              <div className="member-actions-modal-copy">
+                <p className="manage-section-eyebrow">Member</p>
+                <h3 id="member-actions-title">{selectedMember.username}</h3>
+                <span className={`member-role member-role-${selectedMember.role}`}>
+                  {selectedRoleMeta.icon} {selectedRoleMeta.label}
+                </span>
+              </div>
+              <button
+                type="button"
+                className="member-actions-modal-close"
+                onClick={() => setSelectedMember(null)}
+                aria-label="Close member actions"
+              >
+                &times;
+              </button>
+            </div>
+
+            {canManageSelectedMember ? (
+              <div className="member-actions-modal-actions">
+                {isOwner && (
+                  <button
+                    type="button"
+                    onClick={() => openMemberRoleChange("owner")}
+                    className="btn-primary member-owner-action"
+                  >
+                    Make Owner
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={() => openMemberRoleChange(selectedMemberNextRole)}
+                  className="btn-secondary member-role-action"
+                >
+                  {selectedMember.role === "admin" ? "Make Member" : "Make Admin"}
+                </button>
+                <button
+                  type="button"
+                  onClick={openMemberRemoval}
+                  className="btn-danger"
+                >
+                  Remove
+                </button>
+              </div>
+            ) : (
+              <p className="member-actions-modal-empty">No actions available for this member.</p>
+            )}
+          </div>
+        </div>
+      )}
+
       {(isManager || isMemberOnly) && (
         <section key="danger-zone" className="manage-section danger-zone">
           <div className="manage-section-header">

frontend/src/components/manage/StoreAvailableItemsManager.jsx

@@ -31,7 +31,12 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
   const [loading, setLoading] = useState(false);
   const [editorItem, setEditorItem] = useState(null);
   const [showEditor, setShowEditor] = useState(false);
-  const [pendingDeleteItem, setPendingDeleteItem] = useState(null);
+  const [deleteMode, setDeleteMode] = useState(false);
+  const [selectedDeleteIds, setSelectedDeleteIds] = useState(() => new Set());
+  const [pendingDeleteItems, setPendingDeleteItems] = useState([]);
+
+  const selectedDeleteItems = items.filter((item) => selectedDeleteIds.has(item.item_id));
+  const selectedDeleteCount = selectedDeleteItems.length;
 
   const loadItems = useCallback(async (search = query) => {
     if (!householdId || !store?.id) {
@@ -82,7 +87,9 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
 
   const closeManager = () => {
     setIsOpen(false);
-    setPendingDeleteItem(null);
+    setDeleteMode(false);
+    setSelectedDeleteIds(new Set());
+    setPendingDeleteItems([]);
   };
 
   const handleUpdate = async (payload) => {
@@ -115,19 +122,64 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
     }
   };
 
+  const openEditor = (item) => {
+    setEditorItem(item);
+    setShowEditor(true);
+  };
+
+  const toggleDeleteSelection = (itemId) => {
+    setSelectedDeleteIds((currentIds) => {
+      const nextIds = new Set(currentIds);
+
+      if (nextIds.has(itemId)) {
+        nextIds.delete(itemId);
+      } else {
+        nextIds.add(itemId);
+      }
+
+      return nextIds;
+    });
+  };
+
+  const startDeleteMode = () => {
+    setDeleteMode(true);
+    setSelectedDeleteIds(new Set());
+  };
+
+  const cancelDeleteMode = () => {
+    setDeleteMode(false);
+    setSelectedDeleteIds(new Set());
+  };
+
+  const confirmSelectedDelete = () => {
+    if (selectedDeleteCount === 0) {
+      return;
+    }
+
+    setPendingDeleteItems(selectedDeleteItems);
+  };
+
   const handleDeleteConfirm = async () => {
-    if (!pendingDeleteItem) {
+    if (pendingDeleteItems.length === 0) {
       return;
     }
 
     try {
-      await deleteAvailableItem(householdId, store.id, pendingDeleteItem.item_id);
+      await Promise.all(
-      toast.success("Deleted store item", `Deleted ${pendingDeleteItem.item_name} from ${store.display_name || store.name}`);
+        pendingDeleteItems.map((item) => deleteAvailableItem(householdId, store.id, item.item_id))
-      setPendingDeleteItem(null);
+      );
+      const count = pendingDeleteItems.length;
+      toast.success(
+        count === 1 ? "Deleted store item" : "Deleted store items",
+        `Deleted ${count} ${count === 1 ? "item" : "items"} from ${store.display_name || store.name}`
+      );
+      setPendingDeleteItems([]);
+      setDeleteMode(false);
+      setSelectedDeleteIds(new Set());
       await loadItems(query);
     } catch (error) {
       const message = getApiErrorMessage(error, "Failed to delete store item");
-      toast.error("Delete store item failed", `Delete store item failed: ${message}`);
+      toast.error("Delete store items failed", `Delete store items failed: ${message}`);
     }
   };
 
@@ -186,6 +238,28 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
               </button>
             </div>
 
+            {isAdmin && catalogReady && items.length > 0 ? (
+              <div className="store-items-bulk-toolbar">
+                <button
+                  type="button"
+                  className="btn-danger btn-small store-items-delete-toggle"
+                  disabled={deleteMode ? selectedDeleteCount === 0 : loading}
+                  onClick={deleteMode ? confirmSelectedDelete : startDeleteMode}
+                >
+                  {deleteMode ? `Confirm Delete (${selectedDeleteCount})` : "Delete Items"}
+                </button>
+                {deleteMode ? (
+                  <button
+                    type="button"
+                    className="btn-secondary btn-small store-items-delete-cancel"
+                    onClick={cancelDeleteMode}
+                  >
+                    Cancel
+                  </button>
+                ) : null}
+              </div>
+            ) : null}
+
             <div className="store-items-modal-body">
               {!catalogReady ? (
                 <p className="empty-message">Run the latest database migrations to enable store item management.</p>
@@ -195,26 +269,40 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                 <p className="empty-message">No household items found for this store yet.</p>
               ) : (
                 <div className="store-items-table">
-                  <div className="store-items-table-head" aria-hidden="true">
-                    <span>Item</span>
-                    <span>Store Defaults</span>
-                    <span>Actions</span>
-                  </div>
                   <div className="store-items-table-body">
                     {items.map((item) => {
                       const imageSrc = itemImageSource(item);
-                      const details = [item.item_type, item.item_group, item.zone].filter(Boolean);
+                      const isSelectedForDelete = selectedDeleteIds.has(item.item_id);
 
                       return (
-                        <div key={item.item_id} className="store-items-table-row">
+                        <button
+                          key={item.item_id}
+                          type="button"
+                          className={`store-items-table-row store-items-table-row-button ${deleteMode ? "is-delete-selectable" : ""} ${isSelectedForDelete ? "is-selected" : ""}`}
+                          aria-label={
+                            deleteMode
+                              ? `${isSelectedForDelete ? "Deselect" : "Select"} ${item.item_name} for deletion`
+                              : `Edit settings for ${item.item_name}`
+                          }
+                          aria-pressed={deleteMode ? isSelectedForDelete : undefined}
+                          onClick={() => {
+                            if (deleteMode) {
+                              toggleDeleteSelection(item.item_id);
+                            } else {
+                              openEditor(item);
+                            }
+                          }}
+                        >
                           <div className="store-items-table-cell store-items-table-item">
-                            <span className="store-items-mobile-label">Item</span>
                             <div className="store-available-items-summary">
                               {imageSrc ? (
                                 <img src={imageSrc} alt="" className="store-available-items-thumb" />
                               ) : (
-                                <span className="store-available-items-thumb store-available-items-thumb-placeholder">
+                                <span
-                                  {item.item_name?.slice(0, 1).toUpperCase() || "?"}
+                                  className="store-available-items-thumb store-available-items-thumb-placeholder"
+                                  aria-hidden="true"
+                                >
+                                  {"\uD83D\uDCE6"}
                                 </span>
                               )}
                               <div className="store-available-items-copy">
@@ -223,38 +311,12 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                             </div>
                           </div>
 
-                          <div className="store-items-table-cell">
+                          {deleteMode ? (
-                            <span className="store-items-mobile-label">Store Defaults</span>
+                            <span className="store-items-delete-indicator" aria-hidden="true">
-                            <span className="store-items-defaults-text">
+                              {isSelectedForDelete ? "✓" : ""}
-                              {details.join(" | ") || "No store defaults set"}
                             </span>
-                          </div>
+                          ) : null}
-
+                        </button>
-                          <div className="store-items-table-cell store-items-table-actions">
-                            <span className="store-items-mobile-label">Actions</span>
-                            <div className="store-available-items-actions">
-                              <button
-                                type="button"
-                                className="btn-secondary btn-small"
-                                onClick={() => {
-                                  setEditorItem(item);
-                                  setShowEditor(true);
-                                }}
-                              >
-                                Edit Settings
-                              </button>
-                              {isAdmin ? (
-                                <button
-                                  type="button"
-                                  className="btn-danger btn-small"
-                                  onClick={() => setPendingDeleteItem(item)}
-                                >
-                                  Delete Item
-                                </button>
-                              ) : null}
-                            </div>
-                          </div>
-                        </div>
                       );
                     })}
                   </div>
@@ -277,15 +339,19 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
       />
 
       <ConfirmSlideModal
-        isOpen={Boolean(pendingDeleteItem)}
+        isOpen={pendingDeleteItems.length > 0}
-        title={pendingDeleteItem ? `Delete ${pendingDeleteItem.item_name}?` : "Delete item?"}
+        title={
+          pendingDeleteItems.length === 1
+            ? `Delete ${pendingDeleteItems[0].item_name}?`
+            : `Delete ${pendingDeleteItems.length} items?`
+        }
         description={
-          pendingDeleteItem
+          pendingDeleteItems.length > 0
-            ? `Slide to confirm. This permanently deletes ${pendingDeleteItem.item_name} from ${store.display_name || store.name} for this household, including current list entries and history.`
+            ? `Slide to confirm. This permanently deletes ${pendingDeleteItems.length === 1 ? pendingDeleteItems[0].item_name : `${pendingDeleteItems.length} items`} from ${store.display_name || store.name} for this household, including current list entries and history.`
             : ""
         }
-        confirmLabel="Delete Item"
+        confirmLabel={pendingDeleteItems.length === 1 ? "Delete Item" : "Delete Items"}
-        onClose={() => setPendingDeleteItem(null)}
+        onClose={() => setPendingDeleteItems([])}
         onConfirm={handleDeleteConfirm}
       />
     </>

frontend/src/styles/components/manage/ManageHousehold.css

@@ -384,13 +384,22 @@ body.dark-mode .invite-status-badge.is-used {
   display: flex;
   flex-direction: column;
   gap: 0.7rem;
+  width: 100%;
   padding: 0.85rem 1rem;
   background: rgba(255, 255, 255, 1);
   border: 1px solid var(--border);
   border-radius: var(--border-radius-lg);
+  color: inherit;
+  font: inherit;
+  text-align: left;
   transition: all 0.2s;
 }
 
+.member-card-button {
+  appearance: none;
+  cursor: pointer;
+}
+
 [data-theme="dark"] .member-card,
 body.dark-mode .member-card {
   background: rgba(12, 19, 30, 0.9);
@@ -408,6 +417,11 @@ body.dark-mode .member-card:hover {
   background: rgba(20, 32, 48, 0.98);
 }
 
+.member-card-button:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 3px;
+}
+
 .member-main {
   min-width: 0;
 }
@@ -466,16 +480,6 @@ body.dark-mode .member-card:hover {
   font-weight: 700;
 }
 
-.member-actions {
-  display: flex;
-  gap: 0.55rem;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  padding-top: 0.65rem;
-  border-top: 1px solid color-mix(in srgb, var(--color-border-light) 82%, transparent);
-}
-
 .member-owner-action {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
 }
@@ -506,11 +510,6 @@ body.dark-mode .member-role-action:hover:not(:disabled) {
   color: #f3f9ff;
 }
 
-[data-theme="dark"] .member-actions,
-body.dark-mode .member-actions {
-  border-top-color: color-mix(in srgb, var(--color-border-medium) 88%, transparent);
-}
-
 /* Danger Zone */
 .danger-zone {
   border-color: color-mix(in srgb, var(--danger) 30%, transparent);
@@ -559,6 +558,86 @@ body.dark-mode .danger-zone {
   cursor: not-allowed;
 }
 
+.member-actions-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  background: var(--modal-backdrop-bg);
+}
+
+.member-actions-modal {
+  width: min(420px, calc(100vw - (2 * var(--spacing-md))));
+  max-height: calc(100vh - (2 * var(--spacing-md)));
+  overflow: auto;
+  padding: 1.2rem;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-lg);
+  background: var(--modal-bg);
+  box-shadow: var(--shadow-xl);
+}
+
+.member-actions-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.member-actions-modal-copy {
+  min-width: 0;
+}
+
+.member-actions-modal-copy h3 {
+  margin: 0.15rem 0 0.45rem;
+  color: var(--text-primary);
+  font-size: 1.25rem;
+  overflow-wrap: anywhere;
+}
+
+.member-actions-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-full);
+  background: var(--button-ghost-bg);
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+.member-actions-modal-close:hover,
+.member-actions-modal-close:focus-visible {
+  border-color: var(--primary);
+  color: var(--primary);
+  outline: none;
+}
+
+.member-actions-modal-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  margin-top: 1.1rem;
+}
+
+.member-actions-modal-actions button {
+  width: 100%;
+}
+
+.member-actions-modal-empty {
+  margin: 1rem 0 0;
+  color: var(--text-secondary);
+  font-size: 0.92rem;
+}
+
 /* Responsive */
 @media (max-width: 900px) {
   .invite-controls {
@@ -616,12 +695,6 @@ body.dark-mode .danger-zone {
     grid-template-columns: 1fr;
   }
 
-  .member-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .member-actions button,
   .pending-request-actions button {
     flex: 1 1 100%;
   }

frontend/src/styles/components/manage/StoreAvailableItemsManager.css

@@ -60,11 +60,35 @@
   position: sticky;
   top: 0;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
   background: var(--modal-bg);
 }
 
+.store-items-modal-toolbar .btn-small {
+  flex: 0 0 auto;
+  min-height: 40px;
+  white-space: nowrap;
+}
+
+.store-items-bulk-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  justify-content: flex-end;
+}
+
+.store-items-delete-toggle,
+.store-items-delete-cancel {
+  min-height: 38px;
+  min-width: 132px;
+}
+
 .store-available-items-search {
+  flex: 1 1 auto;
   width: 100%;
+  min-width: 0;
   padding: var(--input-padding-y) var(--input-padding-x);
   border: var(--border-width-thin) solid var(--input-border-color);
   border-radius: var(--input-border-radius);
@@ -92,24 +116,20 @@
   gap: var(--spacing-sm);
 }
 
-.store-items-table-head,
 .store-items-table-row {
   display: grid;
-  grid-template-columns: minmax(220px, 2fr) minmax(180px, 2fr) minmax(170px, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--spacing-md);
   align-items: center;
 }
 
-.store-items-table-head {
+.store-items-table-row-button {
-  position: sticky;
+  width: 100%;
-  top: 0;
+  appearance: none;
-  padding: 0 var(--spacing-sm) var(--spacing-xs);
+  color: inherit;
-  background: var(--modal-bg);
+  font: inherit;
-  color: var(--color-text-secondary);
+  text-align: left;
-  font-size: var(--font-size-xs);
+  cursor: pointer;
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .store-items-table-body {
@@ -125,6 +145,22 @@
   background: var(--color-bg-surface);
 }
 
+.store-items-table-row-button:hover,
+.store-items-table-row-button:focus-visible {
+  border-color: var(--color-primary);
+  background: var(--color-bg-hover);
+  outline: none;
+}
+
+.store-items-table-row-button.is-delete-selectable {
+  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border-light));
+}
+
+.store-items-table-row-button.is-selected {
+  border-color: var(--color-danger);
+  background: var(--color-danger-light);
+}
+
 .store-items-table-cell {
   min-width: 0;
 }
@@ -153,8 +189,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-secondary);
+  border: var(--border-width-medium) solid var(--color-border-light);
-  font-weight: var(--font-weight-semibold);
+  background: var(--color-gray-100);
+  color: var(--color-border-medium);
+  font-size: 1.75rem;
+  line-height: 1;
 }
 
 .store-available-items-copy {
@@ -171,24 +210,27 @@
   white-space: nowrap;
 }
 
-.store-items-defaults-text {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-}
-
 .store-items-table-actions {
   justify-self: end;
 }
 
-.store-available-items-actions {
+.store-items-delete-indicator {
-  display: flex;
+  width: 28px;
-  gap: var(--spacing-xs);
+  height: 28px;
-  flex-wrap: wrap;
+  display: inline-flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-thin) solid var(--color-border-light);
+  border-radius: var(--border-radius-full);
+  color: var(--color-text-inverse);
+  background: var(--color-bg-surface);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
 }
 
-.store-items-mobile-label {
+.store-items-table-row-button.is-selected .store-items-delete-indicator {
-  display: none;
+  border-color: var(--color-danger);
+  background: var(--color-danger);
 }
 
 @media (max-width: 720px) {
@@ -197,37 +239,21 @@
     padding: var(--spacing-md);
   }
 
-  .store-items-table-head {
-    display: none;
-  }
-
   .store-items-table-row {
-    display: flex;
+    grid-template-columns: minmax(0, 1fr);
-    flex-direction: column;
-    align-items: stretch;
     gap: var(--spacing-sm);
   }
 
-  .store-items-mobile-label {
+  .store-items-table-row-button.is-delete-selectable {
-    display: block;
+    grid-template-columns: minmax(0, 1fr) auto;
-    margin-bottom: 4px;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 
-  .store-items-table-actions {
+  .store-items-bulk-toolbar {
-    justify-self: stretch;
-  }
-
-  .store-available-items-actions {
     width: 100%;
-    justify-content: stretch;
+    align-items: stretch;
   }
 
-  .store-available-items-actions button {
+  .store-items-bulk-toolbar button {
     flex: 1 1 0;
   }
 }

frontend/tests/available-items-catalog.spec.ts

@@ -36,15 +36,15 @@ test("manage stores opens a modal to edit and delete household store items", asy
     },
   ];
 
-  await page.route("**/stores", async (route) => {
+  await page.route("**/households/1/stores", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify([{ id: 10, name: "Costco" }]),
+      body: JSON.stringify([{ id: 10, household_store_id: 100, name: "Costco", is_default: true }]),
     });
   });
 
-  await page.route("**/households/1/stores/10/available-items*", async (route) => {
+  await page.route("**/households/1/locations/10/available-items*", async (route) => {
     const request = route.request();
     const url = new URL(request.url());
     const query = (url.searchParams.get("query") || "").toLowerCase();
@@ -62,7 +62,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
     await route.fulfill({ status: 500 });
   });
 
-  await page.route("**/households/1/stores/10/available-items/777", async (route) => {
+  await page.route("**/households/1/locations/10/available-items/777", async (route) => {
     if (route.request().method() === "PATCH") {
       availableItems = availableItems.map((item) =>
         item.item_id === 777
@@ -89,7 +89,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
     await route.fulfill({ status: 500 });
   });
 
-  await page.route("**/households/1/stores/10/available-items/501", async (route) => {
+  await page.route("**/households/1/locations/10/available-items/501", async (route) => {
     if (route.request().method() === "DELETE") {
       availableItems = availableItems.filter((item) => item.item_id !== 501);
       await route.fulfill({
@@ -115,8 +115,28 @@ test("manage stores opens a modal to edit and delete household store items", asy
   await expect(managerModal).toBeVisible();
   await expect(managerModal.getByText("milk", { exact: true })).toBeVisible();
   await expect(managerModal.getByText("apples", { exact: true })).toBeVisible();
+  await expect(managerModal.locator(".store-available-items-thumb-placeholder").first()).toHaveText("\uD83D\uDCE6");
+  await expect(managerModal.getByText("Store Defaults")).toHaveCount(0);
+  await expect(managerModal.getByText("No store defaults set")).toHaveCount(0);
+  await expect(managerModal.getByText("Edit Settings", { exact: true })).toHaveCount(0);
+  await expect(managerModal.getByText("Delete Item", { exact: true })).toHaveCount(0);
+  await expect(managerModal.locator(".store-available-items-action")).toHaveCount(0);
 
-  await managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click();
+  const searchBox = await managerModal.getByPlaceholder("Search household/store items").boundingBox();
+  const addButtonBox = await managerModal.getByRole("button", { name: "Add Item" }).boundingBox();
+  expect(searchBox).not.toBeNull();
+  expect(addButtonBox).not.toBeNull();
+  expect(
+    Math.abs(
+      ((searchBox?.y ?? 0) + (searchBox?.height ?? 0) / 2) -
+      ((addButtonBox?.y ?? 0) + (addButtonBox?.height ?? 0) / 2)
+    )
+  ).toBeLessThan(2);
+
+  const appleRow = managerModal.getByRole("button", { name: "Edit settings for apples" });
+  const milkRow = managerModal.locator(".store-items-table-row").filter({ hasText: "milk" });
+
+  await appleRow.click();
   const editorModal = page.locator(".available-item-editor-modal");
   await expect(editorModal).toBeVisible();
   await expect(editorModal.getByLabel("Item Name")).toBeDisabled();
@@ -126,9 +146,22 @@ test("manage stores opens a modal to edit and delete household store items", asy
   await editorModal.getByRole("button", { name: "Save Changes" }).click();
 
   await expect(page.locator(".action-toast.action-toast-success")).toContainText("Updated store item");
-  await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toBeVisible();
+  await expect(managerModal.getByText("produce | Fruits | Produce & Fresh Vegetables")).toHaveCount(0);
 
-  await managerModal.locator(".store-items-table-row").filter({ hasText: "milk" }).getByRole("button", { name: "Delete Item" }).click();
+  await managerModal.getByRole("button", { name: "Delete Items" }).click();
+  await expect(managerModal.getByRole("button", { name: "Confirm Delete (0)" })).toBeDisabled();
+  await expect(managerModal.getByRole("button", { name: "Cancel" })).toBeVisible();
+
+  await milkRow.click();
+  await expect(managerModal.getByRole("button", { name: "Confirm Delete (1)" })).toBeEnabled();
+  await expect(milkRow).toHaveClass(/is-selected/);
+
+  await milkRow.click();
+  await expect(managerModal.getByRole("button", { name: "Confirm Delete (0)" })).toBeDisabled();
+  await expect(milkRow).not.toHaveClass(/is-selected/);
+
+  await milkRow.click();
+  await managerModal.getByRole("button", { name: "Confirm Delete (1)" }).click();
   const confirmModal = page.locator(".confirm-slide-modal");
   await expect(confirmModal).toBeVisible();
   await expect(confirmModal.getByText("Delete milk?")).toBeVisible();
@@ -156,7 +189,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/stores/10/list/recent", async (route) => {
+  await page.route("**/households/1/locations/10/list/recent", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -164,7 +197,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/stores/10/list/suggestions**", async (route) => {
+  await page.route("**/households/1/locations/10/list/suggestions**", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -172,7 +205,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/stores/10/list/item**", async (route) => {
+  await page.route("**/households/1/locations/10/list/item**", async (route) => {
     await route.fulfill({
       status: 404,
       contentType: "application/json",
@@ -180,7 +213,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/stores/10/list", async (route) => {
+  await page.route("**/households/1/locations/10/list", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",

frontend/tests/invite-link-management.spec.ts

@@ -231,7 +231,11 @@ test("household member removal opens slide confirmation instead of browser dialo
   await page.goto("/manage?tab=household");
 
   const memberCard = page.locator(".member-card").filter({ hasText: "remove-me" });
-  await memberCard.getByRole("button", { name: "Remove" }).click();
+  await expect(memberCard.getByRole("button", { name: "Remove" })).toHaveCount(0);
+  await memberCard.click();
+  const memberActionsDialog = page.getByRole("dialog", { name: "remove-me" });
+  await expect(memberActionsDialog).toBeVisible();
+  await memberActionsDialog.getByRole("button", { name: "Remove" }).click();
 
   await expect(page.getByRole("heading", { name: "Remove remove-me?" })).toBeVisible();
   await expect(page.getByText("Slide to confirm. They will lose access to this household.")).toBeVisible();
@@ -266,11 +270,21 @@ test("household owner can transfer ownership from household settings", async ({
     });
   });
 
-  await page.route("**/stores/household/1", async (route) => {
+  await page.route("**/households/1/stores", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify([{ id: 10, name: "Costco", location: "Warehouse", is_default: true }]),
+      body: JSON.stringify([
+        { id: 10, household_store_id: 100, name: "Costco", location: "Warehouse", is_default: true },
+      ]),
+    });
+  });
+
+  await page.route("**/households/1/locations/10/zones", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ zones: [] }),
     });
   });
 
@@ -346,9 +360,13 @@ test("household owner can transfer ownership from household settings", async ({
 
   await page.goto("/manage?tab=household");
 
-  await expect(page.getByRole("button", { name: "Make Owner" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Make Owner" })).toHaveCount(0);
 
-  await page.getByRole("button", { name: "Make Owner" }).click();
+  const memberCard = page.locator(".member-card").filter({ hasText: "nico-admin" });
+  await memberCard.click();
+  const memberActionsDialog = page.getByRole("dialog", { name: "nico-admin" });
+  await expect(memberActionsDialog).toBeVisible();
+  await memberActionsDialog.getByRole("button", { name: "Make Owner" }).click();
   await expect(page.getByText("Transfer ownership to nico-admin?")).toBeVisible();
   await confirmSlide(page);