70 lines
4.4 KiB
Markdown
70 lines
4.4 KiB
Markdown
# APP-3578: Tech Spec — Vertical Tabs Dropdown Menu
|
|
|
|
## Problem
|
|
|
|
The vertical tabs panel reuses the horizontal tab bar's new-session menu. The Figma mock requires a distinct menu with different items, ordering, icons, and a single `+` trigger button.
|
|
|
|
## Relevant Code
|
|
|
|
- `app/src/workspace/view/vertical_tabs.rs` — `render_new_tab_button` (single `+` button, formerly `render_new_tab_split_button`)
|
|
- `app/src/workspace/view/vertical_tabs.rs` — `VerticalTabsPanelState` (mouse states), `VERTICAL_TABS_ADD_TAB_POSITION_ID` (menu anchor)
|
|
- `app/src/workspace/view.rs` — `new_session_menu_items()` (horizontal tab bar item builder)
|
|
- `app/src/workspace/view.rs` — `vertical_tabs_new_session_menu_items()` (vertical tabs item builder)
|
|
- `app/src/workspace/view.rs` — `toggle_new_session_dropdown_menu(position, is_vertical_tabs, ctx)` (opens the menu)
|
|
- `app/src/workspace/action.rs` — `WorkspaceAction::ToggleNewSessionMenu { position, is_vertical_tabs }`
|
|
|
|
## Changes Made
|
|
|
|
### 1. `is_vertical_tabs` field on `ToggleNewSessionMenu`
|
|
|
|
`WorkspaceAction::ToggleNewSessionMenu` now carries `is_vertical_tabs: bool`. Horizontal tab bar dispatch sites pass `false`; the vertical tabs `+` button passes `true`.
|
|
|
|
### 2. `vertical_tabs_new_session_menu_items()` method
|
|
|
|
New method on `Workspace` in `view.rs`. Builds items in Figma order with icons:
|
|
1. "Default" — `AddTab`, `LayoutAlt01` icon, ⌘T keybinding
|
|
2. "Agent" — `AddAgentTab`, `LayoutAlt01` icon (if AI enabled)
|
|
3. "Terminal" — `AddTerminalTab`, `LayoutAlt01` icon
|
|
4. "Cloud agent tab" — `AddAmbientAgentTab`, `LayoutAlt01` icon (if flags enabled)
|
|
5. Shells — `AddTabWithShell`, `LayoutAlt01` icon (if `ShellSelector` enabled)
|
|
6. Launch configs — `LayoutAlt01` icon, skip "Learn about Launch Configs..."
|
|
7. Tab configs — `LayoutAlt01` for non-worktree, `Dataflow02` for worktree configs
|
|
8. `MenuItem::Separator`
|
|
9. "New worktree" — `CreateNewTabConfig`, `Plus` icon
|
|
|
|
Worktree detection: a tab config is a worktree if any pane has `worktree_name_autogenerated` or commands containing `"git worktree"`.
|
|
|
|
### 3. `toggle_new_session_dropdown_menu` selects item builder and width
|
|
|
|
Accepts `is_vertical_tabs: bool`. When true: calls `vertical_tabs_new_session_menu_items()` and sets menu width to 268px. When false: calls `new_session_menu_items()` and resets width to `MENU_DEFAULT_WIDTH` (186px).
|
|
|
|
### 4. Single `+` button replaces split button
|
|
|
|
`render_new_tab_split_button` replaced by `render_new_tab_button` — a single `+` icon button. On click dispatches `ToggleNewSessionMenu { position, is_vertical_tabs: true }`. Removed `new_tab_menu_state` from `VerticalTabsPanelState`.
|
|
|
|
### 5. Menu positioning
|
|
|
|
For vertical tabs, the dropdown is anchored to the `+` button via `offset_from_save_position_element(VERTICAL_TABS_ADD_TAB_POSITION_ID, ...)` with `BottomLeft` → `TopLeft` anchoring (4px gap). For horizontal tabs, the existing `offset_from_parent` positioning is unchanged.
|
|
|
|
### 6. New SVG assets and Icon variants
|
|
|
|
Added `layout-alt-01.svg`, `layout-alt-02.svg`, `layout-alt-03.svg`, `layout-alt-04.svg`, `layout-bottom.svg` to `app/assets/bundled/svg/`. Added corresponding `LayoutAlt01` through `LayoutBottom` variants to `warp_core::ui::Icon`. Currently only `LayoutAlt01` is used; the others are available for future icon differentiation.
|
|
|
|
## End-to-End Flow
|
|
|
|
1. User clicks `+` in vertical tabs panel.
|
|
2. `ToggleNewSessionMenu { position, is_vertical_tabs: true }` dispatched.
|
|
3. Handler calls `toggle_new_session_dropdown_menu(position, true, ctx)`.
|
|
4. Menu width set to 268px, items built via `vertical_tabs_new_session_menu_items()`.
|
|
5. Menu rendered as overlay anchored below the `+` button via `VERTICAL_TABS_ADD_TAB_POSITION_ID`.
|
|
6. User selects an item → action dispatched (`AddTab`, `AddAgentTab`, `SelectTabConfig`, etc.).
|
|
|
|
## Files Changed
|
|
|
|
- `app/src/workspace/action.rs` — added `is_vertical_tabs` field
|
|
- `app/src/workspace/view.rs` — new `vertical_tabs_new_session_menu_items()`, updated `toggle_new_session_dropdown_menu`, updated menu positioning in `render()`, updated action handler
|
|
- `app/src/workspace/view/vertical_tabs.rs` — replaced split button with single `+` button, simplified state, made position ID `pub(super)`
|
|
- `warp_core/src/ui/icons.rs` — added `LayoutAlt01`, `LayoutAlt02`, `LayoutAlt03`, `LayoutAlt04`, `LayoutBottom` variants
|
|
- `app/assets/bundled/svg/` — added 5 new layout SVG icons
|
|
- `specs/APP-3578/` — PRODUCT.md and TECH.md
|