mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: forms share one submit flow, result line and field column

Browse source 
useSubmit holds the idle, sending, done and error state and the request
flow that six forms each wrote out; FormResult shows the success line and
the problem panel; FormStack is the column the link, claude-login,
inference and limits forms each styled by hand. The create-agent, link
account, backend-env and agent-input forms use the submit flow; the link,
claude-login, inference and limits forms use FormStack.
This commit is contained in:
iris 2026-11-06 18:47:34 +01:00 • committed by mara
commit 811b23cd6b
2 changed files with 517 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/packages/swarm-ui/src/ui/form-stack/FormStack.css Normal file
View file

@ -0,0 +1,12 @@
.ui-form-stack {
display: flex;
flex-direction: column;
gap: 0.75em;
margin-top: 1em;
}
.ui-form-stack-start {
align-items: flex-start;
}
.ui-form-stack-stretch {
align-items: stretch;
}

26
frontend/packages/swarm-ui/src/ui/form-stack/FormStack.tsx Normal file
View file

@ -0,0 +1,26 @@
// <FormStack> — a `<form>` whose fields and buttons stack in one column, with
// the gap the forms in dialogs and panels share. The fields keep their own
// width (`align="start"`) or fill the form (`align="stretch"`).
import type { ComponentChildren } from "preact";
import "./FormStack.css";
export function FormStack({
onSubmit,
align = "start",
class: extraClass,
children,
}: {
onSubmit: (e: Event) => void;
align?: "start" | "stretch";
class?: string;
children: ComponentChildren;
}) {
const classes = ["ui-form-stack", `ui-form-stack-${align}`, extraClass]
.filter(Boolean)
.join(" ");
return (
<form class={classes} onSubmit={onSubmit}>
{children}
</form>
);
}