Fix HotbarCell display issues and add removal

- HotbarCells now display correctly if there are more than 12 of them

- Allow empty cells to be removed if there are more than 12

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

src/common/hotbar-store.ts

@@ -126,6 +126,25 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     ];
   }
 
+  isInActiveHotbar(entityOrId: string | CatalogEntity): boolean {
+    const entityId = typeof entityOrId === "string"
+      ? entityOrId
+      : entityOrId.getId();
+
+    return this.getActive().items.findIndex((item) => item?.entity?.uid === entityId) >= 0;
+  }
+
+  @action
+  removeHotbarIndexInActive(index: number): void {
+    const activeHotbar = this.getActive();
+
+    if (index < 0 || index >= activeHotbar.items.length) {
+      return void console.error("[HOTBAR-STORE]: tried to removeHotbarIndexInActive: index out of range", { hotbarId: activeHotbar.id, index, itemCount: activeHotbar.items.length });
+    }
+
+    activeHotbar.items.splice(index, 1);
+  }
+
   getActive() {
     return this.getById(this.activeHotbarId);
   }

src/renderer/components/+catalog/catalog.tsx

@@ -147,11 +147,24 @@ export class Catalog extends React.Component<Props> {
     return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
   }
 
-  renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
+  renderItemMenu = (entityItem: CatalogEntityItem<CatalogEntity>) => {
     const onOpen = () => {
       this.contextMenu.menuItems = [];
+      const hs = HotbarStore.getInstance();
 
-      item.onContextMenuOpen(this.contextMenu);
+      if (hs.isInActiveHotbar(entityItem.entity)) {
+        this.contextMenu.menuItems.unshift({
+          title: "Unpin from Hotbar",
+          onClick: () => hs.removeFromHotbar(entityItem.getId())
+        });
+      } else {
+        this.contextMenu.menuItems.unshift({
+          title: "Pin to Hotbar",
+          onClick: () => hs.addToHotbar(entityItem.entity)
+        });
+      }
+
+      entityItem.onContextMenuOpen(this.contextMenu);
     };
 
     return (
@@ -163,9 +176,6 @@ export class Catalog extends React.Component<Props> {
             </MenuItem>
           ))
         }
-        <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
-          Pin to Hotbar
-        </MenuItem>
       </MenuActions>
     );
   };

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

@@ -23,19 +23,29 @@ import "./hotbar-menu.scss";
 import React, { HTMLAttributes, ReactNode, useState } from "react";
 
 import { cssNames } from "../../utils";
+import { Icon } from "../icon";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   index: number;
   innerRef?: React.Ref<HTMLDivElement>;
+
+  /**
+   * If present then on :hover an X will be displayed which will call this
+   * function when clicked
+   */
+  remove?: () => void;
 }
 
-export function HotbarCell({ innerRef, children, className, ...rest }: Props) {
+export function HotbarCell({ innerRef, children, className, remove, ...rest }: Props) {
   const [animating, setAnimating] = useState(false);
   const onAnimationEnd = () => { setAnimating(false); };
   const onClick = () => {
     setAnimating(!className.includes("isDraggingOver"));
   };
+  const removeIcon = remove && (
+    <Icon className="remove" material="close" onClick={remove}/>
+  );
 
   return (
     <div
@@ -45,6 +55,7 @@ export function HotbarCell({ innerRef, children, className, ...rest }: Props) {
       ref={innerRef}
       {...rest}
     >
+      {removeIcon}
       {children}
     </div>
   );

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

@@ -87,10 +87,6 @@ export class HotbarEntityIcon extends React.Component<Props> {
     return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
   }
 
-  isPersisted(entity: CatalogEntity) {
-    return HotbarStore.getInstance().getActive().items.find((item) => item?.entity?.uid === entity.metadata.uid) !== undefined;
-  }
-
   render() {
     if (!this.contextMenu) {
       return null;
@@ -106,20 +102,19 @@ export class HotbarEntityIcon extends React.Component<Props> {
       disabled: !entity
     });
 
-    const isPersisted = this.isPersisted(entity);
     const onOpen = async () => {
       const menuItems: CatalogEntityContextMenu[] = [];
 
-      if (!isPersisted) {
-        menuItems.unshift({
-          title: "Pin to Hotbar",
-          onClick: () => add(entity, index)
-        });
-      } else {
+      if (HotbarStore.getInstance().isInActiveHotbar(entity)) {
         menuItems.unshift({
           title: "Unpin from Hotbar",
           onClick: () => remove(entity.metadata.uid)
         });
+      } else {
+        menuItems.unshift({
+          title: "Pin to Hotbar",
+          onClick: () => add(entity, index)
+        });
       }
 
       this.contextMenu.menuItems = menuItems;

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

@@ -106,6 +106,28 @@
           }
         }
       }
+
+      &:hover {
+        .remove {
+          display: block;
+        }
+      }
+
+      .remove {
+        position: absolute;
+        display: none;
+        left: -2px;
+        top: -3px;
+        margin: -6px;
+        font-size: var(--font-size-small);
+        background: var(--clusterMenuBackground);
+        color: var(--textColorAccent);
+        padding: 0px;
+        border-radius: 50%;
+        border: 2px solid var(--clusterMenuBackground);
+        width: var(--font-size-small);
+        height: var(--font-size-small);
+      }
     }
   }
 }

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

@@ -72,15 +72,15 @@ export class HotbarMenu extends React.Component<Props> {
   }
 
   removeItem(uid: string) {
-    const hotbar = HotbarStore.getInstance();
-
-    hotbar.removeFromHotbar(uid);
+    HotbarStore.getInstance().removeFromHotbar(uid);
   }
 
   addItem(entity: CatalogEntity, index = -1) {
-    const hotbar = HotbarStore.getInstance();
+    HotbarStore.getInstance().addToHotbar(entity, index);
+  }
 
-    hotbar.addToHotbar(entity, index);
+  removeHotbarIndex(index: number) {
+    HotbarStore.getInstance().removeHotbarIndexInActive(index);
   }
 
   getMoveAwayDirection(entityId: string, cellIndex: number) {
@@ -118,6 +118,7 @@ export class HotbarMenu extends React.Component<Props> {
               index={index}
               key={entity ? entity.getId() : `cell${index}`}
               innerRef={provided.innerRef}
+              remove={(!item && this.items.length > defaultHotbarCells) ? (() => this.removeHotbarIndex(index)) : undefined }
               className={cssNames({
                 isDraggingOver: snapshot.isDraggingOver,
                 isDraggingOwner: snapshot.draggingOverWith == entity?.getId(),
@@ -128,7 +129,7 @@ export class HotbarMenu extends React.Component<Props> {
                 <Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0} >
                   {(provided, snapshot) => {
                     const style = {
-                      zIndex: defaultHotbarCells - index,
+                      zIndex: this.items.length - index,
                       position: "absolute",
                       ...provided.draggableProps.style,
                     } as React.CSSProperties;