fix release v2 review issues

packages/modals/src/confirm-modal.spec.tsx

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { Root } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { ConfirmModal } from "./confirm-modal";
+
+const ConfirmModalComponent = ConfirmModal.component;
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => key,
+}));
+
+let root: Root;
+let host: HTMLDivElement;
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  window.matchMedia = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(async () => {
+  await act(() => root.unmount());
+  host.remove();
+});
+
+describe("ConfirmModal", () => {
+  test("clears loading and stays open when confirmation rejects", async () => {
+    const closeModal = vi.fn();
+    let rejectConfirmation!: (error: Error) => void;
+    const pendingConfirmation = new Promise<void>((_resolve, reject) => {
+      rejectConfirmation = reject;
+    });
+    const onConfirm = vi.fn(() => pendingConfirmation);
+
+    await act(async () =>
+      root.render(
+        <MantineProvider>
+          <ConfirmModalComponent actions={{ closeModal }} innerProps={{ children: "Remove containers?", onConfirm }} />
+        </MantineProvider>,
+      ),
+    );
+
+    const confirmButton = host.querySelectorAll("button").item(1);
+    await act(async () => confirmButton.click());
+    expect(confirmButton.disabled).toBe(true);
+
+    await act(async () => {
+      rejectConfirmation(new Error("Removal failed"));
+      await Promise.resolve();
+    });
+
+    expect(confirmButton.disabled).toBe(false);
+    expect(closeModal).not.toHaveBeenCalled();
+  });
+});

packages/modals/src/confirm-modal.tsx

@@ -36,8 +36,8 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
   const closeOnConfirm = innerProps.closeOnConfirm ?? true;
   const closeOnCancel = innerProps.closeOnCancel ?? true;
 
-  const cancelLabel = labels?.cancel ?? ((t: TranslationFunction) => t("common.action.cancel"));
-  const confirmLabel = labels?.confirm ?? ((t: TranslationFunction) => t("common.action.confirm"));
+  const cancelLabel = labels?.cancel ?? ((translate: TranslationFunction) => translate("common.action.cancel"));
+  const confirmLabel = labels?.confirm ?? ((translate: TranslationFunction) => translate("common.action.confirm"));
 
   const handleCancel = useCallback(
     async (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -59,19 +59,23 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
   const handleConfirm = useCallback(
     async (event: React.MouseEvent<HTMLButtonElement>) => {
       setLoading(true);
+      try {
+        if (typeof confirmProps?.onClick === "function") {
+          confirmProps.onClick(event);
+        }
 
-      if (typeof confirmProps?.onClick === "function") {
-        confirmProps.onClick(event);
-      }
+        if (typeof onConfirm === "function") {
+          await onConfirm();
+        }
 
-      if (typeof onConfirm === "function") {
-        await onConfirm();
+        if (closeOnConfirm) {
+          actions.closeModal();
+        }
+      } catch {
+        // Keep the modal open. Callers own action-specific error feedback.
+      } finally {
+        setLoading(false);
       }
-
-      if (closeOnConfirm) {
-        actions.closeModal();
-      }
-      setLoading(false);
     },
     [confirmProps, onConfirm, closeOnConfirm, actions],
   );