Skip to content

feat(terminal): redesign terminal pane toolbar with real icons#38

Open
kevmtt wants to merge 1 commit into
amirlehmam:masterfrom
kevmtt:feat/terminal-toolbar-redesign
Open

feat(terminal): redesign terminal pane toolbar with real icons#38
kevmtt wants to merge 1 commit into
amirlehmam:masterfrom
kevmtt:feat/terminal-toolbar-redesign

Conversation

@kevmtt

@kevmtt kevmtt commented Jun 17, 2026

Copy link
Copy Markdown

Presentational redesign of the terminal pane toolbar, plus a fix for the invisible new-tab dropdown.

Closes #34

What & why

The toolbar used Unicode text glyphs (+, , split glyphs, ×) that render inconsistently across fonts, and the "new tab type" caret dropdown was invisible.

  • Real icons — replace glyphs with stroke-based inline SVG icons (currentColor, so hover accents come from CSS). New file icons.tsx.
  • Consolidated controls — the two separate split buttons become a single Layout split-button (main icon = split right, caret = Split right / Split down).
  • Dropdown-clipping fix.surface-tab-bar is height: 28px; overflow: hidden, so the absolutely-positioned menu (top: 30px) was clipped and never painted. Menus now render via a portal, so both the New and Layout dropdowns are fully visible.

Files

  • src/renderer/components/SplitPane/icons.tsxnew SVG icon components (add, split, split-down, close, caret)
  • src/renderer/components/SplitPane/SurfaceTabBar.tsx — icon split-buttons + portal-rendered menus
  • src/renderer/styles/splitpane.css — control-cluster styling (rounded hover pills, accent colors), portal menu styles
  • docs/superpowers/specs/2026-06-16-terminal-toolbar-redesign-design.md — design spec
  • .gitignore — ignore the local .superpowers/ tooling dir

Scope

  • No IPC / store / handler changes — PaneWrapper already passes onNew, onNewTyped, onNewProfile, onSplitRight, onSplitDown, onClosePane.
  • Per-tab rendering, drag/drop, rename, and keyboard shortcuts unchanged.

Test plan

  • tsc (renderer) clean
  • New split-button: main icon opens a default terminal; caret shows Terminal / Browser / Markdown + profiles
  • Layout split-button: split right (default) and Split down via caret
  • Both dropdowns fully visible (no clipping) with quick-launch profiles configured
  • Close button closes the pane

Follow-up

Icons are hand-rolled SVGs for now; migrating to lucide-react is a sensible future step (noted on #34). The icons live in one file to make that swap trivial.

@kevmtt

kevmtt commented Jun 17, 2026

Copy link
Copy Markdown
Author
image

…ehmam#34)

Replace the Unicode-glyph toolbar controls (+, caret, split glyphs, x) with
stroke-based inline SVG icons, consolidate the two split buttons into a single
Layout split-button with a dropdown, and fix the new-tab dropdown that was
invisible.

- New `icons.tsx`: small `currentColor` SVG icons (add, split, split-down,
  close, caret).
- `SurfaceTabBar`: icon split-buttons (New / Layout / Close); dropdown menus
  rendered via portal so they aren't clipped.
- Dropdown bug: `.surface-tab-bar` is height:28px + overflow:hidden, so the
  absolutely-positioned menu (top:30px) was clipped and never painted —
  rendering the menu in a portal fixes it.
- Restyle the control cluster in `splitpane.css` (rounded hover pills, accent
  colors).

Behavior, IPC, and store are unchanged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Redesign terminal toolbar with real SVG icons + Layout dropdown (fixes invisible new-tab dropdown)

1 participant