Request for Guidance on Adding Custom Icon Button at Folder Level in File Navigator

[vibsid0986]

Hello Team,

I’m looking to implement a feature similar to the “New File / New Folder” icon button available at the workspace level in the file navigator. Specifically, I would like to add a custom icon button at the folder level within the navigator tree, which triggers a custom command when clicked.

Please find a reference screenshot below for context.

I would appreciate your guidance on the best approach to achieve this functionality.

Thanks in advance.

[msujew]

Hey @vibsid0986,

Theia offers a tree decorator API, which is designed to display additional data to the right of a tree view element. Perhaps that can help you along? I'm not sure how easy it is to actually add an element that can be interacted with. The API is designed to only display some data, without an obvious way to interact with that element.

Instead, it might make more sense to override the navigator widget and adjust some of the rendering done in there.

[xpomul]

Hi,

I don't think decorations will get you what you want, as you can only add a tail decoration in the form of a text or icon, but not add further functionality, such as click handlers.

I would follow @msujew 's second approach: subclass FileNavigatorWidget and override/extend the node rendering code (see the TreeWidget base class and there the methods doRenderNodeRow(), renderNode(), or renderTailDecorations())

Best,
Stefan