Skip to content

feat(desktop): add visible close button to pane tabs - #89243

Closed
angel12 wants to merge 2 commits into
NousResearch:mainfrom
angel12:fix/visible-preview-close
Closed

feat(desktop): add visible close button to pane tabs#89243
angel12 wants to merge 2 commits into
NousResearch:mainfrom
angel12:fix/visible-preview-close

Conversation

@angel12

@angel12 angel12 commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Summary

Add a conventional hover/focus × to closeable horizontal pane tabs, including file, artifact, and Browser previews.

Today these tabs can be closed through a context menu, middle-click, ⌘-click, or the focused-zone shortcut, but none of those paths is visible in the UI. In a preview such as an artifact source view, the visible toolbar only exposes actions like Copy and Download, so users reasonably conclude that the pane cannot be closed.

Implementation

  • Reserve a fixed-size close slot so revealing the × never changes tab width.
  • Reveal the close button on pointer hover and keyboard focus.
  • Give the button the app's focus-visible ring because global styles suppress native outlines.
  • Stop ordinary pointer/click propagation so closing cannot also activate or drag the tab.
  • Preserve the established ⌘-click close gesture even when the pointer is directly over the new close button.
  • Keep the existing middle-click and ⌘-click gestures on the rest of the tab.
  • Preserve the dirty marker in the reserved slot; it yields visually to the × on hover/focus instead of disappearing permanently.
  • Use the existing localized common.close label for the accessible name and tooltip.
  • Keep vertical collapsed rails unchanged, where an inline × does not fit their writing mode.

Prior work / duplicate handling

This deliberately preserves Austin Pickett's original commit and authorship from #69392 by cherry-picking it rather than reimplementing the feature. That PR is currently unmergeable against main (mergeable_state: dirty) and has maintainer_can_modify: false, so it cannot be refreshed upstream. The follow-up commit resolves the outstanding keyboard-focus review note, preserves the dirty indicator, and includes the post-submission independent-review fix for meta-clicks over the new button.

This is complementary to #80958 / #86191, which address a separate persisted-hidden-header trap. This PR supplies the missing visible close affordance whenever the pane tab strip is present.

Supersedes #69392 while retaining its author credit.

Verification

  • npx vitest run --project ui src/components/ui/pane-tab.test.tsx14 passed
  • npm run test:ui513 files / 4,779 tests passed
  • npm run check:lintpassed (typecheck clean; 0 lint errors, existing warnings only)
  • npx prettier --check src/components/ui/pane-tab.tsx src/components/ui/pane-tab.test.tsxpassed
  • git diff origin/main...HEAD --checkpassed

Regression-test sabotage

With the new tests retained and PaneTab temporarily restored to origin/main, the focused test fails in four relevant cases: no accessible close button, no focus-visible close path, no retained dirty marker, and no clickable close action. Restoring the implementation returns the original suite to passing. A separate reviewer-discovered meta-click regression test failed against the first submitted revision (0 closes) and passes after the event-routing fix (1 close).

Add a hover-to-close X button to PaneTab (the fancy-zones tab shell).
The button slot is always reserved inline (shrink-0) so the tab width
stays stable whether the X is visible or not — no layout shift on hover.
Visible on group-hover/tab, hidden by default via opacity transition.

The dirty dot yields to the X when both are present (closeable + dirty):
the X wins on hover, the dot shows otherwise. Vertical tabs skip the X
(writing-mode:vertical-rl makes an inline button awkward) and keep the
absolute-positioned dirty dot.

Pointerdown on the X is stopped so the tab's drag/activate handlers
never fire — the X is a leaf close action, not a drag start.
@angel12
angel12 force-pushed the fix/visible-preview-close branch from 70ee807 to 28d9f54 Compare August 18, 2026 15:11
@angel12

angel12 commented Aug 18, 2026

Copy link
Copy Markdown
Contributor Author

Post-submission independent review found one real interaction bug: the parent tab capture handler swallowed ⌘-clicks when the pointer was directly over the new ×. Added a differential regression test (0 closes before the fix, 1 after), exempted the close-button target from that parent suppression, and added keyboard-style activation coverage. Focused suite is now 14/14; typecheck, targeted lint, and formatting pass. CI has restarted on 28d9f54533.

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.

3 participants