fix(web): use themed confirmation dialogs (#5624)

Author: StiensWout

apps/desktop/src/electron/ElectronDialog.test.ts

@@ -28,70 +28,6 @@ describe("ElectronDialog", () => {
     showErrorBoxMock.mockReset();
   });
 
-  it.effect("returns false without opening a confirm dialog for empty messages", () =>
-    Effect.gen(function* () {
-      const dialog = yield* ElectronDialog.ElectronDialog;
-
-      const result = yield* dialog.confirm({
-        message: "   ",
-        owner: Option.none(),
-      });
-
-      assert.isFalse(result);
-      assert.equal(showMessageBoxMock.mock.calls.length, 0);
-    }).pipe(Effect.provide(ElectronDialog.layer)),
-  );
-
-  it.effect("opens a confirm dialog for the owner window", () =>
-    Effect.gen(function* () {
-      const owner = { id: 1 } as BrowserWindow;
-      showMessageBoxMock.mockResolvedValue({ response: 1 });
-      const dialog = yield* ElectronDialog.ElectronDialog;
-
-      const result = yield* dialog.confirm({
-        message: "Delete worktree?",
-        owner: Option.some(owner),
-      });
-
-      assert.isTrue(result);
-      assert.deepEqual(showMessageBoxMock.mock.calls[0], [
-        owner,
-        {
-          type: "question",
-          buttons: ["No", "Yes"],
-          defaultId: 0,
-          cancelId: 0,
-          noLink: true,
-          message: "Delete worktree?",
-        },
-      ]);
-    }).pipe(Effect.provide(ElectronDialog.layer)),
-  );
-
-  it.effect("opens an app-level confirm dialog when there is no owner window", () =>
-    Effect.gen(function* () {
-      showMessageBoxMock.mockResolvedValue({ response: 0 });
-      const dialog = yield* ElectronDialog.ElectronDialog;
-
-      const result = yield* dialog.confirm({
-        message: "Delete worktree?",
-        owner: Option.none(),
-      });
-
-      assert.isFalse(result);
-      assert.deepEqual(showMessageBoxMock.mock.calls[0], [
-        {
-          type: "question",
-          buttons: ["No", "Yes"],
-          defaultId: 0,
-          cancelId: 0,
-          noLink: true,
-          message: "Delete worktree?",
-        },
-      ]);
-    }).pipe(Effect.provide(ElectronDialog.layer)),
-  );
-
   it.effect("preserves folder picker request context and cause", () =>
     Effect.gen(function* () {
       const cause = new Error("folder picker failed");
@@ -117,31 +53,6 @@ describe("ElectronDialog", () => {
     }).pipe(Effect.provide(ElectronDialog.layer)),
   );
 
-  it.effect("preserves confirmation request context and cause", () =>
-    Effect.gen(function* () {
-      const cause = new Error("confirmation failed");
-      const owner = { id: 9 } as BrowserWindow;
-      showMessageBoxMock.mockRejectedValue(cause);
-      const dialog = yield* ElectronDialog.ElectronDialog;
-
-      const error = yield* Effect.flip(
-        dialog.confirm({
-          owner: Option.some(owner),
-          message: "  Confirm removal?  ",
-        }),
-      );
-
-      assert.instanceOf(error, ElectronDialog.ElectronDialogConfirmError);
-      assert.strictEqual(error.ownerWindowId, 9);
-      assert.strictEqual(error.promptLength, "Confirm removal?".length);
-      assert.notProperty(error, "promptMessage");
-      assert.strictEqual(error.cause, cause);
-      assert.include(error.message, "window 9");
-      assert.notInclude(error.message, "Confirm removal?");
-      assert.notInclude(error.message, cause.message);
-    }).pipe(Effect.provide(ElectronDialog.layer)),
-  );
-
   it.effect("preserves message box request context and cause", () =>
     Effect.gen(function* () {
       const cause = new Error("message box failed");

apps/desktop/src/electron/ElectronDialog.ts

@@ -6,8 +6,6 @@ import * as Schema from "effect/Schema";
 
 import * as Electron from "electron";
 
-const CONFIRM_BUTTON_INDEX = 1;
-
 export class ElectronDialogPickFolderError extends Schema.TaggedErrorClass<ElectronDialogPickFolderError>()(
   "ElectronDialogPickFolderError",
   {
@@ -38,20 +36,6 @@ export class ElectronDialogPickFilesError extends Schema.TaggedErrorClass<Electr
   }
 }
 
-export class ElectronDialogConfirmError extends Schema.TaggedErrorClass<ElectronDialogConfirmError>()(
-  "ElectronDialogConfirmError",
-  {
-    ownerWindowId: Schema.NullOr(Schema.Number),
-    promptLength: Schema.Number,
-    cause: Schema.Defect(),
-  },
-) {
-  override get message(): string {
-    const owner = this.ownerWindowId === null ? "the application" : `window ${this.ownerWindowId}`;
-    return `Failed to open an Electron confirmation dialog for ${owner} with a ${this.promptLength}-character prompt.`;
-  }
-}
-
 export class ElectronDialogShowMessageBoxError extends Schema.TaggedErrorClass<ElectronDialogShowMessageBoxError>()(
   "ElectronDialogShowMessageBoxError",
   {
@@ -85,7 +69,6 @@ export class ElectronDialogShowErrorBoxError extends Schema.TaggedErrorClass<Ele
 export const ElectronDialogError = Schema.Union([
   ElectronDialogPickFolderError,
   ElectronDialogPickFilesError,
-  ElectronDialogConfirmError,
   ElectronDialogShowMessageBoxError,
   ElectronDialogShowErrorBoxError,
 ]);
@@ -103,11 +86,6 @@ export interface ElectronDialogPickFilesInput {
   readonly filters: readonly Electron.FileFilter[];
 }
 
-export interface ElectronDialogConfirmInput {
-  readonly owner: Option.Option<Electron.BrowserWindow>;
-  readonly message: string;
-}
-
 export class ElectronDialog extends Context.Service<
   ElectronDialog,
   {
@@ -117,9 +95,6 @@ export class ElectronDialog extends Context.Service<
     readonly pickFiles: (
       input: ElectronDialogPickFilesInput,
     ) => Effect.Effect<readonly string[], ElectronDialogPickFilesError>;
-    readonly confirm: (
-      input: ElectronDialogConfirmInput,
-    ) => Effect.Effect<boolean, ElectronDialogConfirmError>;
     readonly showMessageBox: (
       options: Electron.MessageBoxOptions,
     ) => Effect.Effect<Electron.MessageBoxReturnValue, ElectronDialogShowMessageBoxError>;
@@ -188,39 +163,6 @@ export const make = ElectronDialog.of({
     });
     return result.canceled ? [] : result.filePaths;
   }),
-  confirm: Effect.fn("desktop.electron.dialog.confirm")(function* (input) {
-    const normalizedMessage = input.message.trim();
-    if (normalizedMessage.length === 0) {
-      return false;
-    }
-
-    const options = {
-      type: "question" as const,
-      buttons: ["No", "Yes"],
-      defaultId: 0,
-      cancelId: 0,
-      noLink: true,
-      message: normalizedMessage,
-    };
-    const ownerWindowId = Option.match(input.owner, {
-      onNone: () => null,
-      onSome: (owner) => owner.id,
-    });
-    const result = yield* Effect.tryPromise({
-      try: () =>
-        Option.match(input.owner, {
-          onNone: () => Electron.dialog.showMessageBox(options),
-          onSome: (owner) => Electron.dialog.showMessageBox(owner, options),
-        }),
-      catch: (cause) =>
-        new ElectronDialogConfirmError({
-          ownerWindowId,
-          promptLength: normalizedMessage.length,
-          cause,
-        }),
-    });
-    return result.response === CONFIRM_BUTTON_INDEX;
-  }),
   showMessageBox: (options) =>
     Effect.tryPromise({
       try: () => Electron.dialog.showMessageBox(options),

apps/desktop/src/ipc/DesktopIpcHandlers.ts

@@ -31,7 +31,6 @@ import {
   setUpdateChannel,
 } from "./methods/updates.ts";
 import {
-  confirm,
   getAppBranding,
   getLocalEnvironmentBootstraps,
   getLocalEnvironmentBearerToken,
@@ -81,7 +80,6 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
 
   yield* ipc.handle(pickFolder);
   yield* ipc.handle(pickThemeFiles);
-  yield* ipc.handle(confirm);
   yield* ipc.handle(setTheme);
   yield* ipc.handle(showContextMenu);
   yield* ipc.handle(openExternal);

apps/desktop/src/ipc/channels.ts

@@ -1,6 +1,5 @@
 export const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
 export const PICK_THEME_FILES_CHANNEL = "desktop:pick-theme-files";
-export const CONFIRM_CHANNEL = "desktop:confirm";
 export const SET_THEME_CHANNEL = "desktop:set-theme";
 export const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 export const OPEN_EXTERNAL_CHANNEL = "desktop:open-external";

apps/desktop/src/ipc/methods/window.ts

@@ -220,19 +220,6 @@ export const pickFolder = DesktopIpc.makeIpcMethod({
   }),
 });
 
-export const confirm = DesktopIpc.makeIpcMethod({
-  channel: IpcChannels.CONFIRM_CHANNEL,
-  payload: Schema.String,
-  result: Schema.Boolean,
-  handler: Effect.fn("desktop.ipc.window.confirm")(function* (message) {
-    const dialog = yield* ElectronDialog.ElectronDialog;
-    const electronWindow = yield* ElectronWindow.ElectronWindow;
-    return yield* electronWindow.focusedMainOrFirst.pipe(
-      Effect.flatMap((owner) => dialog.confirm({ owner, message })),
-    );
-  }),
-});
-
 export const setTheme = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.SET_THEME_CHANNEL,
   payload: DesktopThemeSchema,

apps/desktop/src/preload.ts

@@ -98,7 +98,6 @@ contextBridge.exposeInMainWorld("desktopBridge", {
   setWslOnly: (enabled) => ipcRenderer.invoke(IpcChannels.SET_WSL_ONLY_CHANNEL, enabled),
   pickFolder: (options) => ipcRenderer.invoke(IpcChannels.PICK_FOLDER_CHANNEL, options),
   pickThemeFiles: () => ipcRenderer.invoke(IpcChannels.PICK_THEME_FILES_CHANNEL, undefined),
-  confirm: (message) => ipcRenderer.invoke(IpcChannels.CONFIRM_CHANNEL, message),
   setTheme: (theme) => ipcRenderer.invoke(IpcChannels.SET_THEME_CHANNEL, theme),
   showContextMenu: (items, position) =>
     ipcRenderer.invoke(IpcChannels.CONTEXT_MENU_CHANNEL, {

apps/desktop/src/window/DesktopApplicationMenu.test.ts

@@ -53,7 +53,6 @@ const electronAppLayer = Layer.succeed(ElectronApp.ElectronApp, {
 const electronDialogLayer = Layer.succeed(ElectronDialog.ElectronDialog, {
   pickFolder: () => Effect.succeed(Option.none()),
   pickFiles: () => Effect.succeed([]),
-  confirm: () => Effect.succeed(false),
   showMessageBox: () => Effect.succeed({ response: 0, checkboxChecked: false }),
   showErrorBox: () => Effect.void,
 } satisfies ElectronDialog.ElectronDialog["Service"]);

apps/web/src/components/ChatView.tsx

@@ -4745,6 +4745,7 @@ function ChatViewContent(props: ChatViewProps) {
           "This will discard newer messages and turn diffs in this thread.",
           "This action cannot be undone.",
         ].join("\n"),
+        { variant: "destructive" },
       );
       if (!confirmed) {
         return;

apps/web/src/components/ConfirmDialogHost.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useSyncExternalStore } from "react";
+
+import {
+  completeConfirmDialogClose,
+  readConfirmDialogState,
+  registerConfirmDialogHost,
+  respondToConfirmDialog,
+  subscribeConfirmDialog,
+} from "../confirmDialog";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPopup,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+
+type ConfirmationCopy = {
+  readonly title: string;
+  readonly description: string | null;
+};
+
+export function resolveConfirmDialogCopy(message: string): ConfirmationCopy {
+  const normalizedMessage = message.trim();
+  const lines = normalizedMessage.split("\n");
+  const questionLineIndex = lines.findIndex((line) => line.trim().endsWith("?"));
+
+  if (questionLineIndex >= 0) {
+    const title = lines[questionLineIndex]!.trim();
+    const description = lines
+      .filter((_, index) => index !== questionLineIndex)
+      .join("\n")
+      .trim();
+    return { title, description: description || null };
+  }
+
+  const questionMarkIndex = normalizedMessage.indexOf("?");
+  if (questionMarkIndex >= 0) {
+    return {
+      title: normalizedMessage.slice(0, questionMarkIndex + 1).trim(),
+      description: normalizedMessage.slice(questionMarkIndex + 1).trim() || null,
+    };
+  }
+
+  return {
+    title: "Confirm action",
+    description: normalizedMessage || "This action requires your confirmation.",
+  };
+}
+
+export function ConfirmDialogHost() {
+  const state = useSyncExternalStore(
+    subscribeConfirmDialog,
+    readConfirmDialogState,
+    readConfirmDialogState,
+  );
+
+  useEffect(() => registerConfirmDialogHost(), []);
+
+  const copy = resolveConfirmDialogCopy(state.status === "idle" ? "" : state.message);
+  const confirmVariant = state.status === "idle" ? "default" : state.variant;
+  const onCancel = () => respondToConfirmDialog(false);
+  const onConfirm = () => respondToConfirmDialog(true);
+
+  return (
+    <AlertDialog
+      open={state.status === "confirming"}
+      onOpenChange={(open) => {
+        if (!open) onCancel();
+      }}
+      onOpenChangeComplete={(open) => {
+        if (!open) completeConfirmDialogClose();
+      }}
+    >
+      <AlertDialogPopup className="max-w-lg">
+        <AlertDialogHeader>
+          <AlertDialogTitle>{copy.title}</AlertDialogTitle>
+          {copy.description ? (
+            <AlertDialogDescription className="whitespace-pre-line">
+              {copy.description}
+            </AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
+          <Button variant={confirmVariant} onClick={onConfirm}>
+            Confirm
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogPopup>
+    </AlertDialog>
+  );
+}