Disable reset button after confirmation (#2537)

Currently, after confirming the reset, there is no feedback in the dialog to indicate that the operation has started, which makes it appear as if the button is not working.  --- <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2537" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1"> <img src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1" alt="Open with Devin"> </picture> </a>   --- ## Summary by cubic Disable the reset confirmation button after confirmation and show “Resetting…” to give clear feedback and prevent duplicate resets. - **Bug Fixes** - ConfirmationDialog: added confirmDisabled prop to control disabled state and styling. - Settings: when isResetting is true, disable confirm button and set text to “Resetting…”. <sup>Written for commit 02397273dcf8e04ae7b8b39fea2f58b767edc6b6. Summary will update on new commits.</sup>

Disable reset button after confirmation (#2537)
6a554980 · Mohamed Aziz Mejri · GitHub · f03bf922 · 6a554980 · 6a554980
--- a/src/components/ConfirmationDialog.tsx
+++ b/src/components/ConfirmationDialog.tsx
@@ -7,6 +7,7 @@ interface ConfirmationDialogProps {
  confirmText?: string;
  cancelText?: string;
  confirmButtonClass?: string;
+  confirmDisabled?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
 }
@@ -18,6 +19,7 @@ export default function ConfirmationDialog({
  confirmText = "Confirm",
  cancelText = "Cancel",
  confirmButtonClass = "bg-red-600 hover:bg-red-700 focus:ring-red-500",
+  confirmDisabled = false,
  onConfirm,
  onCancel,
 }: ConfirmationDialogProps) {
@@ -64,8 +66,9 @@ export default function ConfirmationDialog({
          <div className="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
            <button
              type="button"
-              className={`inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm ${confirmButtonClass}`}
+              className={`inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm ${confirmButtonClass} ${confirmDisabled ? "opacity-50 cursor-not-allowed" : ""}`}
              onClick={onConfirm}
+              disabled={confirmDisabled}
            >
              {confirmText}
            </button>

--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -236,8 +236,9 @@ export default function SettingsPage() {
        isOpen={isResetDialogOpen}
        title="Reset Everything"
        message="Are you sure you want to reset everything? This will delete all your apps, chats, and settings. This action cannot be undone."
-        confirmText="Reset Everything"
+        confirmText={isResetting ? "Resetting..." : "Reset Everything"}
        cancelText="Cancel"
+        confirmDisabled={isResetting}
        onConfirm={handleResetEverything}
        onCancel={() => setIsResetDialogOpen(false)}
      />