feat: replace window.confirm() with ConfirmDialog component

Author: Nishita0707

imagelab-backend/app/utils/color.py

@@ -1,6 +1,5 @@
 import re
 
-
 HEX_COLOR_RE = re.compile(r"^[0-9a-fA-F]{6}$")
 
 
@@ -19,17 +18,13 @@ def hex_to_bgr(hex_color: str) -> tuple[int, int, int]:
         ValueError: If hex_color is not a valid 6-digit hex color string.
     """
     if not isinstance(hex_color, str):
-        raise TypeError(
-            f"hex_to_bgr expects a str, got {type(hex_color).__name__!r}"
-        )
+        raise TypeError(f"hex_to_bgr expects a str, got {type(hex_color).__name__!r}")
 
     original = hex_color
     normalized = hex_color.removeprefix("#")
 
     if not HEX_COLOR_RE.fullmatch(normalized):
-        raise ValueError(
-            f"Invalid hex color: {original!r}. Expected format '#rrggbb' or 'rrggbb'."
-        )
+        raise ValueError(f"Invalid hex color: {original!r}. Expected format '#rrggbb' or 'rrggbb'.")
 
     r = int(normalized[0:2], 16)
     g = int(normalized[2:4], 16)

imagelab-backend/tests/test_filtering_operators.py

@@ -80,9 +80,7 @@ def test_asymmetric_kernel_uses_width_height_convention(self):
         image = np.arange(75, dtype=np.uint8).reshape(5, 5, 3)
         width, height = 1, 5
 
-        result = BoxFilter({"width": width, "height": height, "depth": -1}).compute(
-            image
-        )
+        result = BoxFilter({"width": width, "height": height, "depth": -1}).compute(image)
         expected = cv2.boxFilter(
             image,
             -1,

imagelab-frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+
+interface ConfirmDialogProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmDialog({ message, onConfirm, onCancel }: ConfirmDialogProps) {
+  // Close on Escape key — mirrors SharePipelineModal pattern
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onCancel]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onCancel}
+      role="presentation"
+    >
+      <div
+        role="alertdialog"
+        aria-modal="true"
+        aria-describedby="confirm-dialog-message"
+        className="bg-white rounded-xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Body */}
+        <div className="px-5 py-5">
+          <p id="confirm-dialog-message" className="text-sm text-gray-700 leading-relaxed">
+            {message}
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 px-5 pb-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-1.5 rounded-lg text-sm font-medium border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className="px-4 py-1.5 rounded-lg text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600 transition-colors"
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}