Project Panel – Improvements, Suggestions and Prior Art

[iamnbutler]

Hey Folks – I'm currently working on a light overhaul on the project panel with @JosephTLyons. I wanted to prompt some specific feedback about its current state, what other editors do well, and any further suggestions.

Things that are not in scope:

• Moving the position of the project panel (it is more related to the workspace, and is being handled by another project.)
• Anything git related (similarly, this is more related to git as a project, and will be handled separately.)

Things that are top of might right now:

• Improved contrast across the board
• More clear active, opened states
• Better context menus, with a more predictable ordering of items

Please share thoughts, screenshots & videos of anything you might think would be useful!

[TerminalFi]

A few items for thought

• Sections
  • Opened Files
  • Modified Files
  • Pinned files/folders
• Reveal in Panel ( reveal active file in panel when clicked or when right clicked > reveal )
• Open in Terminal (open selected folder / file location) in the terminal

[Tom-Boscher]

A button to collapse/unfold all folders and subfolders

[guttenbergovitz]

really desired

[iamnbutler]

A button? Or something in the context menu?
Do you often interact with the top level buttons in the project panel in other editors?
Can you share an example?

[cpreston321]

@iamnbutler I think he is thinking of vscode. Here is a screenshoot of the collapse all folders button.

[kees-]

I would hope it is time for file icons 😏

[skyships-olegv]

File icons: actually some of us like the minimalistic uncluttered style showing throughout the current Zed UX! It is such a relief after overloaded UIs in some other editors. I keep picking distracting UI elements with peripheral vision in other editors. If anything it must be a config option you can turn off!

[kees-]

Monochrome and toggleable 🤙

[kees-]

And. I can't remember if this has been talked about before or implemented but hoisting would be nice to explore. Trilium, knowledge management not IDE, does this very well and intuitively. It uses a tree where leaves === branches, so slightly different than files and folders. But see its demos on basic hoisting and more involved workspaces.

1, I like the simple focus of temporarily de-cluttering the panel when working with a few subdirs of a huge project.

But 2, in Trilium a hoist limits project-wide search, and you can impose conditions on a subtree, which are cool premises. If the team is looking to get crazy and turn the panel refactor into a big intricate mess. Maybe there are cool possibilities down the line with hoisting, multibuffers, scoping

[iamnbutler]

Huh, this is really interesting. Would also be really useful in something like a monorepo.

[assayire]

I remember seeing this in Obsidian. Not sure if it was via a plugin or built-in.

[mikayla-maki]

Would really love to have hoisting too

[darrenbarklie]

Didn't know I wanted this, but fantastic idea to managing focus working within monorepos.

[cpreston321]

File nesting would be great to see.

[iamnbutler]

Can you explain?

[jezikk]

File nesting in VSCode:

[assayire]

Some things like these in the context menu would be useful:

• Copy Absolute Path
• Copy Relative Path
• Duplicate
• Open in split panel
• Open with
• Share

Organization of the menu items needs to be brainstormed. I discussed a bit about it in another issue which was for tabs but bears similarity to the context menus here.

[iamnbutler]

yeah ordering needs to be overhauled. I'll work on this soon to bring it in line with expectations + hopefully expand some of the items there.

[darrenbarklie]

Additional vote for Duplicate action, I'm often missing this in the menu and shortcutted to ⌘+D

[assayire]

I think active file highlighted in the tree in the project panel should be default. It may be turned off in the settings if need be. But I can't imagine working in an active tab without the relevant file highlighted in the project panel. Isn't that the current behavior?

[iamnbutler]

That is the current behavior unless I'm not understanding something correctly. Can you explain further?

[widersky]

I'd like to see:

1. Configurable panel font family and size
2. Maybe small spacing on panel sides and rounded selection corners?
3. Icons - even simple for start - as was mentioned above
4. Maybe an option to exclude file / folder from search (like in JetBrain's IDE's - look at attachment) ?

[assayire]

Mark directory as 🚀

[iamnbutler]

1. will happen, unsure when but it will happen.
2. This probably won't happen, as paths/filenames frequently flow of the edge of the panel. We do round for menu items that can be contained, but I can't imagine us doing this in the project panel. That being said, feel free to share examples of places you think does this well.
3. We'll do basic ones at some point. It'll probably be up to the community in the future to extend it further than that after we open source.
4. This is very cool. It would be nice if this could be dynamically paired with your config, like gitignoring, or excluding from [ESLint, TS/TSConfig, etc]. Would love to see more examples of this.

Thanks for the feedback :)

[johncch]

A few thoughts on my end:

• The ability to exclude files like .DS_Store from showing up (is this a configuration?)
• Sometimes, my node_modules folder expands (accidentally?) and it's difficult to figure out how to close it. I'm not sure what the optimal solution here is, but it's made a little worse by the fact that there isn't a scroll bar in the panel right now.
• I'd love to be able to open files in a split view, especially if it's a option/alt click

[widersky]

.DS_Store is a macOS config file which stores folder settings - AFAIK.

[darrenbarklie]

Also noticed these in my file tree, would be good to have them ignored, through configuration or otherwise.

[wbroberts]

One thing I would like to be able to do is right click on a file or directory to perform some action (similar to vscode):

• rename
• delete
• copy/cut/paste
• add a new file or directory

[iamnbutler]

I assume you are trying to control + click? Try two finger or right click with a mouse. We don't current support control + click for secondary click actions.

[Otterpocket]

As mentioned here https://github.com/zed-industries/community/discussions/1382#discussioncomment-5546131 collapse all would be great as I have found it to be very useful in other editors.

I'm wondering if there is a better way to prevent having lots of directories expanded in the first place. Maybe automatically collapse directories including parents, that no longer have any files open in the workspace? (could be overlooking some usability issues, but just a thought)

[zackangelo]

The biggest thing keeping me from using Zed as a daily driver is error indication in the project panel. When I'm making big project-wide changes I can't clearly see which files have errors (in editors like VSCode the filenames turn red). Being able to more quickly navigate to errors in general would be very helpful. When I run cargo build in a terminal, it'd be nice if I could Cmd+Click onto the path:line string to jump directly to the error.

[iamnbutler]

Makes sense. Have you seen really good examples of sharing the load of showing git status + diagnostic status in the same project panel item?

[zackangelo]

VSCode seems to use a letter on the right gutter to indicate git status and a number next to it to indicate diagnostic status. The color indicates either.

[mikayla-maki]

This would be cool

[guidomb]

This and having dots next to the line or some UI indicator or where the errors are in a file (I use the minimap to scan for errors and warnings is vscode a lot) are the main blocker for switching

[mocenigo]

This and having dots next to the line or some UI indicator or where the errors are in a file (I use the minimap to scan for errors and warnings is vscode a lot) are the main blocker for switching

There are breadcrumbs in the scroll area background area.
(But I m not sure I really like them — they are useful but not elegant.)

[jbergstroem]

Purely visual feedback: I would like to see a visual distinction between the project panel and the editor, similar to how for instance mimestream or below vscode theme looks; emphasis covering the entire height (including top / bottom bars):

[dangh]

One directory in our project has more than 300 files. It is very inconvenient to scroll up/down to reach outside of that folder. It would be great if Zed had sticky scroll, same as in VS Code, but for files.

[muuvmuuv]

Adding mine:

• colored file icons like: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
• no top-level folder
• option to modify file-tree padding

Screenshots that show all my suggestions side by side:

Zed	VS Code

[jorgegorka]

It would be good to have a setting in project_panel to auto close the project panel when a file is selected.

[flaviuivanciuc]

It would be nice to have a setting for enabling compact folders view just like in VSCode.
See image example here

[kresnasatya]

Hi, it would be great if Zed has feature create a new file directly inside project panel by using keyboard shortcut. VS Code has already have it. But, Zed doesn't yet.

Here's my GitHub Discussion in Zed: #9046

Here's the video comparison between VS Code and Zed in term of keyboard shortcut create a new file inside Explorer (VS Code) and Project Panel (Zed)

Screen.Recording.2024-03-08.at.10.33.49.mov

[bennetbo]

Hi, it would be great if Zed has feature create a new file directly inside project panel by using keyboard shortcut. VS Code has already have it. But, Zed doesn't yet.

Here's my GitHub Discussion in Zed: #9046

Here's the video comparison between VS Code and Zed in term of keyboard shortcut create a new file inside Explorer (VS Code) and Project Panel (Zed)

Screen.Recording.2024-03-08.at.10.33.49.mov

Hey @kresnasatya,
you actually can do this by using project_panel::ToggleFocus and project_panel::NewFile. As you can see in the video below, there are two ways to do it:

1. focus the project panel and create a new file with the command palette
2. do the same but with key binds, which by default should be cmd+shift+e and then cmd+n

Screen.Recording.2024-04-01.at.16.37.32.mov

[diasdev]

@bennetbo I guess it is almost completely unrelated, but how one could color the panel font like what's in your screen recording? I've searched the settings page and all the themes available but could not find it. My vision is not as good as it used to be so this type of color contrast makes my day so much easier.

[bennetbo]

That's the built-in Andromeda theme 😄

[diasdev]

on Linux currently that only works for the Outline Panel, but not for the Project Panel :(

[kresnasatya]

Hi, it would be great if Zed has feature create a new file directly inside project panel by using keyboard shortcut. VS Code has already have it. But, Zed doesn't yet.
Here's my GitHub Discussion in Zed: #9046
Here's the video comparison between VS Code and Zed in term of keyboard shortcut create a new file inside Explorer (VS Code) and Project Panel (Zed)
Screen.Recording.2024-03-08.at.10.33.49.mov

Hey @kresnasatya, you actually can do this by using project_panel::ToggleFocus and project_panel::NewFile. As you can see in the video below, there are two ways to do it:

1. focus the project panel and create a new file with the command palette
2. do the same but with key binds, which by default should be cmd+shift+e and then cmd+n

Screen.Recording.2024-04-01.at.16.37.32.mov

Hi @bennetbo, thanks for your help. Unfortunately, there's a scenario that it doesn't work. In this video below, When, I open the Zed editor, the zed-demo folder doesn't in state focus in project panel. Then, I try to set toggle focus to project panel (zed-demo folder as root directory) it doesn't work. I must click the folder to toggle focus then I can create a new file with keyboard. I think this is bug, right (in toggle focus project panel)?

Screen.Recording.2024-04-02.at.04.46.22.mov

I'm using Zed 0.128.3.

[bennetbo]

What happens if you press arrow down after you focus the project panel? I think the behavior you are seeing here is correct. We transfer focus to the project panel and as there is no open buffer, so no item is selected. Meaning if we press arrow-down we select the first item (the root folder).

So here are the steps I would take in your use case:

• project_panel::ToggleFocus, for me cmd+shift+e
• Press arrow-down
• project_panel::NewFile, for me cmd+n

[kresnasatya]

Thanks Bennet. It works now. I'm miss the step press arrow-down (demo on video). Another question, is that possible to combine those steps in a single keyboard shortcut command? I'm confused with "context" term in Zed when create a new keyboard shortcut. In my imagination it could be like this. Is this possible?

{
    "context": "???",
    "bindings": {
       "any-suggestion-for-this-shortcut-command": [
            ["project_panel::ToggleFocus", "Down"],
            ["project_panel::NewFile"]
        ]
    }
}

Screen.Recording.2024-04-03.at.07.09.33.mov

[anthonyivol]

It would be great to be able to add folder from the current project directory at the root of the project, kind like the vscode workspace feature. At this time if I add a directory included in the project it is automatically nested at its original location. I tried a workaround with simlinks but I loose autocompletion, typescript support...

Most of the time I only care of what's in my src folder, and being able to have some quick folder access like this would be dope :

Actually Zed is already impressive and great to use, thanks for your work.

[eulke]

It would be nice to be able to select several files/folders and be able to perform actions on that selection (copy, cut, etc.)

[anthonyivol]

I agree, a duplicate action would be great ! I miss this feature

[soderluk]

Using Zed 0.150.4 on Ubuntu, and it seems I cannot resize the width of the project panel. My folder structure goes in deep, and the filenames aren't fully visible, so I'd like to make the panel a bit wider, but no arrow pops up to resize it. Couldn't see if anyone already discussed this above.

[tkachenkosi]

Hello friends. When developing for example react, the project contains many files. Approximately 50-100 different source files. Working with so many files with the mouse is not convenient. NVIM editor has convenient add-ons that simplify working with buffers using the keyboard. In the Zed editor, you also really need to create a panel with a list of available open files (buffers). There should also be a flexible filter based on the file name and its selection using the keyboard. Thank you for your work.