91 lines
4.7 KiB
Markdown
91 lines
4.7 KiB
Markdown
# APP-3578: Vertical Tabs — New Session Dropdown Menu
|
|
|
|
## Summary
|
|
|
|
Redesign the vertical tabs "new tab" button and its dropdown menu to match the Figma mock. The horizontal tab bar menu is unchanged.
|
|
|
|
## Problem
|
|
|
|
The vertical tabs panel currently uses the same new-session dropdown as the horizontal tab bar, including separators, item ordering, and a split `[+][v]` button. The Figma design calls for a simpler, flatter menu specific to vertical tabs.
|
|
|
|
## Goals
|
|
|
|
- Replace the split `[+][v]` button with a single `+` button that opens the dropdown on click.
|
|
- Show a vertical-tabs-specific menu with no separators between groups, a different item ordering, icons per item, and a "New worktree" footer item replacing "Create new tab config...".
|
|
- Keep the horizontal tab bar menu unchanged.
|
|
|
|
## Non-goals
|
|
|
|
- Search bar in the dropdown (follow-up).
|
|
- Pixel-perfect match of the Figma menu item padding/spacing (the `Menu` component has hardcoded constants that can't be overridden per-instance).
|
|
- Changing the "New worktree" action (it uses the same behavior as "Create new tab config...").
|
|
|
|
## Figma
|
|
|
|
- Dropdown menu: https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7157-41707&m=dev
|
|
- Plus button: https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7150-39859&m=dev
|
|
|
|
## User Experience
|
|
|
|
### Plus button
|
|
- Single `+` icon button in the vertical tabs control bar, to the right of the search input.
|
|
- Clicking the button opens the new-session dropdown menu anchored below the button.
|
|
- Tooltip on hover: "New Tab" with keybinding sublabel.
|
|
|
|
### Dropdown menu items (in order)
|
|
1. "Default" — creates a new tab (same as current `AddTab` / welcome tab behavior). Shows ⌘T keybinding. Icon: `LayoutAlt01`.
|
|
2. "Agent" — creates an agent tab (behind AI feature flag). Icon: `LayoutAlt01`.
|
|
3. "Terminal" — creates a terminal tab. Icon: `LayoutAlt01`.
|
|
4. "Cloud agent tab" — creates a cloud agent tab (behind `AgentView` + `CloudMode` flags). Icon: `LayoutAlt01`.
|
|
5. Available shells (behind `ShellSelector` flag) — one item per shell, no separator above. Icon: `LayoutAlt01`.
|
|
6. Launch configs — rendered as "Launch {name}" items. Icon: `LayoutAlt01`.
|
|
7. Tab configs — one item per loaded tab config, no separator above. Icon: `LayoutAlt01` for non-worktree configs, `Dataflow02` for worktree configs.
|
|
8. Separator line.
|
|
9. "New worktree" — opens the tab config template file (same as current "Create new tab config..."). Icon: `Plus`.
|
|
|
|
### Icons
|
|
- All non-worktree items use the `LayoutAlt01` icon (sidebar-left layout shape).
|
|
- Worktree tab configs use the `Dataflow02` icon (merging-branches shape from Figma `dataflow-02`). A tab config is detected as a worktree if any pane has `worktree_name_autogenerated = true` or commands containing `"git worktree"`.
|
|
- "New worktree" uses the `Plus` icon.
|
|
|
|
### Items removed from the vertical tabs menu
|
|
- "Restore Closed Tab" (will exist elsewhere).
|
|
- "Learn about Launch Configs..." link.
|
|
- All `MenuItem::Separator` dividers between groups (only one separator remains, before "New worktree").
|
|
|
|
### Items unchanged
|
|
- Launch configs still appear (rendered as "Launch {name}" items between shells and tab configs).
|
|
|
|
## Edge Cases
|
|
|
|
1. **No AI enabled**: Agent and Cloud agent tab items are hidden (same gating as today).
|
|
2. **No tab configs**: Only the built-in items + shells + "New worktree" appear.
|
|
3. **Menu lifecycle**: Same as existing — closes on item selection, click outside, or Escape.
|
|
4. **Menu width**: Set to 268px for the vertical tabs dropdown (matching the Figma `OptionMenuItem` width). Resets to default 186px for horizontal tabs.
|
|
|
|
## Success Criteria
|
|
|
|
- Vertical tabs panel shows a single `+` button (no chevron).
|
|
- Clicking `+` opens a flat dropdown anchored below the button with items in the Figma order.
|
|
- No separator lines between item groups; one separator before "New worktree".
|
|
- Each item has an icon (`LayoutAlt01`, `Dataflow02`, or `Plus`).
|
|
- "New worktree" item opens the tab config template file.
|
|
- Horizontal tab bar menu is completely unchanged.
|
|
|
|
## Validation
|
|
|
|
- Visual inspection of vertical tabs dropdown matches Figma mock.
|
|
- Click each menu item and confirm the correct action fires.
|
|
- Confirm horizontal tab bar dropdown is unaffected.
|
|
- Test with `TabConfigs` and `ShellSelector` feature flags on and off.
|
|
|
|
## Known Limitations
|
|
|
|
The `Menu` component has hardcoded layout constants that cannot be overridden per-instance:
|
|
- Item padding: 5px vertical / 14px horizontal (Figma specifies 8px / 16px).
|
|
- No gap between items (Figma uses 2px).
|
|
- Corner radius: 5px (Figma uses 4px).
|
|
- Menu body padding: 9px top/bottom (Figma has none).
|
|
|
|
Matching these exactly requires either adding per-instance padding/radius overrides to `Menu`, or building a separate component.
|