Add/remove empty cells

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

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

@@ -103,7 +103,7 @@ export class HotbarIcon extends React.Component<Props> {
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
         <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
         <Menu
-          usePortal={false}
+          usePortal
           htmlFor={entityIconId}
           className="HotbarIconMenu"
           isOpen={this.menuOpen}

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

@@ -28,6 +28,42 @@
       margin: 8px;
       background: var(--sidebarBackground);
       border-radius: 4px;
+      position: relative;
+
+      &:hover {
+        .cellDeleteButton {
+          opacity: 1;
+          transition: opacity 0.1s 0.2s;
+        }
+      }
+
+      .cellDeleteButton {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        background-color: var(--textColorDimmed);
+        position: absolute;
+        top: -7px;
+        right: -7px;
+        color: var(--secondaryBackground);
+        opacity: 0;
+        border: 3px solid var(--clusterMenuBackground);
+        box-sizing: border-box;
+
+        &:hover {
+          border-color: var(--textColorAccent);
+          color: var(--textColorAccent);
+          transition: all 0.2s;
+        }
+
+        .Icon {
+          --smallest-size: 12px;
+          font-weight: bold;
+          position: relative;
+          top: -2px;
+          left: .5px;
+        }
+      }
     }
   }
 
@@ -58,6 +94,7 @@
 
     .Icon {
       --size: 24px;
+      margin-left: 2px;
     }
   }
 }

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

@@ -83,6 +83,11 @@ export class HotbarMenu extends React.Component<Props> {
               onClick={() => entity.onRun(catalogEntityRunContext)}
             />
           )}
+          {!entity && (
+            <div className="cellDeleteButton" onClick={() => HotbarStore.getInstance().removeEmptyCell(index)}>
+              <Icon material="close" smallest/>
+            </div>
+          )}
         </HotbarCell>
       );
     });
@@ -90,7 +95,7 @@ export class HotbarMenu extends React.Component<Props> {
 
   renderAddCellButton() {
     return (
-      <button className="AddCellButton">
+      <button className="AddCellButton" onClick={() => HotbarStore.getInstance().addEmptyCell()}>
         <Icon material="add"/>
       </button>
     );