From 2024dd94120a905ce90a4ba65bc11922e15f861a Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 25 Jun 2021 16:13:45 -0400
Subject: [PATCH] HotbarIcon's refering to unknown entities should be
 removalable

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/hotbar/hotbar-icon.scss | 11 +++++++++--
 src/renderer/components/hotbar/hotbar-icon.tsx  | 15 ++++++++-------
 src/renderer/components/hotbar/hotbar-menu.tsx  | 17 ++++++++---------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index 57c5ed8928..8bfa31602c 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -44,9 +44,8 @@
     border-radius: 6px;
   }
 
-  &.disabled {
+  &.disabled,&.inactive {
     opacity: 0.4;
-    cursor: default;
     filter: grayscale(0.7);
 
     &:hover {
@@ -56,6 +55,14 @@
     }
   }
 
+  &.disabled {
+    cursor: default;
+  }
+
+  &.inactive {
+    cursor: context-menu;
+  }
+
   &.isDragging {
     box-shadow: none;
   }
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index a24e9bb237..73bfc3e0e2 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -43,6 +43,7 @@ export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   active?: boolean;
   menuItems?: CatalogEntityContextMenu[];
   disabled?: boolean;
+  inactive?: boolean;
   size?: number;
   background?: string;
 }
@@ -65,7 +66,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
 }
 
 export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
-  const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
+  const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, inactive, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -95,7 +96,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, inactive })}>
       <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
         <div id={id}>
           {renderIcon()}
@@ -116,13 +117,13 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
           }
         }}
         close={() => toggleMenu()}>
-        { menuItems.map((menuItem) => {
-          return (
-            <MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem) }>
+        {
+          menuItems.map((menuItem) => (
+            <MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
               {menuItem.title}
             </MenuItem>
-          );
-        })}
+          ))
+        }
       </Menu>
     </div>
   );
diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index e9be18990f..bd50043269 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/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,8 +157,13 @@ export class HotbarMenu extends React.Component<Props> {
                             uid={`hotbar-icon-${item.entity.uid}`}
                             title={item.entity.name}
                             source={item.entity.source}
-                            menuItems={disabledMenuItems}
-                            disabled
+                            menuItems={[
+                              {
+                                title: "Unpin from Hotbar",
+                                onClick: () => this.removeItem(item.entity.uid)
+                              }
+                            ]}
+                            inactive
                             size={40}
                           />
                         )}