Explore adding a second side bar

[sbatten]

This issue contains the discussion around adding a second side bar. The secondary side bar would be the next step in improving layout flexibility.

A primary motivator of the second side bar is to address the scenarios expected in #26777.

The current step is understanding the various UX options that could be used to solve the problem. Below are some notes from the current exploration.

• Side bar is a loose term here. We could introduce a second panel instead which already knows how to move to multiple orientations.
• Second may also be limiting. As many have pointed out, should we just allow N number of panels or side bars? Limiting the number does simplify things like keybinds and general layout management and adding too many comes at the cost of complexity that many users will find less useful.
• Currently the panel and side bar solve nearly the same purpose but the panel is drawn differently. Could we adapt the panel to turn into a side bar when it is on the left or right and then make more of them?
• If we go with a second side bar, is it necessary to have an activity bar?

Also adding some mockups from @misolori

[ghost]

I would love this feature. I am working on a project which has a lot of files in the root directory so I cannot fold it like a folder. It takes nearly all the space to see all the files at once. I prefer not to scroll. I wanted to have a second sidebar where I could put the outline in the top half and the timeline (git) in the bottom.

The secondary side bar would be the next step in improving layout flexibility.

Agreed. I imagine one day VSCode's layout would be as flexible as https://theia-ide.org/ ie. Drag and drop pretty much anything anywhere you like (it also has vertical tabs like the ones in the screenshots)

Second may also be limiting. As many have pointed out, should we just allow N number of panels or side bars? Limiting the number does simplify things like keybinds and general layout management and adding too many comes at the cost of complexity that many users will find less useful.

Definitely something else to keep in mind too.

[DominicVonk]

Maybe make it possible to do vertical tabs or icons on both sidebars.

[paror]

Another possibility : horizontal icons on the top of the second sidebar (not to waste space in a long vertical bar with some icons on top ...)

[miguelsolorio]

Here's another iteration that @sbatten and I worked on. This idea closely follows the sidebar appearance/styling but works just like the panel (with multiple panel titles and views):

So this means that the panel will still be able to be placed on the left/bottom/right and the secondary sidebar can take multiple views containers:

We also discussed toggling the secondary sidebar via keyboard shortcuts and via the "sash" drag & adding a single click to toggle this:

[DominicVonk]

Maybe make a setting, that everyone can pick their favorite. I would really like the activity bar because then I feel more organized.

[sbatten]

Adding some screenshots comparing a full length second side bar and editor length side bar

Full-Length

Editor-Length

[wzhudev]

Great to have this feature!

[heartacker]

@sbatten Thanks
and IMO, I want the new side bar like this,

exactly, I believe that floating panel is a good solution for user, like ^VS2019, the visual studio float panel is very useful and powerful, we could use for reference.

there is the float panel(FP) of vs2019, and some of those features are yummy

• when the FP is hide, there are titles standing by side.
• when click the of title of FP, the FP show, we can do something like navigation, but after lost the focus, the FP automatically hide in order to maximize the editor view
• we could also PIN those FP for persist view.
  

#26777 (comment)

[DominicVonk]

I would prefer Full-Length @sbatten

[mhanuszh]

I would prefer Full-Length @sbatten

How about a setting for it?

[DominicVonk]

I have it enabled with the setting "workbench.experimental.sidePanel.enabled". And it already looks promising. But I would also like side tabs please.

[Vjust]

It would be good to have the second explorer be a browser for other things.

• ability to move the outline to the second bar.
• ability for extensions to use the second bar
• use for intellisense & find results & TODOs & bookmarks maybe

[gjsjohnmurray]

@Vjust you should be able to drag those things and drop them there.

[Vjust]

Thanks , I missed that obvious detail. Is this feature already in the insider-build

[gjsjohnmurray]

Is this feature already in the insider-build

Yes.

[sbatten]

Moving to October as all exploration for September is complete.

[ghost]

Is this feature already in the insider-build

Yes.

Moving to October as all exploration for September is complete.

Does this mean we can expect it to be in the October release or will we have to wait for a couple more months? Sorry if you count this as spam -- you may delete this.

[sbatten]

This is not ready for prime time in the October release and the next milestone is less focused on feature work. However, now that we have this going in insiders, the exploration will continue when feature work picks up again the following milestone.

[clytras]

Can we move it to the left side right next to the explorer?

This is a super cool and long waited feature and please consider making the 'side' of the side panel configurable (right or left). I have an ultra wide monitor and I split to multiple panel columns views and with the side bar on the right side, I need much more mouse traveling each time I want to navigate using the outline, but if I can move the sidebar panel at the left side, right next of the main explorer, it would be super productive on ultra wide screens.

EDIT:

And just to be clear, I mean to have the explorer with "OPEN EDITORS" and "FILES" and next to it the "OUTLINE", because then we'll have a full column outline and not just stacked under files which makes it tiny and unusable.

Something like this:

[abflow]

@ clytras, as there are at least as many layout configurations as there are VS Code users, and considering the thousands of extensions with their own view containers and activities in the marketplace, I think we would also need a way to store, retrieve and sync multiple layouts settings, with all the different locations of sidebars, panels, items, etc. (#138263)

Presently, VSCode design feels constrained and not enough flexible. Consequently, it is indeed more designed for notebooks than for ultra-wide monitors with lots of space for complex layout configurations.

In all professional softwares that I have personally used (not just for coding), the layouts were customizable and switchable, which is much more productive.

PS: Ideally, we should be able to display more than two sidebars for ultra-wide sreens. Like two on the left (as in clytras picture) and yet another one the right. But if VS Code developers only work on notebooks or little laptops, they may not be aware of the current design limitation that users with wide-screen monitors or complex layout configurations actually experience.

[rejhgadellaa]

Thanks for the great work here.

Just wondering if a keyboard shortcut for toggling the side panel is on the roadmap? It is mentioned in this ticket but only once.

Update: NVM, I just found it under File > Preferences > Keyboard shortcuts. Just search for "Side Panel" and there you can assign a shortcut.

Thanls!

[alefragnani]

Just noticed the current builds changed how the selected Tabbed Container UI option works. It is only displaying the Icon, not the Label anymore.

Version: 1.64.0-insider
Commit: e8a26d3ebf5095d4324ad4bf794787540ed3b33e
Date: 2021-12-21T05:14:12.146Z

But, it is not working correctly for some extensions, like my Bookmarks and Project Manager, neither Microsoft's Live Share.

Is it something that will be fixed in the Side Panel itself, or extension developers must update their Side Bar icons to be visible there too?

BTW, the icons currently works perfectly in the original Side Bar.

Thank you

[alefragnani]

Also, why can't I move any panel / side bar / extension, from the Side Bar to the Side Panel?

Some of the native ones are not supported.

[Kroc]

Whilst you're doing all this great work, I'm just here to make sure the millions of users on "small" resolutions like 1366x768 don't get overlooked! It's already a struggle as it is

[heartacker]

seem that the icon is some bigger that other three in visual

[nidefawl]

The second sidebar is a great addition.

One bug I came across today:
I have the references view in the extra sidebar, I enabled it in the workspace config.
When I open a new workspace that has the sidebar disabled it fails to open the references view when use 'Find all references'.

[sbatten]

@nidefawl in the latest insiders builds, the side bar can no longer be "disabled" so this should no longer be an issue. please follow up if you are still seeing it in those builds

as for the icon @heartacker, we are still playing around with this icon, feedback is noted. cc @misolori

[heartacker]

{
"command": "workbench.action.toggleMaximizedPanel"
}
@sbatten the command seems to maximize the side panel, not the panel

[sbatten]

@heartacker are you using a non-center panel alignment?

[heartacker]

@sbatten there is the gif pic

[sbatten]

@heartacker I attempted to support maximization of the panel in the non-centered panel alignment scenario but our grid widget has some issues with it at the moment. as such, I've had to disable panel maximization in this case while we look into proper support for this.

[heartacker]

@sbatten thanks for ur clarify, so I want to set the penel aligning by center. but

1. I cannot see any setting about panel align or align penel
   
2. I cannot align panel by center through command prompt, there are only two commands without align center

3. finish I find it is menu view

maybe we could improve the ux.
for example:
add setting to panel right click menu

[sbatten]

@heartacker thanks for testing this out, it highlights a discoverability issue with the command titles. in today's insiders, there are a few ways to tweak the panel alignment.

Command Palette

Note In the next build, all panel alignment commands will be of the form Set Panel Alignment to ...

Appearance Menu

Control Layout to Customize Layout...

[sbatten]

Closing this issue as the exploration phase is over. Please file new issues for feedback, bugs, and requests.