✨ Terminal Utility: Tabs & Split View

Describe the solution you'd like

Being able to have more than one shell in a project would be great.

Please note the following behaviors:

The plus icon adds a new terminal tab (not in a group).
The minus button closes the selected tab.
Press the delete key while terminal tab sidebar is in focus to close the selected tab.
Drag an ungrouped terminal tab on top of another ungrouped terminal tab to create a group.
Drag an ungrouped terminal tab into an existing group to add it to that group.
Drag a terminal tab within a group to reorder it.
Drag a grouped terminal tab to another group to move it to another group.

Describe alternatives you've considered

Here are some examples of how it handles Webstorm:

Screen.Recording.2022-03-24.at.5.21.16.PM.mp4

Additional context

Depends on

✨ Bottom Drawer for Utility Area #350

@austincondiff

@austincondiff : What program is that in the video?

Opening would be better like this:

Registrazione.schermo.2022-04-02.alle.12.58.58.mov

@Angelk90

@Angelk90 I agree that it should open as a drawer like in your video. That video is from VSCode, and demonstrates how it handles terminal tabs and split terminal views. The question we need to answer for this is how are we going to do multiple terminals in this drawer? Will we use tabs? How will we handle split terminals? Will terminals be the only thing that exists in this drawer or will there be other kinds of things like output, issues, debug, console, etc.?

This is the design that we will use for multiple terminals. We need this tab system in place in the status bar and the git controls moved up to the toolbar first, then in the terminal tab build the multiple terminal tabs UI, this is how this would look.

Please note the following behaviors:

The plus icon adds a new terminal tab (not in a group).
The minus button closes the selected tab.
Press the delete key while terminal tab sidebar is in focus to close the selected tab.
Drag an ungrouped terminal tab on top of another ungrouped terminal tab to create a group.
Drag an ungrouped terminal tab into an existing group to add it to that group.
Drag a terminal tab within a group to reorder it.
Drag a grouped terminal tab to another group to move it to another group.

(updated in issue description)

I would like to work on this issue. Can you please assign this to me

@austincondiff

I'd like to work on this, can you please assign it to me? @austincondiff

@austincondiff

Hi @austincondiff, I'd like to tackle this!

Here are a few assumptions I'm going with, based on what I've read here so far or what I think. Please correct me if any of them are wrong.

Groups cannot be nested
If there's multiple terminals/groups selected, show CEContentUnavailableView("Multiple Selection")
Selecting a group focuses the first terminal in that group
Selecting a terminal focuses that terminal, unless its in a different group, in which case it switches to that group

Here's an alternative, which is what I was expecting until I saw your design which contradicted with it:

Selecting a group displays all of its terminals on the right-hand side, the first terminal starts focused
Selecting a terminal displays only that terminal on the right-hand side

Since names are getting quite long in this area, I have a little rename suggestion.
It would also make sense with the way the folders are laid out.

Here's what I mean:

UtilityAreaTerminalView -> TerminalUtilityView
UtilityAreaTerminalTab -> TerminalUtilityTab
UtilityAreaDebugView -> DebugUtilityView
UtilityAreaOutputView -> OutputUtilityView

That way things which relate to the utility area as a whole are prefixed with UtilityArea while individual utilities have shorter names.

I'm suggesting this because I'm getting names like

UtilityAreaTerminalSelection -> TerminalUtilitySelection
UtilityAreaTerminalGroup -> TerminalUtilityGroup
UtilityAreaTerminalTerminalView -> TerminalUtilityTerminalView

I am in favor of those name changes. We still need to figure out a good way to represent the groups. Since the creation of this issue, our utility area has changed quite a bit. If you are able to join our weekly meetup at 3 PM UTC on Discord (15 minutes after the time of posting) we can discuss this as a group.

Okay so I think this is how we should represent groups (I've also updated the issue description with this)...

As you can see, when a tab is split, both are under a group. By default the name of the group reflects how many terminals are in the split. The user can later however rename the group to whatever they want.

Ah sorry I hadn't seen your message earlier I would've liked to be at that meeting!

Great for the naming changes, I'll make a separate PR for that later.

The rest seems good, I got terminals side-by-side and grouping with a few small issues left.

I should be able to finish this tomorrow!

Forgot about Christmas and somehow this counts the contents of the disclosure group as separate indices in the onMove function. This may take longer than expected.

List(selection: $model.selectedTerminals) {
  ForEach(model.terminalGroups) { group
    UtilityAreaTerminalTab(group)
  }
}

// UtilityAreaTerminalTab
if group.children.count == 1 {
    /* Terminal cell */
        .id(group.children[0])
} else {
    DisclosureGroup {
        ForEach(group.children) { terminal in
            /* Terminal cell */ 
        }
    } label: {
        /* Terminal group title cell */
    }
}

@austincondiff

Hi @austincondiff, I'm a iOS developer and really like this project and want to help.

I already fork and clone the project and now I'm analyzing the UtililyAreaTerminalSidebar, put the preview to work, leaned how project is working like the ViewModel of the UtilityArea Feature.

I read the documentation and I think I can start helping.

Could you assign this issue to me?

I already enter the discord server, but not send any message yet. I lost the weekly meeting cuz I'm from Brazil and made a mistake with the time.

Thanks

@SoreGus

@SoreGus Assigned it to you. Thank you for your help. You didn't miss our meetup. If you'd like, you can still join in 8.5 hours from the time of posting (3:00 PM UTC).

If you can think of a better way to represent these split groups feel free to do whatever feels best and most intuitive.

Navigation Menu

Repository navigation

✨ Terminal Utility: Tabs & Split View #379

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Depends on

18 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

✨ Terminal Utility: Tabs & Split View #379

Description

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Depends on

Activity

Angelk90 commented on Apr 2, 2022

austincondiff commented on Apr 3, 2022

austincondiff commented on Apr 12, 2022

amit-srt commented on Sep 2, 2022

ahmdyasser commented on Oct 4, 2022

18 remaining items

Lancelotbronner commented on Dec 23, 2023

Lancelotbronner commented on Dec 23, 2023

austincondiff commented on Dec 23, 2023

austincondiff commented on Dec 23, 2023

Lancelotbronner commented on Dec 23, 2023

Lancelotbronner commented on Dec 24, 2023

SoreGus commented on Jun 28, 2025

austincondiff commented on Jun 28, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions