fix(macro): show a just-added Conditional's new condition and branch counts (#2151)

The condition dialog and the branch pages edit the step in place. A step
added this session is a class instance that $state does not proxy, and
the list got the same object back, so the row kept its old label.

Fixes #2147

Author: chhoumann

src/gui/MacroGUIs/CommandList.conditional.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import { fireEvent, render } from "@testing-library/svelte";
+import { tick } from "svelte";
 
 import { App } from "obsidian";
 import CommandList from "./CommandList.svelte";
@@ -68,3 +69,48 @@ describe("CommandList conditional branch persistence", () => {
 		expect(saveCommands).not.toHaveBeenCalled();
 	});
 });
+
+// A step added in this session is a class instance, which $state does not
+// proxy, so an in-place edit only shows if the list gets a new object (#2147).
+describe("CommandList conditional label after an edit", () => {
+	function renderWith(handlers: Partial<Parameters<typeof createCommandListProps>[0]>) {
+		const props = createCommandListProps({
+			commands: [new ConditionalCommand()],
+			app: new App() as never,
+			plugin: {} as never,
+			deleteCommand: vi.fn(),
+			saveCommands: vi.fn(),
+			...handlers,
+		});
+		return render(CommandList, { props });
+	}
+
+	it("shows the new condition once its dialog is saved", async () => {
+		const { getByLabelText, container } = renderWith({
+			onConfigureCondition: (command) => {
+				command.condition = { ...command.condition, variableName: "mood" } as typeof command.condition;
+				return true;
+			},
+		});
+
+		await fireEvent.click(getByLabelText("Edit condition for (missing variable) is truthy"));
+		await tick();
+
+		expect(container.querySelector(".conditionalSummary")?.textContent).toBe("$mood is truthy");
+		expect(getByLabelText("Edit then branch for $mood is truthy")).toBeTruthy();
+	});
+
+	it("shows the new branch count once its page is left", async () => {
+		const { getByLabelText, container } = renderWith({
+			onEditThenBranch: (command, onEdited) => {
+				command.thenCommands = [new WaitCommand(100)];
+				onEdited();
+			},
+		});
+
+		await fireEvent.click(getByLabelText("Edit then branch for (missing variable) is truthy"));
+		await tick();
+
+		expect(container.querySelector(".conditionalBranches")?.textContent).toContain("Then: 1");
+	});
+});

src/gui/MacroGUIs/CommandList.svelte

@@ -199,8 +199,9 @@ function moveCommand(id: string, direction: -1 | 1) {
 
 function updateCommand(command: ICommand) {
 	// `renderable` for the same reason as moveCommand: replaceById maps over
-	// `item.id`.
-	commands = replaceById(renderable, command);
+	// `item.id`. A copy, so the row re-renders after an edit made in place on a
+	// step added this session: a class instance, which $state does not proxy.
+	commands = replaceById(renderable, { ...command });
 	persist();
 }