Styling disabled hotbar items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -20,6 +20,18 @@
       transition: all 0s 0.8s;
     }
 
+    &.disabled {
+      opacity: 0.4;
+      cursor: default;
+      filter: grayscale(0.7);
+
+      &:hover {
+        &:not(.active) {
+          box-shadow: none;
+        }
+      }
+    }
+
     &.active, &.interactive:hover {
       img {
         opacity: 1;

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

@@ -113,7 +113,10 @@ export function HotbarIcon(props: Props) {
           toggleMenu();
         }}
         close={() => toggleMenu()}>
-        <MenuItem key="remove-from-hotbar" onClick={() => remove(uid) }>
+        <MenuItem key="remove-from-hotbar" onClick={(evt) => {
+          evt.stopPropagation();
+          remove(uid);
+        }}>
           <Icon material="clear" small interactive={true} title="Remove from hotbar"/> Remove from Hotbar
         </MenuItem>
         { menuItems.map((menuItem) => {

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

@@ -96,7 +96,7 @@ export class HotbarMenu extends React.Component<Props> {
                           <HotbarEntityIcon
                             key={index}
                             entity={entity}
-                            onClick={() => entity?.onRun(catalogEntityRunContext)}
+                            onClick={() => entity.onRun(catalogEntityRunContext)}
                             className={cssNames({ isDragging: snapshot.isDragging })}
                             remove={this.removeItem}
                           />
@@ -106,6 +106,7 @@ export class HotbarMenu extends React.Component<Props> {
                             title={item.entity.name}
                             source={item.entity.source}
                             remove={this.removeItem}
+                            disabled
                           />
                         )}
                       </div>