Confirm before initializing git repos

Author: adinschmidt

apps/web/src/components/GitActionsControl.tsx

@@ -18,6 +18,15 @@ import {
 import { useAppSettings } from "~/appSettings";
 import { Button } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPopup,
+  AlertDialogTitle,
+} from "~/components/ui/alert-dialog";
 import {
   Dialog,
   DialogDescription,
@@ -161,6 +170,8 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
     [activeThreadId],
   );
   const queryClient = useQueryClient();
+  const [confirmInitOpen, setConfirmInitOpen] = useState(false);
+  const [isInitConfirming, setIsInitConfirming] = useState(false);
   const [isCommitDialogOpen, setIsCommitDialogOpen] = useState(false);
   const [dialogCommitMessage, setDialogCommitMessage] = useState("");
   const [excludedFiles, setExcludedFiles] = useState<ReadonlySet<string>>(new Set());
@@ -191,6 +202,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
   const noneSelected = selectedFiles.length === 0;
 
   const initMutation = useMutation(gitInitMutationOptions({ cwd: gitCwd, queryClient }));
+  const isInitPending = initMutation.isPending || isInitConfirming;
 
   const runImmediateGitActionMutation = useMutation(
     gitRunStackedActionMutationOptions({
@@ -632,19 +644,51 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
     [gitCwd, threadToastData],
   );
 
+  const confirmGitInit = useCallback(() => {
+    if (isInitPending) return;
+
+    setIsInitConfirming(true);
+    setConfirmInitOpen(false);
+    initMutation.mutate(undefined, {
+      onSettled: () => {
+        setIsInitConfirming(false);
+      },
+    });
+  }, [initMutation, isInitPending]);
+
   if (!gitCwd) return null;
 
   return (
     <>
       {!isRepo ? (
-        <Button
-          variant="outline"
-          size="xs"
-          disabled={initMutation.isPending}
-          onClick={() => initMutation.mutate()}
-        >
-          {initMutation.isPending ? "Initializing..." : "Initialize Git"}
-        </Button>
+        <>
+          <Button
+            variant="outline"
+            size="xs"
+            disabled={isInitPending}
+            onClick={() => setConfirmInitOpen(true)}
+          >
+            {isInitPending ? "Initializing..." : "Initialize Git"}
+          </Button>
+          <AlertDialog open={confirmInitOpen} onOpenChange={setConfirmInitOpen}>
+            <AlertDialogPopup>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Initialize Git repository?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This will run{" "}
+                  <code className="rounded bg-muted px-1 py-0.5 text-xs">git init</code> in{" "}
+                  <code className="rounded bg-muted px-1 py-0.5 text-xs break-all">{gitCwd}</code>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
+                <Button disabled={isInitPending} onClick={confirmGitInit}>
+                  Initialize
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogPopup>
+          </AlertDialog>
+        </>
       ) : (
         <Group aria-label="Git actions">
           {quickActionDisabledReason ? (