fixing the general channel tree context menu

shared/js/ui/tree/Controller.tsx

@@ -684,6 +684,10 @@ export function initializeChannelTreeController(events: Registry<ChannelTreeUIEv
     });
 
     events.on("action_show_context_menu", event => {
+        if(event.treeEntryId === 0) {
+            channelTree.showContextMenu(event.pageX, event.pageY);
+            return;
+        }
         const entry = channelTree.findEntryId(event.treeEntryId);
         if(!entry) {
             logWarn(LogCategory.CHANNEL, tr("Tried to open a context menu for an invalid channel tree entry with id %o"), event.treeEntryId);

shared/js/ui/tree/Definitions.ts

@@ -29,7 +29,7 @@ export type ServerState = { state: "disconnected" } | { state: "connecting", tar
 export interface ChannelTreeUIEvents {
     /* actions */
     action_toggle_popout: { shown: boolean },
-    action_show_context_menu: { treeEntryId: number, pageX: number, pageY: number },
+    action_show_context_menu: { treeEntryId: number | 0, pageX: number, pageY: number },
     action_start_entry_move: { start: { x: number, y: number }, current: { x: number, y: number } },
     action_set_collapsed_state: { treeEntryId: number, state: "collapsed" | "expended" },
     action_select: {

shared/js/ui/tree/RendererView.tsx

@@ -191,7 +191,14 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
                 onScroll={() => this.onScroll()}
                 ref={this.refContainer}
                 onMouseDown={e => this.onMouseDown(e)}
-                onMouseMove={e => this.onMouseMove(e)}>
+                onMouseMove={e => this.onMouseMove(e)}
+                onContextMenu={event => {
+                    if(event.target !== this.refContainer.current) { return; }
+
+                    event.preventDefault();
+                    this.props.events.fire("action_show_context_menu", { pageY: event.pageY, pageX: event.pageX, treeEntryId: 0 });
+                }}
+            >
                 <div
                     className={viewStyle.channelTree}
                     style={{height: (this.state.tree.length * ChannelTreeView.EntryHeight) + "px"}}>