2026-05-31 16:07:50 -09:00
3 changed files with 221 additions and 56 deletions
--- a/frontend/src/components/manage/ManageHousehold.jsx
+++ b/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" && (
-                    <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">
--- a/frontend/src/styles/components/manage/ManageHousehold.css
+++ b/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%;
  }
--- a/frontend/tests/invite-link-management.spec.ts
+++ b/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);