Merge pull request 'feature-custom-store-locations' (#4) from feature-custom-store-locations into main

Reviewed-on: #4

frontend/src/components/manage/ManageHousehold.jsx

@@ -71,7 +71,6 @@ 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";
@@ -86,19 +85,6 @@ 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);
@@ -374,28 +360,6 @@ 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">
@@ -596,13 +560,7 @@ export default function ManageHousehold() {
               const isSelf = member.id === parseInt(userId, 10);
 
               return (
-                <button
+                <div key={member.id} className="member-card">
-                  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}`}>
@@ -612,72 +570,40 @@ export default function ManageHousehold() {
                       {isSelf && <span className="member-self-pill">You</span>}
                     </div>
                   </div>
-                </button>
+                  {isManager && !isSelf && member.role !== "owner" && (
-              );
+                    <div className="member-actions">
-            })}
-          </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={() => handleUpdateRole(member.id, "owner", member.username)}
-                    onClick={() => openMemberRoleChange("owner")}
+                          className="btn-primary btn-small member-owner-action"
-                    className="btn-primary member-owner-action"
                         >
                           Make Owner
                         </button>
                       )}
                       <button
-                  type="button"
+                        onClick={() => handleUpdateRole(
-                  onClick={() => openMemberRoleChange(selectedMemberNextRole)}
+                          member.id,
-                  className="btn-secondary member-role-action"
+                          member.role === "admin" ? "member" : "admin",
+                          member.username
+                        )}
+                        className="btn-secondary btn-small member-role-action"
                       >
-                  {selectedMember.role === "admin" ? "Make Member" : "Make Admin"}
+                        {member.role === "admin" ? "Make Member" : "Make Admin"}
                       </button>
                       <button
-                  type="button"
+                        onClick={() => handleRemoveMember(member.id, member.username)}
-                  onClick={openMemberRemoval}
+                        className="btn-danger btn-small"
-                  className="btn-danger"
                       >
                         Remove
                       </button>
                     </div>
-            ) : (
-              <p className="member-actions-modal-empty">No actions available for this member.</p>
                   )}
                 </div>
+              );
+            })}
           </div>
         )}
+      </section>
 
       {(isManager || isMemberOnly) && (
         <section key="danger-zone" className="manage-section danger-zone">

frontend/src/components/manage/StoreAvailableItemsManager.jsx

@@ -213,11 +213,8 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                               {imageSrc ? (
                                 <img src={imageSrc} alt="" className="store-available-items-thumb" />
                               ) : (
-                                <span
+                                <span className="store-available-items-thumb store-available-items-thumb-placeholder">
-                                  className="store-available-items-thumb store-available-items-thumb-placeholder"
+                                  {item.item_name?.slice(0, 1).toUpperCase() || "?"}
-                                  aria-hidden="true"
-                                >
-                                  {"\uD83D\uDCE6"}
                                 </span>
                               )}
                               <div className="store-available-items-copy">

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

@@ -384,22 +384,13 @@ 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);
@@ -417,11 +408,6 @@ 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;
 }
@@ -480,6 +466,16 @@ 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);
 }
@@ -510,6 +506,11 @@ 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);
@@ -558,86 +559,6 @@ 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 {
@@ -695,6 +616,12 @@ 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

@@ -153,11 +153,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: var(--border-width-medium) solid var(--color-border-light);
+  color: var(--color-text-secondary);
-  background: var(--color-gray-100);
+  font-weight: var(--font-weight-semibold);
-  color: var(--color-border-medium);
-  font-size: 1.75rem;
-  line-height: 1;
 }
 
 .store-available-items-copy {

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("**/households/1/stores", async (route) => {
+  await page.route("**/stores", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify([{ id: 10, household_store_id: 100, name: "Costco", is_default: true }]),
+      body: JSON.stringify([{ id: 10, name: "Costco" }]),
     });
   });
 
-  await page.route("**/households/1/locations/10/available-items*", async (route) => {
+  await page.route("**/households/1/stores/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/locations/10/available-items/777", async (route) => {
+  await page.route("**/households/1/stores/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/locations/10/available-items/501", async (route) => {
+  await page.route("**/households/1/stores/10/available-items/501", async (route) => {
     if (route.request().method() === "DELETE") {
       availableItems = availableItems.filter((item) => item.item_id !== 501);
       await route.fulfill({
@@ -115,7 +115,6 @@ 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 managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click();
   const editorModal = page.locator(".available-item-editor-modal");
@@ -157,7 +156,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list/recent", async (route) => {
+  await page.route("**/households/1/stores/10/list/recent", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -165,7 +164,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list/suggestions**", async (route) => {
+  await page.route("**/households/1/stores/10/list/suggestions**", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -173,7 +172,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list/item**", async (route) => {
+  await page.route("**/households/1/stores/10/list/item**", async (route) => {
     await route.fulfill({
       status: 404,
       contentType: "application/json",
@@ -181,7 +180,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list", async (route) => {
+  await page.route("**/households/1/stores/10/list", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",

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

@@ -231,11 +231,7 @@ 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 expect(memberCard.getByRole("button", { name: "Remove" })).toHaveCount(0);
+  await memberCard.getByRole("button", { name: "Remove" }).click();
-  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();
@@ -270,21 +266,11 @@ test("household owner can transfer ownership from household settings", async ({
     });
   });
 
-  await page.route("**/households/1/stores", async (route) => {
+  await page.route("**/stores/household/1", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify([
+      body: JSON.stringify([{ id: 10, name: "Costco", location: "Warehouse", is_default: true }]),
-        { 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: [] }),
     });
   });
 
@@ -360,13 +346,9 @@ test("household owner can transfer ownership from household settings", async ({
 
   await page.goto("/manage?tab=household");
 
-  await expect(page.getByRole("button", { name: "Make Owner" })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "Make Owner" })).toBeVisible();
 
-  const memberCard = page.locator(".member-card").filter({ hasText: "nico-admin" });
+  await page.getByRole("button", { name: "Make Owner" }).click();
-  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);