Show seven cards on the four method decks and open each as a routing overlay of its parts, so groups write from empty fields with Generate draft, search the full deck, and see unselected scope chips with enough contrast.

tests/pages/communication-methods.test.jsx

@@ -37,10 +37,10 @@ describe("Create flow communication-methods page", () => {
     const dialog = screen.getByRole("dialog");
     expect(dialog).toBeInTheDocument();
     expect(within(dialog).getByText("Signal")).toBeInTheDocument();
-    expect(within(dialog).getByText("Add card")).toBeInTheDocument();
+    expect(within(dialog).getByText("Add to Rule")).toBeInTheDocument();
   });
 
-  test("re-opening a selected method shows Save and footer Remove; Remove stays in the kebab", async () => {
+  test("re-opening a selected method shows Save and footer Deselect; Remove stays in the kebab", async () => {
     const user = userEvent.setup();
     render(<CommunicationMethodsScreen />);
 
@@ -49,15 +49,15 @@ describe("Create flow communication-methods page", () => {
     });
     await user.click(signalCards[0]);
     const dialog = screen.getByRole("dialog");
-    await user.click(within(dialog).getByRole("button", { name: "Add card" }));
+    await user.click(within(dialog).getByRole("button", { name: "Add to Rule" }));
 
     await user.click(signalCards[0]);
     const dialogAgain = screen.getByRole("dialog");
     expect(
-      within(dialogAgain).getByRole("button", { name: "Remove" }),
+      within(dialogAgain).getByRole("button", { name: "Deselect" }),
     ).toBeInTheDocument();
     expect(
-      within(dialogAgain).queryByRole("button", { name: "Add card" }),
+      within(dialogAgain).queryByRole("button", { name: "Add to Rule" }),
     ).not.toBeInTheDocument();
     expect(
       within(dialogAgain).getByRole("button", { name: "Save" }),
@@ -67,7 +67,7 @@ describe("Create flow communication-methods page", () => {
     expect(screen.getByRole("menuitem", { name: "Remove" })).toBeInTheDocument();
   });
 
-  test("Remove from the footer deselects the method", async () => {
+  test("Deselect from the footer deselects the method", async () => {
     const user = userEvent.setup();
     render(<CommunicationMethodsScreen />);
 
@@ -77,7 +77,7 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
     await user.click(
       within(screen.getByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
@@ -85,7 +85,9 @@ describe("Create flow communication-methods page", () => {
 
     await user.click(signalCards[0]);
     await user.click(
-      within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }),
+      within(screen.getByRole("dialog")).getByRole("button", {
+        name: "Deselect",
+      }),
     );
 
     expect(signalCards[0]).not.toHaveTextContent("SELECTED");
@@ -101,7 +103,7 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
     await user.click(
       within(screen.getByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
@@ -143,11 +145,13 @@ describe("Create flow communication-methods page", () => {
     await user.click(signalCards[0]);
 
     const dialog = screen.getByRole("dialog");
-    const textbox = within(dialog).getAllByRole("textbox")[0];
-    expect(textbox).not.toBeDisabled();
-
     await user.click(within(dialog).getByRole("button", { name: "More options" }));
     expect(screen.getByRole("menuitem", { name: "Customize" })).toBeInTheDocument();
+    await user.click(
+      within(dialog).getByRole("button", { name: "Core principle and scope" }),
+    );
+    const textbox = within(dialog).getAllByRole("textbox")[0];
+    expect(textbox).not.toBeDisabled();
   });
 
   test("meta-only custom policy opens with editable section fields", async () => {
@@ -167,14 +171,35 @@ describe("Create flow communication-methods page", () => {
       screen.getAllByRole("button", { name: /My policy: Desc/ })[0],
     );
     const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).queryByText("No custom fields yet."),
+    ).not.toBeInTheDocument();
+    await user.click(
+      within(dialog).getByRole("button", { name: "Core principle and scope" }),
+    );
     const textboxes = within(dialog).getAllByRole("textbox");
     expect(textboxes.length).toBeGreaterThan(0);
     for (const field of textboxes) {
       expect(field).not.toBeDisabled();
     }
+  });
+
+  test("compact stack shows seven cards and See all search", async () => {
+    const user = userEvent.setup();
+    render(<CommunicationMethodsScreen />);
+
+    const compactCards = screen
+      .getAllByRole("button")
+      .filter((el) => (el.getAttribute("aria-label") || "").includes(": "));
+    expect(compactCards).toHaveLength(7);
+    expect(screen.queryByText("RECOMMENDED")).not.toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole("button", { name: "See all communication cards" }),
+    );
     expect(
-      within(dialog).queryByText("No custom fields yet."),
-    ).not.toBeInTheDocument();
+      screen.getByRole("searchbox", { name: "Search this deck" }),
+    ).toBeInTheDocument();
   });
 
   test("renders without error", () => {
@@ -419,7 +444,7 @@ describe("Create flow communication-methods page", () => {
     const dupId = dupIds[0];
     expect(latest.selectedCommunicationMethodIds).toEqual([CUSTOM_POLICY_ID]);
     expect(
-      within(dialog).getByRole("button", { name: "Add card" }),
+      within(dialog).getByRole("button", { name: "Add to Rule" }),
     ).toBeInTheDocument();
     expect(metaAfterDup[dupId].label.endsWith(" (copy)")).toBe(true);
     expect(within(dialog).getByRole("heading", { level: 1 })).toHaveTextContent(

tests/pages/decision-approaches.test.jsx

@@ -185,7 +185,7 @@ describe("Create flow decision-approaches page", () => {
     await user.click(screen.getByRole("button", { name: /^Consent \(sociocracy\):/ }));
     await user.click(
       within(await screen.findByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
     await waitFor(() => {
@@ -211,17 +211,20 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const dialog = await screen.findByRole("dialog");
-    const textboxes = within(dialog).getAllByRole("textbox");
-    expect(textboxes.length).toBeGreaterThan(0);
-    for (const field of textboxes) {
-      expect(field).not.toBeDisabled();
-    }
     await user.click(
       within(dialog).getByRole("button", { name: "More options" }),
     );
     expect(
       screen.getByRole("menuitem", { name: "Customize" }),
     ).toBeInTheDocument();
+    await user.click(
+      within(dialog).getByRole("button", { name: "Core principle" }),
+    );
+    const textboxes = within(dialog).getAllByRole("textbox");
+    expect(textboxes.length).toBeGreaterThan(0);
+    for (const field of textboxes) {
+      expect(field).not.toBeDisabled();
+    }
   });
 
   test("clicking a card opens the create modal and confirming selects it", async () => {
@@ -237,14 +240,14 @@ describe("Create flow decision-approaches page", () => {
     expect(dialog).toBeInTheDocument();
 
     const confirmButton = within(dialog).getByRole("button", {
-      name: "Add card",
+      name: "Add to Rule",
     });
     await user.click(confirmButton);
 
     expect(screen.getByText("SELECTED")).toBeInTheDocument();
   });
 
-  test("re-opening a selected approach shows Save and footer Remove; Remove stays in the kebab", async () => {
+  test("re-opening a selected approach shows Save and footer Deselect; Remove stays in the kebab", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);
 
@@ -255,17 +258,17 @@ describe("Create flow decision-approaches page", () => {
     const dialog = await screen.findByRole("dialog");
     await user.click(
       within(dialog).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
     await user.click(card);
     const dialogAgain = screen.getByRole("dialog");
     expect(
-      within(dialogAgain).getByRole("button", { name: "Remove" }),
+      within(dialogAgain).getByRole("button", { name: "Deselect" }),
     ).toBeInTheDocument();
     expect(
-      within(dialogAgain).queryByRole("button", { name: "Add card" }),
+      within(dialogAgain).queryByRole("button", { name: "Add to Rule" }),
     ).not.toBeInTheDocument();
     expect(
       within(dialogAgain).getByRole("button", { name: "Save" }),
@@ -275,7 +278,7 @@ describe("Create flow decision-approaches page", () => {
     expect(screen.getByRole("menuitem", { name: "Remove" })).toBeInTheDocument();
   });
 
-  test("Remove from the footer deselects the approach", async () => {
+  test("Deselect from the footer deselects the approach", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);
 
@@ -285,7 +288,7 @@ describe("Create flow decision-approaches page", () => {
     await user.click(card);
     await user.click(
       within(await screen.findByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
@@ -293,7 +296,9 @@ describe("Create flow decision-approaches page", () => {
 
     await user.click(card);
     await user.click(
-      within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }),
+      within(screen.getByRole("dialog")).getByRole("button", {
+        name: "Deselect",
+      }),
     );
 
     expect(card).not.toHaveTextContent("SELECTED");
@@ -309,17 +314,21 @@ describe("Create flow decision-approaches page", () => {
     await user.click(card);
     const dialog = await screen.findByRole("dialog");
     await user.click(
-      within(dialog).getByRole("button", { name: "Add card" }),
+      within(dialog).getByRole("button", { name: "Add to Rule" }),
     );
 
     await user.click(card);
     const dialogAgain = await screen.findByRole("dialog");
+    await user.click(
+      within(dialogAgain).getByRole("button", { name: "Core principle" }),
+    );
     const principleField = within(dialogAgain).getByRole("textbox", {
       name: /core principle/i,
     });
     await user.clear(principleField);
     await user.type(principleField, "Edited principle");
     await user.click(within(dialogAgain).getByRole("button", { name: "Save" }));
+    await user.click(within(dialogAgain).getByRole("button", { name: "Save" }));
 
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
@@ -336,7 +345,7 @@ describe("Create flow decision-approaches page", () => {
     await user.click(card);
     await user.click(
       within(await screen.findByRole("dialog")).getByRole("button", {
-        name: "Add card",
+        name: "Add to Rule",
       }),
     );
 
@@ -397,6 +406,14 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const dialog = await screen.findByRole("dialog");
+    await user.click(
+      within(dialog).getByRole("button", { name: "Applicable scope" }),
+    );
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Changing the Rule",
+      }),
+    ).toBeInTheDocument();
     expect(
       within(dialog).getByRole("button", {
         name: "Select Changing this Rule",
@@ -431,6 +448,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const lazyDialog = await screen.findByRole("dialog");
+    await user.click(
+      within(lazyDialog).getByRole("button", { name: "Applicable scope" }),
+    );
     expect(
       within(lazyDialog).getByRole("button", {
         name: "Select Shared money",
@@ -448,6 +468,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const lazyDialog = await screen.findByRole("dialog");
+    await user.click(
+      within(lazyDialog).getByRole("button", { name: "Applicable scope" }),
+    );
     await user.click(
       within(lazyDialog).getByRole("button", {
         name: "Select Shared money",
@@ -457,7 +480,10 @@ describe("Create flow decision-approaches page", () => {
       screen.getByRole("checkbox", { name: "Shared money" }),
     ).toBeChecked();
     await user.click(
-      within(lazyDialog).getByRole("button", { name: "Add card" }),
+      within(lazyDialog).getByRole("button", { name: "Save" }),
+    );
+    await user.click(
+      within(lazyDialog).getByRole("button", { name: "Add to Rule" }),
     );
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
@@ -469,6 +495,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const doocracyDialog = await screen.findByRole("dialog");
+    await user.click(
+      within(doocracyDialog).getByRole("button", { name: "Applicable scope" }),
+    );
     expect(
       within(doocracyDialog).getByRole("button", {
         name: "Select Shared money",
@@ -482,6 +511,9 @@ describe("Create flow decision-approaches page", () => {
     expect(
       screen.getByRole("checkbox", { name: "Shared money" }),
     ).not.toBeChecked();
+    await user.click(
+      within(doocracyDialog).getByRole("button", { name: "Save" }),
+    );
     await user.click(
       within(doocracyDialog).getByRole("button", { name: "Close" }),
     );
@@ -499,6 +531,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const lazyAgain = await screen.findByRole("dialog");
+    await user.click(
+      within(lazyAgain).getByRole("button", { name: "Applicable scope" }),
+    );
     expect(
       within(lazyAgain).getByRole("button", {
         name: "Deselect Shared money",
@@ -520,7 +555,7 @@ describe("Create flow decision-approaches page", () => {
     );
     const lazyDialog = await screen.findByRole("dialog");
     await user.click(
-      within(lazyDialog).getByRole("button", { name: "Add card" }),
+      within(lazyDialog).getByRole("button", { name: "Add to Rule" }),
     );
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
@@ -532,6 +567,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const doocracyDialog = await screen.findByRole("dialog");
+    await user.click(
+      within(doocracyDialog).getByRole("button", { name: "Applicable scope" }),
+    );
     await user.click(
       screen.getByRole("checkbox", { name: "Shared money" }),
     );
@@ -540,6 +578,9 @@ describe("Create flow decision-approaches page", () => {
         name: "Deselect Shared money",
       }),
     ).toBeInTheDocument();
+    await user.click(
+      within(doocracyDialog).getByRole("button", { name: "Save" }),
+    );
     await user.click(
       within(doocracyDialog).getByRole("button", { name: "Close" }),
     );
@@ -554,6 +595,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const lazyAgain = await screen.findByRole("dialog");
+    await user.click(
+      within(lazyAgain).getByRole("button", { name: "Applicable scope" }),
+    );
     expect(
       within(lazyAgain).getByRole("button", {
         name: "Select Shared money",
@@ -571,6 +615,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const lazyDialog = await screen.findByRole("dialog");
+    await user.click(
+      within(lazyDialog).getByRole("button", { name: "Applicable scope" }),
+    );
     await user.click(
       within(lazyDialog).getByRole("button", {
         name: "Select Shared money",
@@ -580,7 +627,10 @@ describe("Create flow decision-approaches page", () => {
       screen.getByRole("checkbox", { name: "Shared money" }),
     ).toBeChecked();
     await user.click(
-      within(lazyDialog).getByRole("button", { name: "Add card" }),
+      within(lazyDialog).getByRole("button", { name: "Save" }),
+    );
+    await user.click(
+      within(lazyDialog).getByRole("button", { name: "Add to Rule" }),
     );
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
@@ -592,6 +642,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const doocracyDialog = await screen.findByRole("dialog");
+    await user.click(
+      within(doocracyDialog).getByRole("button", { name: "Applicable scope" }),
+    );
     await user.click(
       within(doocracyDialog).getByRole("button", {
         name: "Select Big decisions",
@@ -609,7 +662,10 @@ describe("Create flow decision-approaches page", () => {
       }),
     ).toBeInTheDocument();
     await user.click(
-      within(doocracyDialog).getByRole("button", { name: "Add card" }),
+      within(doocracyDialog).getByRole("button", { name: "Save" }),
+    );
+    await user.click(
+      within(doocracyDialog).getByRole("button", { name: "Add to Rule" }),
     );
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
@@ -628,6 +684,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const lazyAgain = await screen.findByRole("dialog");
+    await user.click(
+      within(lazyAgain).getByRole("button", { name: "Applicable scope" }),
+    );
     expect(
       within(lazyAgain).getByRole("button", {
         name: "Deselect Shared money",
@@ -638,6 +697,9 @@ describe("Create flow decision-approaches page", () => {
         name: "Select Big decisions",
       }),
     ).toBeInTheDocument();
+    await user.click(
+      within(lazyAgain).getByRole("button", { name: "Save" }),
+    );
     await user.click(
       within(lazyAgain).getByRole("button", { name: "Close" }),
     );
@@ -651,6 +713,9 @@ describe("Create flow decision-approaches page", () => {
       }),
     );
     const doocracyAgain = await screen.findByRole("dialog");
+    await user.click(
+      within(doocracyAgain).getByRole("button", { name: "Applicable scope" }),
+    );
     expect(
       within(doocracyAgain).getByRole("button", {
         name: "Deselect Big decisions",