Editor: Improve File Tree Icons and stylings

[NakulManchanda]

Improve styles and adopt new professional icons for zlux-file-angular-tree

• Change the core App Icon to be more professional looking icon

ZLUX File tree icons can borrow some styles and ideas from zowe vscode extension

• icon to expand/collpase
• No fill icons for directory and files
• Greyout migrated dataset
• files list sorted alphabetically

We can improve on file icons even further - to have language specific icons

USS View - Zowe Explorer

USS View - ZLUX Editor

Dataset View - Zowe Explorer

Dataset View - ZLUX Editor

Some suggestions from @DivergentEuropeans :

• the search feature (Ctrl + P) to open files instead , it will be local client side search to help with navigation
• By the DS name, there is no obvious distinction between the datasets you're viewing. Icons that can differentiate between PDS, VSAM, PDS/E etc

[DivergentEuropeans]

Here are my thoughts!

USS doesn't look like it needs that much work imo. I'm not a huge fan of the language-specific icons that VS Code has because I don't find them that useful & sometimes distracting, instead I find myself using/viewing

1. the file names which tell me type/extension and
2. the search feature (Ctrl + P) to open files instead. Navigating through directories & folders, expanding/collapsing takes time. I think we could get more value by adding a search function that searches through currently visible nodes & displays those that match the search. The search could be optimized to be quick (searches visible nodes & their already expanded children) or advanced (opens unopened folders behind the scenes, and searches them) I created an issue for this here: https://github.com/zowe/zlux/issues/580 We could still do language-specific icons for USS if we'd like, but I wouldn't label it high priority

Datasets I agree could use some work. By the DS name, there is no obvious distinction between the datasets you're viewing. These should have icons that differentiate between PDS, VSAM, PDS/E etc etc I've already done similar work to this in the past for a different app & would love to contribute again here

[NakulManchanda]

hi @DivergentEuropeans ,

Thanks, adding them to list above

the search feature (Ctrl + P) to open files instead. By the DS name, there is no obvious distinction between the datasets you're viewing. These should have icons that differentiate between PDS, VSAM, PDS/E etc

In addition,

• we can change the App Icon as well.

Thanks for reviewing.