refactor(web): shared ConfirmDialog, FormControls, and Modal a11y

Extract reusable confirm/modal shells and bordered form controls, adopt them across list pages and editors, and improve icon-button labels plus KvPage keyboard rows.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/web/src/pages/AuthProfilesPage.jsx

@@ -8,6 +8,7 @@ import {
   useHttpAuths,
 } from "../api/hooks.js";
 import { AuthEditorModal } from "../components/AuthEditorModal.jsx";
+import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
 import { formatTime } from "../lib/format.jsx";
 
 function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
@@ -66,7 +67,7 @@ function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
         type="button"
         className="btn btn-ghost btn-xs btn-square"
         title={shown ? "Hide" : "Reveal"}
-        aria-label={shown ? "Hide value" : "Reveal value"}
+        aria-label={shown ? "Hide" : "Reveal"}
         disabled={loading}
         onClick={(e) => {
           e.stopPropagation();
@@ -241,6 +242,7 @@ export function AuthProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
+                      aria-label="Edit"
                       onClick={() => navigate(`/auth/${encodeURIComponent(a.name)}/edit`)}
                     >
                       <LuPencil className="size-4" />
@@ -249,6 +251,7 @@ export function AuthProfilesPage() {
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
                       title="Delete"
+                      aria-label="Delete"
                       onClick={() => setConfirmDelete(a)}
                     >
                       <LuTrash2 className="size-4" />
@@ -278,39 +281,17 @@ export function AuthProfilesPage() {
         />
       ) : null}
 
-      {confirmDelete ? (
-        <dialog className="modal modal-open">
-          <div className="modal-box">
-            <h3 className="font-bold">Delete {confirmDelete.name}?</h3>
-            <p className="text-sm mt-2">
-              Workflows that reference this profile will fail auth until updated.
-            </p>
-            {del.isError ? (
-              <p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
-            ) : null}
-            <div className="modal-action">
-              <button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                className="btn btn-error"
-                disabled={del.isPending}
-                onClick={() =>
-                  del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
-                }
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-          <form method="dialog" className="modal-backdrop">
-            <button type="button" onClick={() => setConfirmDelete(null)}>
-              close
-            </button>
-          </form>
-        </dialog>
-      ) : null}
+      <ConfirmDialog
+        open={Boolean(confirmDelete)}
+        title={confirmDelete ? `Delete ${confirmDelete.name}?` : ""}
+        message="Workflows that reference this profile will fail auth until updated."
+        error={del.isError ? errorMessage(del.error) : null}
+        loading={del.isPending}
+        onCancel={() => setConfirmDelete(null)}
+        onConfirm={() =>
+          del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
+        }
+      />
     </div>
   );
 }