Skip to content

feat(web): move panel tab close to the right of the title #12062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
funkeeflow wants to merge 3 commits into from
Closed

feat(web): move panel tab close to the right of the title #12062

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ecaee3
feat(web): move panel tab close to the right of the title
funkeeflow Sep 16, 2026
b4d1b69
refactor(web): pass tab close onClick through
funkeeflow Sep 16, 2026
0593996
fix(web): inset tab close from the trailing edge
funkeeflow Sep 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions apps/web/src/components/RightPanelTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1143,17 +1143,14 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
onAuxClick={(event) => handleTabAuxClick(event, surface)}
onContextMenu={(event) => void handleTabContextMenu(event, surface)}
className={cn(
"cursor-pointer group/tab flex h-6 max-w-36 shrink-0 items-center gap-0.5 rounded-md pr-2 pl-1.5 text-xs",
"cursor-pointer group/tab flex h-6 max-w-36 shrink-0 items-center gap-0.5 rounded-md pr-1 pl-1.5 text-xs",
ownsDesktopTitleBar && "[-webkit-app-region:no-drag]",
active
? "bg-accent text-foreground"
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
)}
>
<PanelTabCloseButton
label={`Close ${title}`}
onClick={() => props.onCloseSurface(surface)}
>
<span className="relative flex size-4 shrink-0 items-center justify-center">
<SurfaceIcon
surface={surface}
sessions={props.previewSessions}
Expand All @@ -1168,7 +1165,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
aria-hidden
/>
) : null}
</PanelTabCloseButton>
</span>
{audio === "none" || !audioRuntimeTabId ? null : (
<Tooltip>
<TooltipTrigger
Expand Down Expand Up @@ -1229,7 +1226,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
if (surface.kind === "device" && props.onRenameDevice)
setRenamingDevice(surface.id);
}}
className="cursor-pointer flex min-w-0 items-center"
className="cursor-pointer flex min-w-0 shrink items-center"
onClick={() => props.onActivate(surface)}
>
<span className="truncate">{title}</span>
Expand All @@ -1239,6 +1236,10 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
<TooltipPopup>{title}</TooltipPopup>
</Tooltip>
)}
<PanelTabCloseButton
label={`Close ${title}`}
onClick={() => props.onCloseSurface(surface)}
/>
</div>
);
})}
Expand Down
15 changes: 8 additions & 7 deletions apps/web/src/components/ThreadTerminalDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1677,26 +1677,27 @@ export default function ThreadTerminalDrawer({
<div
key={terminalId}
className={cn(
"group/tab flex h-6 w-full items-center gap-0.5 rounded-md pr-2 pl-1.5 text-xs",
"group/tab flex h-6 w-full items-center gap-0.5 rounded-md pr-1 pl-1.5 text-xs",
isActive
? "bg-accent text-foreground"
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
)}
>
<PanelTabCloseButton
label={closeTerminalLabel}
onClick={() => confirmCloseTerminal(terminalId)}
tooltip={closeTerminalLabel}
>
<span className="flex size-4 shrink-0 items-center justify-center">
<TerminalSquare className="size-3 shrink-0" />
</PanelTabCloseButton>
</span>
<button
type="button"
className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 text-left"
onClick={() => onActiveTerminalChange(terminalId)}
>
<span className="truncate">{terminalLabel}</span>
</button>
<PanelTabCloseButton
label={closeTerminalLabel}
onClick={() => confirmCloseTerminal(terminalId)}
tooltip={closeTerminalLabel}
/>
</div>
);
})}
Expand Down
19 changes: 6 additions & 13 deletions apps/web/src/components/ui/panel-tab-close-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
import { X } from "lucide-react";
import type { ReactNode } from "react";
import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";

interface PanelTabCloseButtonProps {
children: ReactNode;
label: string;
onClick: () => void;
tooltip?: string;
}

/** Inside a `group/tab` row, swaps the tab identity for its close action on hover or focus. */
export function PanelTabCloseButton({
children,
label,
onClick,
tooltip,
}: PanelTabCloseButtonProps) {
/** Inside a `group/tab` row, reveals the close action on hover or focus. */
export function PanelTabCloseButton({ label, onClick, tooltip }: PanelTabCloseButtonProps) {
const button = (
<button
type="button"
className="cursor-pointer group/close relative flex size-4 shrink-0 items-center justify-center rounded-sm hover:bg-muted"
aria-label={label}
onClick={onClick}
onClick={(event) => {
event.stopPropagation();
onClick();
}}
>
<span className="relative flex size-3 items-center justify-center group-hover/tab:hidden group-focus-visible/close:hidden">
{children}
</span>
<X className="hidden size-3 group-hover/tab:block group-focus-visible/close:block" />
</button>
);
Expand Down
Loading