Move Add agent button to sit immediately left of settings gear

Reorder header action buttons so the Quick Add Agent popover trigger
(+ icon) is positioned directly before the manage channel button,
making it more discoverable next to the channel settings.

Also fix pre-existing lint: add role=menu to popover container and
format QuickAddAgentPopover.tsx per biome rules.
This commit is contained in:
Taylor Ho
2026-05-20 08:23:05 -07:00
parent 138ea9b613
commit 0bb63ae2a0
2 changed files with 25 additions and 20 deletions

View File

@@ -89,25 +89,6 @@ export function ChannelMembersBar({
return (
<React.Fragment>
<div className="flex items-center gap-1">
<QuickAddAgentPopover
channelId={channel.id}
open={isQuickAddOpen}
onOpenChange={setIsQuickAddOpen}
onMoreOptions={() => setIsAddBotOpen(true)}
>
<Button
aria-label="Add agent"
className="h-7 w-7 rounded-full"
data-testid="channel-add-bot-trigger"
disabled={!canAddAgents}
size="icon"
type="button"
variant="outline"
>
<Plus className="h-3 w-3" />
</Button>
</QuickAddAgentPopover>
<HuddleIndicator
className="h-7 w-7"
channelId={channel.id}
@@ -138,6 +119,25 @@ export function ChannelMembersBar({
</span>
</Button>
<QuickAddAgentPopover
channelId={channel.id}
open={isQuickAddOpen}
onOpenChange={setIsQuickAddOpen}
onMoreOptions={() => setIsAddBotOpen(true)}
>
<Button
aria-label="Add agent"
className="h-7 w-7 rounded-full"
data-testid="channel-add-bot-trigger"
disabled={!canAddAgents}
size="icon"
type="button"
variant="outline"
>
<Plus className="h-3 w-3" />
</Button>
</QuickAddAgentPopover>
<Button
aria-label="Manage channel"
className="h-7 w-7 rounded-full"

View File

@@ -304,6 +304,7 @@ export function QuickAddAgentPopover({
<PopoverContent align="end" className="w-72 p-0" sideOffset={6}>
<div
className="flex max-h-80 flex-col"
role="menu"
onKeyDown={(e) => {
const container = e.currentTarget;
const buttons = Array.from(
@@ -344,7 +345,11 @@ export function QuickAddAgentPopover({
No agents available.
</div>
) : (
<div aria-label="Available agents" className="py-1" role="listbox">
<div
aria-label="Available agents"
className="py-1"
role="listbox"
>
{items.map((item) => {
const itemKey = getItemKey(item);
const isInChannel = item.kind === "running-in-channel";