✨ Terminal Utility: Tabs & Split View

[Angelk90]

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:

https://user-images.githubusercontent.com/806104/161374050-7e8cc0b5-e731-49a3-a7de-6fd41328adea.mp4

Additional context

Depends on

• #350

[Angelk90]

@austincondiff : What program is that in the video?

Opening would be better like this:

https://user-images.githubusercontent.com/20476002/161380192-008982d6-21b6-4ff2-8dfd-be3218f894b3.mov

[austincondiff]

@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.?

[austincondiff]

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)

[amit-srt]

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

[ahmdyasser]

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

[austincondiff]

@ahmdyasser Assigned. Let me know if you have any questions.

[austincondiff]

@ahmdyasser I just wanted to check if you were still working on this or if you needed any help with anything?

[ahmdyasser]

HI @austincondiff, I got a bit busy, you can re-assign it if anyone is up to it.

[bombardier200]

@austincondiff assign me this please!

[matthijseikelenboom]

@bombardier200 You have been assigned, might want to clone @ahmdyasser 's branch so you have some boilerplate.

[gokul1099]

Can you assign me this issue. I will work on this @austincondiff

[bombardier200]

@gokul1099 done, if you have questions feel free to ping me,

[gokul1099]

@bombardier200 I am working on the Drag to group functionality. Currently I implemented onDrag and onDrop on the terminal list view and wrote the DropDelagate. Dragging is working, while dropping I can access the terminal being dragged. But I could not access the terminal or group on which dragged terminal is dropped. Do you have any idea on how to get that? here is my link to file where I have added the DropDelegate https://github.com/gokul1099/CodeEdit/blob/terminal-tabs-split-view/CodeEdit/Features/DebugArea/Views/DebugAreaTerminalView.swift

[bombardier200]

@gokul1099 can you include a video? It will help me see what exactly you are talking about

[gokul1099]

https://github.com/CodeEditApp/CodeEdit/assets/42144106/d1125933-7c33-4394-a2f6-e4e913be7fd2

In the above video, while dragging I could access the terminal being dragged (third terminal). I want to access the second terminal also(as the dragged terminal is dropped on this), So that I can group both of them.

[Lancelotbronner]

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

[Lancelotbronner]

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

[austincondiff]

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.

[austincondiff]

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.

[Lancelotbronner]

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!

[Lancelotbronner]

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 */
    }
}