Removing add/delete empty cells feature (#2667)

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

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

@@ -6,7 +6,7 @@ import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
+import { HotbarItem, HotbarStore } from "../../../common/hotbar-store";
 import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
@@ -72,14 +72,6 @@ export class HotbarMenu extends React.Component<Props> {
     });
   }
 
-  renderAddCellButton() {
-    return (
-      <button className="AddCellButton" onClick={() => HotbarStore.getInstance().addEmptyCell()}>
-        <Icon material="add"/>
-      </button>
-    );
-  }
-
   render() {
     const { className } = this.props;
     const hotbarStore = HotbarStore.getInstance();
@@ -90,7 +82,6 @@ export class HotbarMenu extends React.Component<Props> {
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="HotbarItems flex column gaps">
           {this.renderGrid()}
-          {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
         <div className="HotbarSelector flex align-center">
           <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
@@ -119,23 +110,14 @@ function HotbarCell(props: HotbarCellProps) {
   const [animating, setAnimating] = useState(false);
   const onAnimationEnd = () => { setAnimating(false); };
   const onClick = () => { setAnimating(true); };
-  const onDeleteClick = (evt: Event | React.SyntheticEvent) => {
-    evt.stopPropagation();
-    HotbarStore.getInstance().removeEmptyCell(props.index);
-  };
 
   return (
     <div
-      className={cssNames("HotbarCell", { animating, empty: !props.children })}
+      className={cssNames("HotbarCell", { animating })}
       onAnimationEnd={onAnimationEnd}
       onClick={onClick}
     >
       {props.children}
-      {!props.children && (
-        <div className="cellDeleteButton" onClick={onDeleteClick}>
-          <Icon material="close" smallest/>
-        </div>
-      )}
     </div>
   );
 }