fix(desktop): keep channel actions with conversation

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Thomas Petersen
2026-06-04 07:06:12 -04:00
co-authored by Cursor
parent 1bf851dbe0
commit a5476c3ba5
4 changed files with 22 additions and 7 deletions
@@ -87,7 +87,7 @@ export function ChannelMembersBar({
<div className="flex items-center gap-1">
<Button
aria-label="Add agent"
className="h-6 w-6 rounded-full"
className="h-6 w-6 rounded-full [&_svg]:!size-[14px]"
data-testid="channel-add-bot-trigger"
disabled={!canAddAgents}
onClick={() => {
@@ -102,20 +102,20 @@ export function ChannelMembersBar({
<Button
aria-label={`View channel members (${memberCount})`}
className="h-6 gap-1 rounded-full px-1.5"
className="h-6 gap-1 rounded-full px-1.5 [&_svg]:!size-3"
data-testid="channel-members-trigger"
onClick={onToggleMembers}
type="button"
variant="outline"
>
<Users className="h-2 w-2" />
<Users className="h-2.5 w-2.5" />
<span className="min-w-[1ch] text-[10px] font-medium tabular-nums">
{memberCount}
</span>
</Button>
<HuddleIndicator
className="h-6 w-6 [&_svg]:h-3 [&_svg]:w-3"
className="h-6 w-6 [&_svg]:!size-[13px]"
channelId={channel.id}
onStart={async () => {
try {
@@ -132,14 +132,14 @@ export function ChannelMembersBar({
<Button
aria-label="Manage channel"
className="h-6 w-6 rounded-full"
className="h-6 w-6 rounded-full [&_svg]:!size-3"
data-testid="channel-management-trigger"
onClick={onManageChannel}
size="icon"
type="button"
variant="outline"
>
<Settings2 className="h-2 w-2" />
<Settings2 className="h-2.5 w-2.5" />
</Button>
</div>
@@ -440,6 +440,8 @@ export function ChannelScreen({
Boolean(
openThreadHeadMessage || openAgentSessionPubkey || profilePanelPubkey,
);
const headerActionsInsetRightPx =
!isSinglePanelView && openThreadHeadMessage ? threadPanelWidthPx : 0;
return (
<AgentSessionProvider onOpenAgentSession={handleOpenAgentSession}>
@@ -449,6 +451,7 @@ export function ChannelScreen({
activeChannelEphemeralDisplay={activeChannelEphemeralDisplay}
activeChannelTitle={activeChannelTitle}
activeDmPresenceStatus={activeDmPresenceStatus}
actionsInsetRightPx={headerActionsInsetRightPx}
currentPubkey={currentPubkey}
isJoining={joinChannelMutation.isPending}
onJoinChannel={joinChannelMutation.mutateAsync}
@@ -15,6 +15,7 @@ type ChannelScreenHeaderProps = {
activeChannelEphemeralDisplay: EphemeralChannelDisplay | null;
activeChannelTitle: string;
activeDmPresenceStatus: PresenceStatus | null;
actionsInsetRightPx?: number;
currentPubkey?: string;
isJoining?: boolean;
showHeaderContent?: boolean;
@@ -28,6 +29,7 @@ export function ChannelScreenHeader({
activeChannelEphemeralDisplay,
activeChannelTitle,
activeDmPresenceStatus,
actionsInsetRightPx = 0,
currentPubkey,
isJoining = false,
showHeaderContent = true,
@@ -79,6 +81,7 @@ export function ChannelScreenHeader({
return (
<ChatHeader
actionsInsetRightPx={actionsInsetRightPx}
belowSystemChrome
density="compact"
actions={actions}
+10 -1
View File
@@ -18,6 +18,7 @@ import { cn } from "@/shared/lib/cn";
type ChatHeaderProps = {
actions?: React.ReactNode;
actionsInsetRightPx?: number;
actionsPlacement?: "inline" | "top-right";
belowSystemChrome?: boolean;
density?: "default" | "compact";
@@ -79,6 +80,7 @@ function ChannelIcon({
export function ChatHeader({
actions,
actionsInsetRightPx = 0,
actionsPlacement = "inline",
belowSystemChrome = false,
density = "default",
@@ -98,6 +100,10 @@ export function ChatHeader({
iconClassName: "h-3 w-3",
}
: {};
const inlineActionsStyle: React.CSSProperties | undefined =
actionsInsetRightPx > 0
? { marginRight: `${actionsInsetRightPx}px` }
: undefined;
const topRightActions = (
<div className="fixed right-3 top-[9px] z-[45] flex shrink-0 items-center gap-1">
<UpdateIndicator />
@@ -144,7 +150,10 @@ export function ChatHeader({
createPortal(topRightActions, document.body)
)
) : (
<div className="flex shrink-0 items-center gap-1">
<div
className="flex shrink-0 items-center gap-1"
style={inlineActionsStyle}
>
<UpdateIndicator {...compactUpdateIndicatorProps} />
{actions ? <div className="shrink-0">{actions}</div> : null}
</div>