fix: expose tree item decoration lane

[dankeboy36]

Closes: #548

---

scm-tree.mov

problems-tree.mov

• I used the names label and description to match the VS Code TreeItem API.
• I named the actions slot after <vscode-collapsible> for consistency.
• I have shamelessly stolen the styles for the description, actions, and decorations, etc., from VS Code.
• I kept the action and <vscode-toolbar-button> implementations independent from the tree, but included an example to show that integration is possible. The demo now mirrors the SCM view, including actions, decorators, descriptions, and text overflow handling.
• I changed the icon container to allow <vscode-icon> with action-icon to produce nicer hover UX. The tree can still handle oversized icons.

[dankeboy36]

Hello, I wanted to check if this or a similar fix can be accepted. Thanks for your time

[bendera]

Hi! Originally, I planned for the new tree component to be as simple as possible. There are so many variations of it in VSCode that I’m not even sure it can be unified at all. In the previous version, I tried to standardize it based on the Timeline and Explorer widgets, but the API ended up being overly complicated and not flexible enough. That’s why, in the new version, I decided to leave the implementation of the content, text formatting, and interactions up to the user.

On the other hand, your pull request reflects the VSCode Tree API, so it does make sense in that regard. However, I haven’t had time for weeks to review it thoroughly and with a clear head. And I don’t want to merge any changes until I fully understand how it works.

[dankeboy36]

to review it thoroughly and with a clear head. And I don’t want to merge any changes until I fully understand how it works

Hi, thanks for the reply. I totally understand your point about keeping the tree simple.

If there’s anything I can do to make it easier for you to review it, like moving styles to the example or splitting the change into smaller parts, please let me know. You should also have write access if you want to adjust the PR directly.

If it takes more time on your side, I can always fork the repo and keep working there.

[bendera]

I've left few comments.

[bendera]

Btw., I haven't mentioned it but great job and thanks for the effort you put in!

[dankeboy36]

I've left few comments.

Great review, thanks for the links. I learned a lot.

Since the last round, I also adjusted the icon container. I wanted to support action-icon inside the icon slot with the same hover UX, but the previous layout was fixed to 16px and too restrictive. If these changes look good to you, I’m happy to update the public docs as well (https://vscode-elements.github.io/components/tree/#icons).

Please take a look and check out the updated Problems view demo. Thanks for your time

[dankeboy36]

I have squashed the commits to be able to see the change since the last review. I went through the monaco styles once more and created a native VS Code vs Elements comparison:

Native VS Code Dark+:

VS Code Elements Dark+:

---

Native VS Code Light+:

VS Code elements Light+: