HotbarIcon's refering to unknown entities should be removalable (#3190)

* HotbarIcon's refering to unknown entities should be removalable
* Allow menu to open when icon is disabled
* Add cursor context-menu

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/hotbar/hotbar-icon.scss

@@ -49,6 +49,10 @@
     cursor: default;
     filter: grayscale(0.7);
 
+    &.contextMenuAvailable {
+      cursor: context-menu;
+    }
+
     &:hover {
       &:not(.active) {
         box-shadow: none;

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -95,7 +95,7 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
   };
 
   return (
-    <div className={cssNames("HotbarIcon flex", className, { disabled })}>
+    <div className={cssNames("HotbarIcon flex", className, { disabled, contextMenuAvailable: menuItems.length > 0 })}>
       <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
         <div id={id}>
           {renderIcon()}
@@ -110,19 +110,17 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
         toggleEvent="contextmenu"
         position={{right: true, bottom: true }} // FIXME: position does not work
         open={() => {
-          if (!disabled) {
           onMenuOpen?.();
           toggleMenu();
-          }
         }}
         close={() => toggleMenu()}>
-        { menuItems.map((menuItem) => {
-          return (
+        {
+          menuItems.map((menuItem) => (
             <MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
               {menuItem.title}
             </MenuItem>
-          );
-        })}
+          ))
+        }
       </Menu>
     </div>
   );

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -27,7 +27,7 @@ import { HotbarEntityIcon } from "./hotbar-entity-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
-import { CatalogEntity, CatalogEntityContextMenu, catalogEntityRunContext } from "../../api/catalog-entity";
+import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { HotbarSelector } from "./hotbar-selector";
 import { HotbarCell } from "./hotbar-cell";
@@ -110,12 +110,6 @@ export class HotbarMenu extends React.Component<Props> {
   renderGrid() {
     return this.items.map((item, index) => {
       const entity = this.getEntity(item);
-      const disabledMenuItems: CatalogEntityContextMenu[] = [
-        {
-          title: "Unpin from Hotbar",
-          onClick: () => this.removeItem(item.entity.uid)
-        }
-      ];
 
       return (
         <Droppable droppableId={`${index}`} key={index}>
@@ -163,7 +157,12 @@ export class HotbarMenu extends React.Component<Props> {
                             uid={`hotbar-icon-${item.entity.uid}`}
                             title={item.entity.name}
                             source={item.entity.source}
-                            menuItems={disabledMenuItems}
+                            menuItems={[
+                              {
+                                title: "Unpin from Hotbar",
+                                onClick: () => this.removeItem(item.entity.uid)
+                              }
+                            ]}
                             disabled
                             size={40}
                           />