2c1a9fa488
The three link-account badges were wider than the agent detail panel and spilled out of it; they are now a single badge opening a dropdown of the three kinds. The subagents row, heading included, is not rendered for an agent that has none.
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
// <LinkAccountMenu> — one "link account" badge that opens a `Dropdown` with
|
|
// the three kinds of account an agent can be linked to, in place of one
|
|
// badge per kind: three side-by-side badges were wider than the detail
|
|
// panel and spilled out of it. Presentational only, same split as
|
|
// `WantedMenu`: the caller owns what each selection opens.
|
|
import { useRef, useState } from "preact/hooks";
|
|
import { Badge } from "@hive/shared/badge.js";
|
|
import { Dropdown, type DropdownOption } from "@hive/shared/dropdown.js";
|
|
import { LinkIcon } from "@hive/shared/icons.js";
|
|
|
|
export type LinkKind = "matrix" | "forge" | "github";
|
|
|
|
const OPTIONS: DropdownOption[] = [
|
|
{ value: "matrix", label: "matrix account" },
|
|
{ value: "forge", label: "forge account" },
|
|
{ value: "github", label: "github account" },
|
|
];
|
|
|
|
export function LinkAccountMenu({
|
|
agent,
|
|
hasHive,
|
|
onSelect,
|
|
}: {
|
|
agent: string;
|
|
/** Linking writes against the agent's hive, so without one there is
|
|
* nothing to link against and the menu stays shut. */
|
|
hasHive: boolean;
|
|
onSelect: (kind: LinkKind) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const anchorRef = useRef<HTMLDivElement>(null);
|
|
return (
|
|
<div class="ui-dropdown-anchor" ref={anchorRef}>
|
|
<Badge
|
|
variant="quiet"
|
|
icon={<LinkIcon />}
|
|
value="link account"
|
|
onClick={hasHive ? () => setOpen((o) => !o) : undefined}
|
|
expanded={open}
|
|
disabled={!hasHive}
|
|
title={
|
|
hasHive
|
|
? `link a matrix, forge or github account to ${agent}`
|
|
: "no hive on record for this agent — nothing to link against"
|
|
}
|
|
/>
|
|
<Dropdown
|
|
open={open}
|
|
options={OPTIONS}
|
|
label={`link an account to ${agent}`}
|
|
onSelect={(value) => {
|
|
setOpen(false);
|
|
onSelect(value as LinkKind);
|
|
}}
|
|
onClose={() => setOpen(false)}
|
|
anchorRef={anchorRef}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|