vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: extract ConfirmDialog, use it for the destroy confirm

Browse source 
mara, reviewing the swarm-ui destroy-trigger PR: "why the extra
styling? shouldnt there be a component that does this already?" There
wasnt one -- Dialog is deliberately content-agnostic (see its own
file-top comment), so the destroy confirm had grown its own
page-scoped .agents-destroy-confirm/-actions CSS for what is really a
generic "message + cancel/confirm button row" shape.

Extracted ui/confirm-dialog/ConfirmDialog.tsx: wraps Dialog, owns the
button row, leaves the message body to the caller via children.
AgentsPage now uses it instead of a bare Dialog + bespoke CSS; deleted
the now-unused AgentsPage.css.
This commit is contained in:
iris 2026-09-07 19:02:23 +02:00
commit 82a4324b17
4 changed files with 81 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.css Normal file
View file

@ -0,0 +1,13 @@
/* <ConfirmDialog> — body + button-row layout only; `Dialog.css` owns the
surrounding modal chrome, `Button.css` owns the buttons themselves. */
.confirm-dialog {
display: flex;
flex-direction: column;
gap: 1em;
max-width: 28em;
}
.confirm-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.75em;
}

55
frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.tsx Normal file
View file

@ -0,0 +1,55 @@
// <ConfirmDialog> — a `Dialog` pre-wired for the "message + cancel/confirm
// button row" shape every confirm-before-acting flow needs. Extracted out
// of AgentsPage's destroy confirmation on mara's review question ("why the
// extra styling? shouldnt there be a component that does this already?")
// — there wasn't one yet, so that page had grown its own
// `.agents-destroy-confirm`/`-actions` layout CSS for what turns out to be
// a generic shape. `Dialog` itself stays opinion-free about content (see
// its own file-top comment); this is the one layer up that isn't, so a
// future confirm flow gets the button row for free instead of another
// page-scoped CSS file.
//
// The message itself stays caller-owned via `children` — only the dialog
// wiring, spacing, and button row are shared.
import type { ComponentChildren } from "preact";
import { Button } from "../button/Button.js";
import { Dialog } from "../dialog/Dialog.js";
import "./ConfirmDialog.css";
export function ConfirmDialog({
open,
label,
onCancel,
onConfirm,
confirmLabel = "confirm",
cancelLabel = "cancel",
confirmDisabled = false,
children,
}: {
open: boolean;
label: string;
onCancel: () => void;
onConfirm: () => void;
confirmLabel?: string;
cancelLabel?: string;
confirmDisabled?: boolean;
children: ComponentChildren;
}) {
return (
<Dialog open={open} onClose={onCancel} label={label}>
<div class="confirm-dialog">
<div class="confirm-dialog-body">{children}</div>
<div class="confirm-dialog-actions">
<Button onClick={onCancel}>{cancelLabel}</Button>
<Button
variant="primary"
onClick={onConfirm}
disabled={confirmDisabled}
>
{confirmLabel}
</Button>
</div>
</div>
</Dialog>
);
}