Hotbar visual improvements (#2638)

* Adding hotbar cells

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

* Add/remove empty cells

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

* Increase cell corner radius

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

* Styling hotbar selector

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

* Generating 12 cells by default

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

* Adding custom scrollbar on hover

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

* Reset active cluster when leaving dashboard

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

* Moving kind icon top the top left corner

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

* Highlighting kind icon

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

* Add hotbar cell animations

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

* Adding small hover effect

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

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

@@ -1,17 +1,18 @@
 import "./hotbar-menu.scss";
 import "./hotbar.commands";
 
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { HotbarStore } from "../../../common/hotbar-store";
-import { catalogEntityRunContext } from "../../api/catalog-entity";
+import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
+import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
+import { ClusterStore } from "../../../common/cluster-store";
 import { Tooltip, TooltipPosition } from "../tooltip";
 
 interface Props {
@@ -20,14 +21,22 @@ interface Props {
 
 @observer
 export class HotbarMenu extends React.Component<Props> {
-  get hotbarItems() {
+  get hotbar() {
+    return HotbarStore.getInstance().getActive();
+  }
+
+  isActive(item: CatalogEntity) {
+    return ClusterStore.getInstance().activeClusterId == item.getId();
+  }
+
+  getEntity(item: HotbarItem) {
     const hotbar = HotbarStore.getInstance().getActive();
 
     if (!hotbar) {
-      return [];
+      return null;
     }
 
-    return hotbar.items.map((item) => catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid)).filter(Boolean);
+    return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
   }
 
   previous() {
@@ -42,6 +51,36 @@ export class HotbarMenu extends React.Component<Props> {
     CommandOverlay.open(<HotbarSwitchCommand />);
   }
 
+  renderGrid() {
+    if (!this.hotbar.items.length) return;
+
+    return this.hotbar.items.map((item, index) => {
+      const entity = this.getEntity(item);
+
+      return (
+        <HotbarCell key={index} index={index}>
+          {entity && (
+            <HotbarIcon
+              key={index}
+              index={index}
+              entity={entity}
+              isActive={this.isActive(entity)}
+              onClick={() => entity.onRun(catalogEntityRunContext)}
+            />
+          )}
+        </HotbarCell>
+      );
+    });
+  }
+
+  renderAddCellButton() {
+    return (
+      <button className="AddCellButton" onClick={() => HotbarStore.getInstance().addEmptyCell()}>
+        <Icon material="add"/>
+      </button>
+    );
+  }
+
   render() {
     const { className } = this.props;
     const hotbarStore = HotbarStore.getInstance();
@@ -50,22 +89,13 @@ export class HotbarMenu extends React.Component<Props> {
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
-        <div className="items flex column gaps">
-          {this.hotbarItems.map((entity, index) => {
-            return (
-              <HotbarIcon
-                key={index}
-                index={index}
-                entity={entity}
-                isActive={entity.status.active}
-                onClick={() => entity.onRun(catalogEntityRunContext)}
-              />
-            );
-          })}
+        <div className="HotbarItems flex column gaps">
+          {this.renderGrid()}
+          {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
-        <div className="HotbarSelector flex gaps auto">
-          <Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
-          <div className="box">
+        <div className="HotbarSelector flex align-center">
+          <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
+          <div className="box grow flex align-center">
             <Badge id="hotbarIndex" small label={activeIndexDisplay} onClick={() => this.openSelector()} />
             <Tooltip
               targetId="hotbarIndex"
@@ -74,9 +104,39 @@ export class HotbarMenu extends React.Component<Props> {
               {hotbar.name}
             </Tooltip>
           </div>
-          <Icon material="chevron_right" className="next box" onClick={() => this.next()} />
+          <Icon material="play_arrow" className="next box" onClick={() => this.next()} />
         </div>
       </div>
     );
   }
 }
+
+interface HotbarCellProps {
+  children?: ReactNode;
+  index: number;
+}
+
+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 })}
+      onAnimationEnd={onAnimationEnd}
+      onClick={onClick}
+    >
+      {props.children}
+      {!props.children && (
+        <div className="cellDeleteButton" onClick={onDeleteClick}>
+          <Icon material="close" smallest/>
+        </div>
+      )}
+    </div>
+  );
+}