galaxy/specs/APP-3648/TECH.md

APP-3648: Tech Spec — Vertical Tabs Control Bar

Current State

The vertical tabs panel is rendered in app/src/workspace/view/vertical_tabs.rs via the free function render_vertical_tabs_panel. The panel layout is:

Resizable (drag-right edge)
  └─ Container (background + right border)
       └─ Flex::column
            └─ Shrinkable(ClippedScrollable::vertical(tab groups))

There is currently no control bar — tab groups fill the entire panel. The panel is resizable (min 200px, max 50% window width) with state managed in VerticalTabsPanelState.

The "new tab" split button in the top bar (render_new_session_button in view.rs) dispatches WorkspaceAction::AddTab on left-click and WorkspaceAction::ToggleNewSessionMenu { position } on right-click/chevron-click. The dropdown menu is rendered as an overlay in the workspace's main Stack, positioned at the stored show_new_session_dropdown_menu coordinates.

Proposed Changes

1. Add state handles to VerticalTabsPanelState

vertical_tabs.rs (struct VerticalTabsPanelState):

• search_mouse_state: MouseStateHandle — drives the tooltip on the search input
• add_tab_mouse_state: MouseStateHandle — drives the plus button hover/click states

Initialize both with Default::default() in the existing Default impl.

2. Add render_control_bar function

New free function in vertical_tabs.rs:

render_control_bar(state, app) -> Box<dyn Element>

Layout: Flex::row with CrossAxisAlignment::Center, padded with horizontal GROUP_HORIZONTAL_PADDING (12px) and vertical padding ~8px.

Search input (left, fills remaining space via Shrinkable):

• Hoverable wrapping a Container styled as an inert search field:
  • Left: WarpIcon::Search magnifying glass icon (12px, sub-text color)
  • Right: Text::new_inline("Search tabs...", ...) placeholder in sub-text color, clipped
  • Background: fg_overlay_1 or similar subtle fill; rounded corners
  • Height: ~24px to match icon button sizing
• On hover: show tooltip "Not yet implemented" via ui_builder.tool_tip_on_element(...) (overlay variant, so it's not clipped by the panel's Clipped wrapper)
• No click handler, no cursor change — remains inert

Plus button (right, fixed width):

• Use icon_button(appearance, Icon::Plus, false, state.add_tab_mouse_state.clone())
• Wrap in a Hoverable to add a tooltip with "New Tab" + keybinding sublabel
• .on_click(|ctx, _, _| ctx.dispatch_typed_action(WorkspaceAction::AddTab))
• .on_right_click(|ctx, _, position| ctx.dispatch_typed_action(WorkspaceAction::ToggleNewSessionMenu { position }))
• Wrap in SavePosition with a dedicated position ID (e.g. "vertical_tabs_add_tab_button") so the dropdown menu can anchor to it

3. Integrate into render_vertical_tabs_panel

Change the Flex::column to include the control bar as the first child, outside the scrollable:

Flex::column()
    .with_main_axis_size(MainAxisSize::Max)
    .with_child(render_control_bar(state, app))          // NEW — fixed at top
    .with_child(Shrinkable::new(1., scrollable_groups))  // existing — scrolls
    .finish()

The control bar stays fixed because it's a sibling of the Shrinkable-wrapped scrollable, not inside it.

4. Dropdown menu positioning

No changes needed to the workspace-level menu rendering. The existing ToggleNewSessionMenu { position } flow stores the click position and renders the menu in the workspace Stack overlay. The right-click on the plus button passes its screen position directly, so the menu will appear below the button naturally. If the menu clips at the panel edge, ParentOffsetBounds::WindowByPosition (already used for the shell-selector variant) will reposition it within the window.

Edge Cases Handled

• Narrow panel (200px min): Search input uses Shrinkable so it compresses; plus button has fixed width and remains usable.
• Focus: No focus handlers on the search input; clicking it does nothing.
• Tooltip clipping: Use the overlay tooltip variant (overlay_tool_tip_on_element) so the tooltip renders above the Clipped scrollable.

Parallelism

This is a single-file change (vertical_tabs.rs) with a minor dependency on imports from buttons.rs and icons.rs. No sub-agents needed — the work is sequential and localized.

Files Changed

• app/src/workspace/view/vertical_tabs.rs — all substantive changes (state, rendering, control bar)