Skip to content

feat(desktop): show a hover close button on pane tabs - #89428

Merged
ethernet8023 merged 1 commit into
mainfrom
ethie/close-button-tab
Aug 18, 2026
Merged

feat(desktop): show a hover close button on pane tabs#89428
ethernet8023 merged 1 commit into
mainfrom
ethie/close-button-tab

Conversation

@ethernet8023

@ethernet8023 ethernet8023 commented Aug 18, 2026

Copy link
Copy Markdown
Collaborator

What does this PR do?

Each closeable horizontal pane tab now shows a close button on pointer hover.

Before this change, a tab closed only from the context menu, a middle-click, or a ⌘-click. None of these gestures is visible in the UI.

The button is an overlay on the right edge of the tab. A small gradient fades the button into the tab surface, so a long label fades under it instead of a hard clip.

The gradient reads the --tab-face variable. This variable holds the effective surface color of the tab. It tracks the hover wash and the selection wash. As a result, the fade is correct on every theme and skin.

The overlay does not change the tab width. The overlay also draws the accent underline of the active tab again. Without this, the button cuts a notch in the underline.

Vertical rail tabs do not show the button. The middle-click and ⌘-click gestures continue to operate on all tabs.

unhovered
image

hovering active tab
image

hovering inactive tab
image

dark theme
image
image

Related Issue

No issue exists for this change.

Related work

PRs #69392 and #89243 add a hover close button to the same component. Each of them reserves a permanent slot in the tab, which makes the label area smaller at all times. This PR paints the button over the label and adds the gradient fade. PR #83051 has a much larger scope: close controls with focus recovery across 37 files.

closes #69392
closes #89243

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 🔒 Security fix
  • 📝 Documentation update
  • ✅ Tests (adding or improving test coverage)
  • ♻️ Refactor (no behavior change)
  • 🎯 New skill (bundled or hub)

Changes Made

  • apps/desktop/src/components/ui/pane-tab.tsx: add the hover close button, the gradient runway, and the --tab-face variable.
  • apps/desktop/src/components/ui/pane-tab.test.tsx: add three tests for the button.

How to Test

  1. Start the desktop app.
  2. Open a second tab in the main zone.
  3. Move the pointer over the tab. Make sure that a close button shows on the right edge.
  4. Click the button. Make sure that the tab closes and does not activate first.
  5. Make sure that a middle-click and a ⌘-click still close a tab.
  6. Hover a tab with a long label. Make sure that the label fades under the button.
  7. In apps/desktop, run npx vitest run src/components/ui/pane-tab.test.tsx. All 9 tests pass.

Checklist

Code

  • I've read the Contributing Guide
  • My commit messages follow Conventional Commits (fix(scope):, feat(scope):, etc.)
  • I searched for existing PRs — see "Related work" above for the overlaps
  • My PR contains only changes related to this fix/feature (no unrelated commits)
  • The change is TypeScript only, so pytest does not apply. The vitest suite, tsc --noEmit, and eslint all pass.
  • I've added tests for my changes (required for bug fixes, strongly encouraged for features)
  • I've tested on my platform: NixOS (Linux)

Documentation & Housekeeping

  • I've updated relevant documentation (README, docs/, docstrings) — N/A, the component comments carry the design notes
  • I've updated cli-config.yaml.example if I added/changed config keys — N/A
  • I've updated CONTRIBUTING.md or AGENTS.md if I changed architecture or workflows — N/A
  • I've considered cross-platform impact (Windows, macOS) per the compatibility guideisMetaClose keeps the ⌘/Ctrl mapping per OS
  • I've updated tool descriptions/schemas if I changed tool behavior — N/A

Screenshots / Logs

Test Files  1 passed (1)
     Tests  9 passed (9)

Each closeable horizontal tab now shows a close button when the
pointer is on the tab. A small gradient fades the button into the
tab surface, so long labels fade under it instead of a hard clip.
The gradient reads the tab's effective surface color. This color
tracks the hover and selection washes, so the fade is correct on
every theme.

Middle-click and Cmd-click still close the tab. Vertical rail tabs
keep those gestures and do not get the button.
@github-actions

github-actions Bot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

૮ >ﻌ< ა ci review

ran on 15a9754 — feat(desktop): show a hover close button on pane tabs

⚠️ Warnings

OSV vulnerability scan · View job

7 known vulnerabilities found in pinned dependencies.

How to fix:

Review the findings in the Security tab. Update the affected dependencies if a patched version is available.


debug info

CI timings

CI timings · View report · View job

Wall time 3m23s vs 3m54s (-13.2%). 9 job(s) slower, 10 faster,

  • OSV scan / Scan lockfiles / osv-scan: -18.0s
  • JS & TS checks / apps/shared / check: +15.0s
  • Detect affected areas: -10.0s
  • JS & TS checks / apps/desktop / check:test:ui:shard-2of3: -8.0s
  • JS & TS checks / ui-tui/packages/hermes-ink / check: -6.0s

@alt-glitch alt-glitch added type/feature New feature or request P3 Low — cosmetic, nice to have comp/desktop Electron desktop app (apps/desktop/*) needs-decision Awaiting maintainer decision before any implementation labels Aug 18, 2026
@ethernet8023
ethernet8023 merged commit 542e146 into main Aug 18, 2026
41 checks passed
@ethernet8023
ethernet8023 deleted the ethie/close-button-tab branch August 18, 2026 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

comp/desktop Electron desktop app (apps/desktop/*) needs-decision Awaiting maintainer decision before any implementation P3 Low — cosmetic, nice to have type/feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants