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

swarm-ui: drop the redundant outer dialog card, move close into the panel header

Browse source 
Dialog and Panel both drew their own bordered/backgrounded card in the
same --bg-elev, so a Panel-based dialog (create-agent, link-matrix-account)
rendered as two concentric cards with a floating close button on the
outer one and no purpose to it.

Give Dialog a "plain" mode that drops its own card chrome (border,
background, padding) and floating close button, and give Panel an
optional onClose that renders a close button at the end of its own
header row instead. AgentsPage's two Panel-backed dialogs now use
plain + Panel's onClose, so the Panel is the dialog's only visible
card. ConfirmDialog (no Panel of its own) is unaffected — plain
defaults to false, unchanged card + floating close button.

Added a ComponentsPage sample demonstrating the plain + onClose
pairing. Verified both dialog modes via a real headless-chromium
screenshot (plain dialog: single card, close button in the header
bar; default dialog: unchanged floating close button).
This commit is contained in:
iris 2026-09-13 00:58:53 +02:00
commit 8a4c613e4e
8 changed files with 158 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

33
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -219,6 +219,36 @@ function DialogSample() {
);
}
// `plain`: a `Panel`'s own header bar/border is the dialog's
// only card, not a second one nested inside `Dialog`'s own — pair
// `plain` with `Panel`'s `onClose` so the close button still exists,
// just moved into that header instead of floating over the whole thing.
function PlainDialogSample() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>open plain dialog</Button>
<Dialog
open={open}
onClose={() => setOpen(false)}
label="sample plain dialog"
plain
>
<Panel
title="a form-shaped dialog"
icon="🔗"
onClose={() => setOpen(false)}
>
<p>
One card, one header bar — the close button lives here instead of
floating over a second, purposeless outer one.
</p>
</Panel>
</Dialog>
</>
);
}
// Own state for the same reason `TextFieldSample` needs it — a
// controlled sample has to actually respond to interaction.
function MultiselectFilterSample() {
@ -458,6 +488,9 @@ export function ComponentsPage() {
<Sample label="modal, caller-owned content">
<DialogSample />
</Sample>
<Sample label="plain — content supplies its own card + close">
<PlainDialogSample />
</Sample>
</Section>
<Section title="ConfirmDialog">

11
frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx
View file

@ -72,7 +72,14 @@ type SubmitState =
// exception report on this page.
const NAME_PATTERN = "[a-z0-9\\-]{1,63}";
export function CreateAgentForm() {
export function CreateAgentForm({
onClose,
}: {
/** Rendered as the form panel's own close button — this form always
* mounts inside a `plain` `Dialog` (see `AgentsPage`), which no longer
* floats its own. */
onClose?: () => void;
}) {
const [name, setName] = useState("");
const [hive, setHive] = useState("");
// `null` = still loading, `[]` = loaded but empty (a real, if unusual,
@ -132,7 +139,7 @@ export function CreateAgentForm() {
return (
<div class="create-agent-layout">
<div class="create-agent-form-col">
<Panel title="create agent" icon="🤖">
<Panel title="create agent" icon="🤖" onClose={onClose}>
<p class="create-agent-intro">
Create a new agent's swarm-level identity. This only queues the job
— check <Link href="/jobs">jobs</Link> to watch it settle.

11
frontend/packages/swarm-ui/src/pages/LinkMatrixAccountForm.tsx
View file

@ -63,9 +63,14 @@ const MODE_OPTIONS = [
export function LinkMatrixAccountForm({
hive,
agent,
onClose,
}: {
hive: string;
agent: string;
/** Rendered as the panel header's own close button — this form always
* mounts inside a `plain` `Dialog` (see `AgentsPage`), which no longer
* floats its own. */
onClose?: () => void;
}) {
const [account, setAccount] = useState("");
const [mode, setMode] = useState<Mode>("token");
@ -127,7 +132,11 @@ export function LinkMatrixAccountForm({
}
return (
<Panel title={`link a matrix account — ${agent}`} icon="🔗">
<Panel
title={`link a matrix account — ${agent}`}
icon="🔗"
onClose={onClose}
>
<p>
Writes the credential to the swarm secret store and notifies{" "}
<strong>{hive}</strong> to deliver it. The agent's own matrix daemon

5
frontend/packages/swarm-ui/src/pages/agents/AgentsPage.tsx
View file

@ -592,13 +592,15 @@ export function AgentsPage() {
open={createOpen}
onClose={() => setCreateOpen(false)}
label="create agent"
plain
>
<CreateAgentForm />
<CreateAgentForm onClose={() => setCreateOpen(false)} />
</Dialog>
<Dialog
open={matrixTarget !== null}
onClose={() => setMatrixTarget(null)}
label="link a matrix account"
plain
>
{/* `matrixTarget.hive` is non-null here — the trigger badge above
is disabled without one, so this can only open with a real
@ -607,6 +609,7 @@ export function AgentsPage() {
<LinkMatrixAccountForm
hive={matrixTarget.hive}
agent={matrixTarget.name}
onClose={() => setMatrixTarget(null)}
/>
) : null}
</Dialog>

16
frontend/packages/swarm-ui/src/ui/dialog/Dialog.css
View file

@ -32,6 +32,16 @@
.ui-dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
/* `plain` (see Dialog.tsx's file-top comment): drop this dialog's own
card look entirely — sizing/backdrop/scroll behavior above are the
only things left that are actually this component's job once the
content supplies its own bordered card (a `Panel`). */
.ui-dialog-plain {
border: none;
border-radius: 0;
background: none;
padding: 0;
}
.ui-dialog-close {
position: absolute;
top: 0.75em;
@ -60,3 +70,9 @@
render directly under the button instead of beside it. */
padding-right: 3.25em;
}
/* `plain` has no floating close button of its own to clear — the
content's own `Panel` header carries one instead (see `.ui-panel-close`
in Panel.css). */
.ui-dialog-body-plain {
padding-right: 0;
}

27
frontend/packages/swarm-ui/src/ui/dialog/Dialog.tsx
View file

@ -10,6 +10,18 @@
// from its former life as a standalone route — reusing that unchanged
// is simpler and lower-risk than re-deriving a modal-specific layout
// for content mara has already reviewed).
//
// `plain` (mara, screenshot of the matrix-account dialog: "the outer
// card does not serve a purpose. move the close btn into the bar and
// drop one layer"): content that's already a `Panel` — a bordered
// card with its own header bar — nested inside this dialog's own
// bordered card produced two concentric boxes in the same `--bg-elev`,
// one serving no purpose. `plain` drops this dialog's own card chrome
// (border/background/padding) and its floating close button, so a
// `Panel` (with its own `onClose` wired into its header) becomes the
// dialog's sole visible card instead of a second one nested inside it.
// Escape and backdrop-click still close it either way — those are the
// native `<dialog>`'s own behavior, not this button's.
import { useEffect, useRef } from "preact/hooks";
import type { ComponentChildren } from "preact";
import "./Dialog.css";
@ -19,6 +31,7 @@ export function Dialog({
onClose,
label,
children,
plain = false,
}: {
open: boolean;
onClose: () => void;
@ -26,6 +39,10 @@ export function Dialog({
// why content owns its own heading.
label: string;
children: ComponentChildren;
/** Drop this dialog's own card chrome + floating close button — see
* file-top comment. Pair with a `Panel` (or similar) that renders its
* own header + `onClose` button as the dialog's content. */
plain?: boolean;
}) {
const ref = useRef<HTMLDialogElement>(null);
@ -57,7 +74,7 @@ export function Dialog({
return (
<dialog
ref={ref}
class="ui-dialog"
class={plain ? "ui-dialog ui-dialog-plain" : "ui-dialog"}
aria-label={label}
// A click lands on the `<dialog>` element itself (not any child)
// exactly when it's outside the rendered content box — inside
@ -67,6 +84,7 @@ export function Dialog({
if (e.target === ref.current) onClose();
}}
>
{plain ? null : (
<button
type="button"
class="ui-dialog-close"
@ -75,7 +93,12 @@ export function Dialog({
>
✕
</button>
<div class="ui-dialog-body">{children}</div>
)}
<div
class={plain ? "ui-dialog-body ui-dialog-body-plain" : "ui-dialog-body"}
>
{children}
</div>
</dialog>
);
}

35
frontend/packages/swarm-ui/src/ui/panel/Panel.css
View file

@ -20,14 +20,43 @@
line-height: 1;
}
/* `margin-left: auto` (not `justify-content: space-between` on the
header) so actions still land at the right edge even on the rare
panel that has actions but no title. */
.ui-panel-actions {
header) so this cluster still lands at the right edge even on the
rare panel that has actions/onClose but no title. `actions` and the
close button (`onClose`) share this one wrapper rather than each
getting their own `margin-left: auto` slot — see Panel.tsx's file-top
comment. */
.ui-panel-end {
display: flex;
align-items: center;
gap: 0.5em;
margin-left: auto;
}
.ui-panel-actions {
display: flex;
align-items: center;
gap: 0.5em;
}
/* Same interactive treatment as `Dialog`'s own `.ui-dialog-close`
(border/background on hover), scaled down to fit a header row instead
of floating absolutely over the whole card. */
.ui-panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 1.8em;
height: 1.8em;
border: 1px solid transparent;
border-radius: 0.4em;
background: none;
color: var(--fg);
font-size: 1em;
line-height: 1;
cursor: pointer;
}
.ui-panel-close:hover {
border-color: var(--border);
background: var(--bg);
}
.ui-panel-body {
padding: 1em;
}

22
frontend/packages/swarm-ui/src/ui/panel/Panel.tsx
View file

@ -12,6 +12,8 @@
// content either). `HivesPage`'s refresh-interval picker is the
// motivating caller.
//
// `onClose`: end-of-header close (✕) for `Dialog`'s `plain` mode.
//
// `icon` is a small header glyph, left of the title — the swarm-ui
// design guide's own whimsy reference (before this, the guide only
// pointed at the dashboard's matrix-rain background). Grew out of
@ -33,12 +35,16 @@ export function Panel({
title,
icon,
actions,
onClose,
children,
class: extraClass,
}: {
title?: string;
icon?: string;
actions?: ComponentChildren;
/** Renders a close (✕) button at the end of the header — see file-top
* comment. Omit for a panel that isn't a dialog's own content. */
onClose?: () => void;
children: ComponentChildren;
/** Extra class on the outer `<section>` — e.g. flex-sizing a panel
* that's one of several sharing a row (`AgentsPage`'s list/detail
@ -47,7 +53,7 @@ export function Panel({
}) {
return (
<section class={extraClass ? `ui-panel ${extraClass}` : "ui-panel"}>
{title || icon || actions ? (
{title || icon || actions || onClose ? (
<div class="ui-panel-header">
{icon ? (
<span class="ui-panel-icon" aria-hidden="true">
@ -55,7 +61,21 @@ export function Panel({
</span>
) : null}
{title ? <h2 class="ui-panel-title">{title}</h2> : null}
{actions || onClose ? (
<div class="ui-panel-end">
{actions ? <div class="ui-panel-actions">{actions}</div> : null}
{onClose ? (
<button
type="button"
class="ui-panel-close"
aria-label="close"
onClick={onClose}
>
✕
</button>
) : null}
</div>
) : null}
</div>
) : null}
<div class="ui-panel-body">{children}</div>