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/common/catalog-entities/kubernetes-cluster.ts

@@ -50,7 +50,7 @@ export class KubernetesCluster extends CatalogEntity<CatalogEntityMetadata, Kube
       },
     ];
 
-    if (this.status.active) {
+    if (this.status.phase == "connected") {
       context.menuItems.unshift({
         icon: "link_off",
         title: "Disconnect",

src/common/hotbar-store.ts

@@ -2,6 +2,9 @@ import { action, comparer, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
 import * as uuid from "uuid";
+import { CatalogEntityItem } from "../renderer/components/+catalog/catalog-entity.store";
+import isNull from "lodash/isNull";
+import { CatalogEntity } from "./catalog/catalog-entity";
 
 export interface HotbarItem {
   entity: {
@@ -29,6 +32,8 @@ export interface HotbarStoreModel {
   activeHotbarId: string;
 }
 
+export const defaultHotbarCells = 12; // Number is choosen to easy hit any item with keyboard
+
 export class HotbarStore extends BaseStore<HotbarStoreModel> {
   @observable hotbars: Hotbar[] = [];
   @observable private _activeHotbarId: string;
@@ -58,12 +63,16 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     return this.hotbars.findIndex((hotbar) => hotbar.id === this.activeHotbarId);
   }
 
+  get initialItems() {
+    return [...Array.from(Array(defaultHotbarCells).fill(null))];
+  }
+
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
     if (data.hotbars?.length === 0) {
       this.hotbars = [{
         id: uuid.v4(),
         name: "Default",
-        items: []
+        items: this.initialItems,
       }];
     } else {
       this.hotbars = data.hotbars;
@@ -95,7 +104,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   add(data: HotbarCreateOptions) {
     const {
       id = uuid.v4(),
-      items = [],
+      items = this.initialItems,
       name,
     } = data;
 
@@ -115,6 +124,52 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }
   }
 
+  addToHotbar(item: CatalogEntityItem, cellIndex = -1) {
+    const hotbar = this.getActive();
+    const newItem = { entity: { uid: item.id }};
+
+    if (hotbar.items.find(i => i?.entity.uid === item.id)) {
+      return;
+    }
+
+    if (cellIndex == -1) {
+      // Add item to empty cell
+      const emptyCellIndex = hotbar.items.findIndex(isNull);
+
+      if (emptyCellIndex != -1) {
+        hotbar.items[emptyCellIndex] = newItem;
+      } else {
+        // Add new item to the end of list
+        hotbar.items.push(newItem);
+      }
+    } else {
+      hotbar.items[cellIndex] = newItem;
+    }
+  }
+
+  removeFromHotbar(item: CatalogEntity) {
+    const hotbar = this.getActive();
+    const index = hotbar.items.findIndex((i) => i?.entity.uid === item.getId());
+
+    if (index == -1) {
+      return;
+    }
+
+    hotbar.items[index] = null;
+  }
+
+  addEmptyCell() {
+    const hotbar = this.getActive();
+
+    hotbar.items.push(null);
+  }
+
+  removeEmptyCell(index: number) {
+    const hotbar = this.getActive();
+
+    hotbar.items.splice(index, 1);
+  }
+
   switchToPrevious() {
     const hotbarStore = HotbarStore.getInstance();
     let index = hotbarStore.activeHotbarIndex - 1;