Release v0.1.3

webui/src/components/UnsavedChangesGuard.tsx

@@ -1,6 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import Button from "./Button";
+import Dialog from "./Dialog";
 import DismissibleAlert from "./DismissibleAlert";
 
 export type UnsavedNavigationAction = () => void;
@@ -139,23 +140,26 @@ export function UnsavedChangesProvider({ children }: { children: ReactNode }) {
     <UnsavedChangesContext.Provider value={value}>
       {children}
       {pendingAction && registration && (
-        <div className="overlay-backdrop" role="dialog" aria-modal="true">
-          <div className="modal-panel unsaved-changes-dialog">
-            <header className="modal-header">
-              <h2>{registration.title ?? "Unsaved changes"}</h2>
-              <button className="modal-close" onClick={() => setPendingAction(null)} disabled={saving}>x</button>
-            </header>
-            <div className="modal-body">
-              <p>{registration.message ?? "This page has unsaved changes. Save them before leaving, or discard the changes and continue."}</p>
-              {saveError && <DismissibleAlert tone="danger" resetKey={saveError}>{saveError}</DismissibleAlert>}
-            </div>
-            <footer className="modal-footer unsaved-changes-actions">
+        <Dialog
+          open
+          role="alertdialog"
+          title={registration.title ?? "Unsaved changes"}
+          className="unsaved-changes-dialog"
+          footerClassName="unsaved-changes-actions"
+          closeOnBackdrop={!saving}
+          closeDisabled={saving}
+          onClose={() => setPendingAction(null)}
+          footer={(
+            <>
               <Button onClick={() => setPendingAction(null)} disabled={saving}>Cancel</Button>
               <Button onClick={handleDiscardAndLeave} disabled={saving}>Discard</Button>
               <Button variant="primary" onClick={() => void handleSaveAndLeave()} disabled={saving}>{saving ? "Saving..." : "Save and leave"}</Button>
-            </footer>
-          </div>
-        </div>
+            </>
+          )}
+        >
+          <p>{registration.message ?? "This page has unsaved changes. Save them before leaving, or discard the changes and continue."}</p>
+          {saveError && <DismissibleAlert tone="danger" resetKey={saveError}>{saveError}</DismissibleAlert>}
+        </Dialog>
       )}
     </UnsavedChangesContext.Provider>
   );