Use non-native alert and confirm dialogs

packages/ui/src/stores/alerts.ts

@@ -0,0 +1,46 @@
+import { createSignal } from "solid-js"
+
+export type AlertVariant = "info" | "warning" | "error"
+
+export type AlertDialogState = {
+  type?: "alert" | "confirm"
+  title?: string
+  message: string
+  detail?: string
+  variant?: AlertVariant
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  resolve?: (value: boolean) => void
+}
+
+const [alertDialogState, setAlertDialogState] = createSignal<AlertDialogState | null>(null)
+
+export function showAlertDialog(message: string, options?: Omit<AlertDialogState, "message">) {
+  setAlertDialogState({
+    type: "alert",
+    message,
+    ...options,
+  })
+}
+
+export function showConfirmDialog(message: string, options?: Omit<AlertDialogState, "message">): Promise<boolean> {
+  const activeElement = typeof document !== "undefined" ? (document.activeElement as HTMLElement | null) : null
+  activeElement?.blur()
+
+  return new Promise<boolean>((resolve) => {
+    setAlertDialogState({
+      type: "confirm",
+      message,
+      ...options,
+      resolve,
+    })
+  })
+}
+
+export function dismissAlertDialog() {
+  setAlertDialogState(null)
+}
+
+export { alertDialogState }

packages/ui/src/stores/session-events.ts

@@ -16,6 +16,7 @@ import type {
 import { showToastNotification, ToastVariant } from "../lib/notifications"
 import { preferences } from "./preferences"
 import { instances, addPermissionToQueue, removePermissionFromQueue, refreshPermissionsForSession } from "./instances"
+import { showAlertDialog } from "./alerts"
 import {
   sessions,
   setSessions,
@@ -441,7 +442,10 @@ function handleSessionError(_instanceId: string, event: EventSessionError): void
     }
   }
 
-  alert(`Error: ${message}`)
+  showAlertDialog(`Error: ${message}`, {
+    title: "Session error",
+    variant: "error",
+  })
 }
 
 function handleMessageRemoved(instanceId: string, event: MessageRemovedEvent): void {