[BUG] [v1.1.0] Auxiliary sidebar header: minimize and close buttons look the same despite different impact

[tubel-hi]

Project

ide

Description

Minimize and close share the same buttonStyle (22×22, transparent default, same icon treatment) and the same onMouseEnter hover (tokens.colors.interactive.hover). Closing the whole secondary sidebar is a stronger action than collapsing/minimizing, but nothing in size, color, or weight signals that difference.

Error Message

Debug Logs

System Information

OS: Ubuntu
Context: Bounty Challenge v1.1.0

Screenshots

11.webm

Steps to Reproduce

Open the auxiliary sidebar with a view selected.
Look at the header row: minimize (chevron) and close (X).
Hover each and compare appearance.

Expected Behavior

Close is visually distinct (e.g. stronger/destructive hover, outline, or labeling) so importance matches behavior.

Actual Behavior

Both controls read as equivalent chrome actions.

Additional Context

No response

[hinzwilliam52-ship-it]

/attempt #39605

[willkhinz]

/attempt #39605

[willkhinz]

/attempt #39605

[willkhinz]

/attempt #39605

[echobt]

✅ Validated

VALID BUG - Confirmed in source code.

Source File: src/components/workbench/AuxiliarySidebar.tsx

Bug Confirmed: The AuxiliaryHeader component renders two action buttons (minimize and close) with identical styling:

• Both use the same buttonStyle object (22×22px, transparent background)
• Both use the same hover treatment (tokens.colors.interactive.hover)
• Both have identical visual weight despite different impact levels

Code Evidence (lines 208-250):

const buttonStyle: JSX.CSSProperties = {
  width: "22px",
  height: "22px",
  background: "transparent",
  // ... identical for both buttons
};

// Minimize button - uses buttonStyle
<button style={buttonStyle} onMouseEnter={...}>
  <Icon name="chevron-right" size={14} />
</button>

// Close button - uses IDENTICAL buttonStyle
<button style={buttonStyle} onMouseEnter={...}>
  <Icon name="close" size={14} />
</button>

Why this is a bug: Closing the entire secondary sidebar is a more destructive/significant action than minimizing it, yet the UI provides no visual distinction. This violates UX best practices for action hierarchy - destructive/major actions should have stronger visual cues.

Screenshot/Video: Authentic video shows the issue clearly - both buttons appear identical in the auxiliary sidebar header.

Not a duplicate: Issue #39508 is about icon direction logic, not visual styling hierarchy.