show sketchbook commands on hover

Author: fstasi

arduino-ide-extension/src/browser/style/sketchbook.css

@@ -36,3 +36,12 @@
 #arduino-sketchbook-tree-widget .theia-TreeNodeSegmentGrow {
   flex: 1;
 }
+
+.theia-TreeNode .sketchbook-commands-icons {
+  display: none;
+}
+
+.theia-TreeNode:hover .sketchbook-commands-icons,
+.theia-TreeNode.theia-mod-selected .sketchbook-commands-icons {
+  display: block;
+}

arduino-ide-extension/src/browser/widgets/cloud-sketchbook/cloud-sketchbook-tree-widget.tsx

@@ -86,13 +86,8 @@ export class CloudSketchbookTreeWidget extends SketchbookTreeWidget {
     return classNames;
   }
 
-  protected renderInlineCommands(node: any, props: NodeProps): React.ReactNode {
-    if (
-      CloudSketchbookTree.CloudSketchDirNode.is(node) &&
-      node.commands &&
-      (node.id === this.hoveredNodeId ||
-        this.currentSketchUri === node.uri.toString())
-    ) {
+  protected renderInlineCommands(node: any): React.ReactNode {
+    if (CloudSketchbookTree.CloudSketchDirNode.is(node) && node.commands) {
       return Array.from(new Set(node.commands)).map((command) =>
         this.renderInlineCommand(command.id, node, {
           username: this.authenticationService.session?.account?.label,

arduino-ide-extension/src/browser/widgets/sketchbook/sketchbook-tree-widget.tsx

@@ -84,7 +84,7 @@ export class SketchbookTreeWidget extends FileTreeWidget {
     return (
       <React.Fragment>
         {super.renderTailDecorations(node, props)}
-        {this.renderInlineCommands(node, props)}
+        {this.renderInlineCommands(node)}
       </React.Fragment>
     );
   }
@@ -107,15 +107,8 @@ export class SketchbookTreeWidget extends FileTreeWidget {
     };
   }
 
-  protected renderInlineCommands(
-    node: TreeNode,
-    props: NodeProps
-  ): React.ReactNode {
-    if (
-      SketchbookTree.SketchDirNode.is(node) &&
-      ((node.commands && node.id === this.hoveredNodeId) ||
-        this.currentSketchUri === node?.uri.toString())
-    ) {
+  protected renderInlineCommands(node: TreeNode): React.ReactNode {
+    if (SketchbookTree.SketchDirNode.is(node) && node.commands) {
       return Array.from(new Set(node.commands)).map((command) =>
         this.renderInlineCommand(command.id, node)
       );
@@ -142,6 +135,7 @@ export class SketchbookTreeWidget extends FileTreeWidget {
         TREE_NODE_TAIL_CLASS,
         icon,
         'theia-tree-view-inline-action',
+        'sketchbook-commands-icons',
       ].join(' ');
       return (
         <div