fixes

client/src/components/ConfirmActionDialog.tsx

@@ -11,6 +11,12 @@ interface ConfirmActionDialogProps {
   intent?: "danger" | "primary";
   confirmationLabel?: string;
   confirmationValue?: string;
+  extraFieldLabel?: string;
+  extraFieldPlaceholder?: string;
+  extraFieldValue?: string;
+  extraFieldRequired?: boolean;
+  extraFieldMultiline?: boolean;
+  onExtraFieldChange?: (value: string) => void;
   isConfirming?: boolean;
   onConfirm: () => void | Promise<void>;
   onClose: () => void;
@@ -27,6 +33,12 @@ export function ConfirmActionDialog({
   intent = "danger",
   confirmationLabel,
   confirmationValue,
+  extraFieldLabel,
+  extraFieldPlaceholder,
+  extraFieldValue = "",
+  extraFieldRequired = false,
+  extraFieldMultiline = false,
+  onExtraFieldChange,
   isConfirming = false,
   onConfirm,
   onClose,
@@ -44,7 +56,11 @@ export function ConfirmActionDialog({
   }
 
   const requiresTypedConfirmation = Boolean(confirmationLabel && confirmationValue);
-  const isConfirmDisabled = isConfirming || (requiresTypedConfirmation && typedValue.trim() !== confirmationValue);
+  const requiresExtraField = Boolean(extraFieldLabel);
+  const isConfirmDisabled =
+    isConfirming ||
+    (requiresTypedConfirmation && typedValue.trim() !== confirmationValue) ||
+    (requiresExtraField && extraFieldRequired && extraFieldValue.trim().length === 0);
   const confirmButtonClass =
     intent === "danger"
       ? "bg-red-600 text-white hover:bg-red-700"
@@ -81,6 +97,27 @@ export function ConfirmActionDialog({
             />
           </label>
         ) : null}
+        {requiresExtraField ? (
+          <label className="mt-4 block">
+            <span className="mb-2 block text-sm font-semibold text-text">{extraFieldLabel}</span>
+            {extraFieldMultiline ? (
+              <textarea
+                value={extraFieldValue}
+                onChange={(event) => onExtraFieldChange?.(event.target.value)}
+                placeholder={extraFieldPlaceholder}
+                rows={4}
+                className="w-full rounded-[18px] border border-line/70 bg-page px-3 py-2 text-text outline-none"
+              />
+            ) : (
+              <input
+                value={extraFieldValue}
+                onChange={(event) => onExtraFieldChange?.(event.target.value)}
+                placeholder={extraFieldPlaceholder}
+                className="w-full rounded-2xl border border-line/70 bg-page px-3 py-2 text-text outline-none"
+              />
+            )}
+          </label>
+        ) : null}
         <div className="mt-5 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
           <button
             type="button"