Merge remote-tracking branch 'origin/master' into mobx-6.2

# Conflicts:
#	src/common/catalog-entities/kubernetes-cluster.ts
#	src/common/catalog-entities/web-link.ts
#	src/common/catalog/catalog-category-registry.ts
#	src/extensions/core-api/catalog.ts
#	src/main/cluster-manager.ts
#	src/renderer/api/catalog-entity-registry.ts
#	src/renderer/components/+catalog/catalog-entity.store.ts

package.json

@@ -262,6 +262,7 @@
     "@types/npm": "^2.0.31",
     "@types/progress-bar-webpack-plugin": "^2.1.0",
     "@types/proper-lockfile": "^4.1.1",
+    "@types/randomcolor": "^0.5.5",
     "@types/react": "^17.0.0",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.0",
@@ -326,6 +327,7 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.0",
     "progress-bar-webpack-plugin": "^2.1.0",
+    "randomcolor": "^0.6.2",
     "raw-loader": "^4.0.1",
     "react-beautiful-dnd": "^13.1.0",
     "react-refresh": "^0.9.0",

src/common/__tests__/catalog-entity-registry.test.ts

@@ -1,12 +1,10 @@
 import { observable, reaction } from "mobx";
 import { WebLink } from "../catalog-entities";
-import { CatalogEntityRegistry } from "../catalog-entity-registry";
+import { CatalogEntityRegistry } from "../catalog";
 
 describe("CatalogEntityRegistry", () => {
   let registry: CatalogEntityRegistry;
   const entity = new WebLink({
-    apiVersion: "entity.k8slens.dev/v1alpha1",
-    kind: "WebLink",
     metadata: {
       uid: "test",
       name: "test-link",
@@ -17,7 +15,7 @@ describe("CatalogEntityRegistry", () => {
       url: "https://k8slens.dev"
     },
     status: {
-      phase: "ok"
+      phase: "valid"
     }
   });
 

src/common/catalog-entities/kubernetes-cluster.ts

@@ -1,11 +1,10 @@
-import { EventEmitter } from "events";
-import { observable, makeObservable } from "mobx";
-import { catalogCategoryRegistry } from "../catalog-category-registry";
-import { CatalogCategory, CatalogEntity, CatalogEntityActionContext, CatalogEntityAddMenuContext, CatalogEntityContextMenuContext, CatalogEntityData, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog-entity";
+import { catalogCategoryRegistry } from "../catalog/catalog-category-registry";
+import { CatalogEntity, CatalogEntityActionContext, CatalogEntityAddMenuContext, CatalogEntityContextMenuContext, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog";
 import { clusterDisconnectHandler } from "../cluster-ipc";
 import { ClusterStore } from "../cluster-store";
 import { requestMain } from "../ipc";
 import { productName } from "../vars";
+import { CatalogCategory, CatalogCategorySpec } from "../catalog";
 
 export type KubernetesClusterSpec = {
   kubeconfigPath: string;
@@ -16,34 +15,19 @@ export interface KubernetesClusterStatus extends CatalogEntityStatus {
   phase: "connected" | "disconnected";
 }
 
-export class KubernetesCluster implements CatalogEntity {
+export class KubernetesCluster extends CatalogEntity<CatalogEntityMetadata, KubernetesClusterStatus, KubernetesClusterSpec> {
   public readonly apiVersion = "entity.k8slens.dev/v1alpha1";
   public readonly kind = "KubernetesCluster";
-  @observable public metadata: CatalogEntityMetadata;
-  @observable public status: KubernetesClusterStatus;
-  @observable public spec: KubernetesClusterSpec;
-
-  constructor(data: CatalogEntityData) {
-    makeObservable(this);
-
-    this.metadata = data.metadata;
-    this.status = data.status as KubernetesClusterStatus;
-    this.spec = data.spec as KubernetesClusterSpec;
-  }
-
-  getId() {
-    return this.metadata.uid;
-  }
-
-  getName() {
-    return this.metadata.name;
-  }
 
   async onRun(context: CatalogEntityActionContext) {
     context.navigate(`/cluster/${this.metadata.uid}`);
   }
 
-  async onDetailsOpen() {
+  onDetailsOpen(): void {
+    //
+  }
+
+  onSettingsOpen(): void {
     //
   }
 
@@ -83,14 +67,14 @@ export class KubernetesCluster implements CatalogEntity {
   }
 }
 
-export class KubernetesClusterCategory extends EventEmitter implements CatalogCategory {
+export class KubernetesClusterCategory extends CatalogCategory {
   public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
   public readonly kind = "CatalogCategory";
   public metadata = {
     name: "Kubernetes Clusters",
     icon: require(`!!raw-loader!./icons/kubernetes.svg`).default // eslint-disable-line
   };
-  public spec = {
+  public spec: CatalogCategorySpec = {
     group: "entity.k8slens.dev",
     versions: [
       {
@@ -116,10 +100,6 @@ export class KubernetesClusterCategory extends EventEmitter implements CatalogCa
       });
     });
   }
-
-  getId() {
-    return `${this.spec.group}/${this.spec.names.kind}`;
-  }
 }
 
 catalogCategoryRegistry.add(new KubernetesClusterCategory());

src/common/catalog-entities/web-link.ts

@@ -1,6 +1,5 @@
-import { observable, makeObservable } from "mobx";
-import { CatalogCategory, CatalogEntity, CatalogEntityData, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog-entity";
-import { catalogCategoryRegistry } from "../catalog-category-registry";
+import { CatalogCategory, CatalogEntity, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog";
+import { catalogCategoryRegistry } from "../catalog/catalog-category-registry";
 
 export interface WebLinkStatus extends CatalogEntityStatus {
   phase: "valid" | "invalid";
@@ -10,42 +9,28 @@ export type WebLinkSpec = {
   url: string;
 };
 
-export class WebLink implements CatalogEntity {
+export class WebLink extends CatalogEntity<CatalogEntityMetadata, WebLinkStatus, WebLinkSpec> {
   public readonly apiVersion = "entity.k8slens.dev/v1alpha1";
   public readonly kind = "KubernetesCluster";
-  @observable public metadata: CatalogEntityMetadata;
-  @observable public status: WebLinkStatus;
-  @observable public spec: WebLinkSpec;
-
-  constructor(data: CatalogEntityData) {
-    makeObservable(this);
-    this.metadata = data.metadata;
-    this.status = data.status as WebLinkStatus;
-    this.spec = data.spec as WebLinkSpec;
-  }
-
-  getId() {
-    return this.metadata.uid;
-  }
-
-  getName() {
-    return this.metadata.name;
-  }
 
   async onRun() {
     window.open(this.spec.url, "_blank");
   }
 
-  async onDetailsOpen() {
-    //
+  public onSettingsOpen(): void {
+    return;
   }
 
-  async onContextMenuOpen() {
-    //
+  public onDetailsOpen(): void {
+    return;
+  }
+
+  public onContextMenuOpen(): void {
+    return;
   }
 }
 
-export class WebLinkCategory implements CatalogCategory {
+export class WebLinkCategory extends CatalogCategory {
   public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
   public readonly kind = "CatalogCategory";
   public metadata = {
@@ -64,10 +49,6 @@ export class WebLinkCategory implements CatalogCategory {
       kind: "WebLink"
     }
   };
-
-  getId() {
-    return `${this.spec.group}/${this.spec.names.kind}`;
-  }
 }
 
 catalogCategoryRegistry.add(new WebLinkCategory());

src/common/catalog-entity.ts

@@ -1,95 +0,0 @@
-export interface CatalogCategoryVersion {
-  name: string;
-  entityClass: { new(data: CatalogEntityData): CatalogEntity };
-}
-
-export interface CatalogCategory {
-  apiVersion: string;
-  kind: string;
-  metadata: {
-    name: string;
-    icon: string;
-  }
-  spec: {
-    group: string;
-    versions: CatalogCategoryVersion[];
-    names: {
-      kind: string;
-    }
-  }
-  getId: () => string;
-}
-
-export type CatalogEntityMetadata = {
-  uid: string;
-  name: string;
-  description?: string;
-  source?: string;
-  labels: {
-    [key: string]: string;
-  }
-  [key: string]: string | object;
-};
-
-export type CatalogEntityStatus = {
-  phase: string;
-  reason?: string;
-  message?: string;
-  active?: boolean;
-};
-
-export interface CatalogEntityActionContext {
-  navigate: (url: string) => void;
-  setCommandPaletteContext: (context?: CatalogEntity) => void;
-}
-
-export type CatalogEntityContextMenu = {
-  icon: string;
-  title: string;
-  onlyVisibleForSource?: string; // show only if empty or if matches with entity source
-  onClick: () => Promise<void>;
-  confirm?: {
-    message: string;
-  }
-};
-
-export type CatalogEntitySettingsMenu = {
-  group?: string;
-  title: string;
-  components: {
-    View: React.ComponentType<any>
-  };
-};
-
-export interface CatalogEntityContextMenuContext {
-  navigate: (url: string) => void;
-  menuItems: CatalogEntityContextMenu[];
-}
-
-export interface CatalogEntitySettingsContext {
-  menuItems: CatalogEntityContextMenu[];
-}
-
-export interface CatalogEntityAddMenuContext {
-  navigate: (url: string) => void;
-  menuItems: CatalogEntityContextMenu[];
-}
-
-export type CatalogEntityData = {
-  apiVersion: string;
-  kind: string;
-  metadata: CatalogEntityMetadata;
-  status: CatalogEntityStatus;
-  spec: {
-    [key: string]: any;
-  }
-};
-
-export interface CatalogEntity extends CatalogEntityData {
-  getId: () => string;
-  getName: () => string;
-  onRun: (context: CatalogEntityActionContext) => Promise<void>;
-  onDetailsOpen: (context: CatalogEntityActionContext) => Promise<void>;
-  onContextMenuOpen: (context: CatalogEntityContextMenuContext) => Promise<void>;
-  onSettingsOpen?: (context: CatalogEntitySettingsContext) => Promise<void>;
-}

src/common/catalog/catalog-category-registry.ts

@@ -1,5 +1,5 @@
 import { action, computed, observable, toJS, makeObservable } from "mobx";
-import { CatalogCategory, CatalogEntityData } from "./catalog-entity";
+import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
 
 export class CatalogCategoryRegistry {
   @observable protected categories: CatalogCategory[] = [];
@@ -24,7 +24,7 @@ export class CatalogCategoryRegistry {
     return this.categories.find((c) => c.spec.group === group && c.spec.names.kind === kind) as T;
   }
 
-  getEntityForData(data: CatalogEntityData) {
+  getEntityForData(data: CatalogEntityData & CatalogEntityKindData) {
     const category = this.getCategoryForEntity(data);
 
     if (!category) {
@@ -43,7 +43,7 @@ export class CatalogCategoryRegistry {
     return new specVersion.entityClass(data);
   }
 
-  getCategoryForEntity<T extends CatalogCategory>(data: CatalogEntityData) {
+  getCategoryForEntity<T extends CatalogCategory>(data: CatalogEntityData & CatalogEntityKindData) {
     const splitApiVersion = data.apiVersion.split("/");
     const group = splitApiVersion[0];
 

src/common/catalog/catalog-entity.ts

@@ -0,0 +1,143 @@
+import { EventEmitter } from "events";
+import { observable } from "mobx";
+
+type ExtractEntityMetadataType<Entity> = Entity extends CatalogEntity<infer Metadata> ? Metadata : never;
+type ExtractEntityStatusType<Entity> = Entity extends CatalogEntity<any, infer Status> ? Status : never;
+type ExtractEntitySpecType<Entity> = Entity extends CatalogEntity<any, any, infer Spec> ? Spec : never;
+
+export type CatalogEntityConstructor<Entity extends CatalogEntity> = (
+  (new (data: CatalogEntityData<
+    ExtractEntityMetadataType<Entity>,
+    ExtractEntityStatusType<Entity>,
+    ExtractEntitySpecType<Entity>
+  >) => Entity)
+);
+
+export interface CatalogCategoryVersion<Entity extends CatalogEntity> {
+  name: string;
+  entityClass: CatalogEntityConstructor<Entity>;
+}
+
+export interface CatalogCategorySpec {
+  group: string;
+  versions: CatalogCategoryVersion<CatalogEntity>[];
+  names: {
+    kind: string;
+  };
+}
+
+export abstract class CatalogCategory extends EventEmitter {
+  abstract readonly apiVersion: string;
+  abstract readonly kind: string;
+  abstract metadata: {
+    name: string;
+    icon: string;
+  };
+  abstract spec: CatalogCategorySpec;
+
+  public getId(): string {
+    return `${this.spec.group}/${this.spec.names.kind}`;
+  }
+}
+
+export interface CatalogEntityMetadata {
+  uid: string;
+  name: string;
+  description?: string;
+  source?: string;
+  labels: Record<string, string>;
+  [key: string]: string | object;
+}
+
+export interface CatalogEntityStatus {
+  phase: string;
+  reason?: string;
+  message?: string;
+  active?: boolean;
+}
+
+export interface CatalogEntityActionContext {
+  navigate: (url: string) => void;
+  setCommandPaletteContext: (context?: CatalogEntity) => void;
+}
+
+export interface CatalogEntityContextMenu {
+  icon: string;
+  title: string;
+  onlyVisibleForSource?: string; // show only if empty or if matches with entity source
+  onClick: () => Promise<void>;
+  confirm?: {
+    message: string;
+  }
+}
+
+export interface CatalogEntitySettingsMenu {
+  group?: string;
+  title: string;
+  components: {
+    View: React.ComponentType<any>
+  };
+}
+
+export interface CatalogEntityContextMenuContext {
+  navigate: (url: string) => void;
+  menuItems: CatalogEntityContextMenu[];
+}
+
+export interface CatalogEntitySettingsContext {
+  menuItems: CatalogEntityContextMenu[];
+}
+
+export interface CatalogEntityAddMenuContext {
+  navigate: (url: string) => void;
+  menuItems: CatalogEntityContextMenu[];
+}
+
+export type CatalogEntitySpec = Record<string, any>;
+
+export interface CatalogEntityData<
+  Metadata extends CatalogEntityMetadata = CatalogEntityMetadata,
+  Status extends CatalogEntityStatus = CatalogEntityStatus,
+  Spec extends CatalogEntitySpec = CatalogEntitySpec,
+> {
+  metadata: Metadata;
+  status: Status;
+  spec: Spec;
+}
+
+export interface CatalogEntityKindData {
+  readonly apiVersion: string;
+  readonly kind: string;
+}
+
+export abstract class CatalogEntity<
+  Metadata extends CatalogEntityMetadata = CatalogEntityMetadata,
+  Status extends CatalogEntityStatus = CatalogEntityStatus,
+  Spec extends CatalogEntitySpec = CatalogEntitySpec,
+> implements CatalogEntityKindData {
+  public abstract readonly apiVersion: string;
+  public abstract readonly kind: string;
+
+  @observable metadata: Metadata;
+  @observable status: Status;
+  @observable spec: Spec;
+
+  constructor(data: CatalogEntityData<Metadata, Status, Spec>) {
+    this.metadata = data.metadata;
+    this.status = data.status;
+    this.spec = data.spec;
+  }
+
+  public getId(): string {
+    return this.metadata.uid;
+  }
+
+  public getName(): string {
+    return this.metadata.name;
+  }
+
+  public abstract onRun?(context: CatalogEntityActionContext): void | Promise<void>;
+  public abstract onDetailsOpen(context: CatalogEntityActionContext): void | Promise<void>;
+  public abstract onContextMenuOpen(context: CatalogEntityContextMenuContext): void | Promise<void>;
+  public abstract onSettingsOpen(context: CatalogEntitySettingsContext): void | Promise<void>;
+}

src/common/catalog/index.ts

@@ -0,0 +1,3 @@
+export * from "./catalog-category-registry";
+export * from "./catalog-entity";
+export * from "./catalog-entity-registry";

src/extensions/core-api/catalog.ts

@@ -1,7 +1,6 @@
-import { CatalogEntity } from "../../common/catalog-entity";
-import { catalogEntityRegistry as registry } from "../../common/catalog-entity-registry";
+import { CatalogEntity, catalogEntityRegistry as registry } from "../../common/catalog";
 
-export { catalogCategoryRegistry as catalogCategories } from "../../common/catalog-category-registry";
+export { catalogCategoryRegistry as catalogCategories } from "../../common/catalog/catalog-category-registry";
 export * from "../../common/catalog-entities";
 
 export class CatalogEntityRegistry {

src/extensions/interfaces/catalog.ts

@@ -1 +1 @@
-export * from "../../common/catalog-entity";
+export * from "../../common/catalog/catalog-entity";

src/extensions/lens-main-extension.ts

@@ -2,8 +2,7 @@ import type { MenuRegistration } from "./registries/menu-registry";
 import { LensExtension } from "./lens-extension";
 import { WindowManager } from "../main/window-manager";
 import { getExtensionPageUrl } from "./registries/page-registry";
-import { catalogEntityRegistry } from "../common/catalog-entity-registry";
-import { CatalogEntity } from "../common/catalog-entity";
+import { CatalogEntity, catalogEntityRegistry } from "../common/catalog";
 import { IObservableArray } from "mobx";
 
 export class LensMainExtension extends LensExtension {

src/extensions/registries/command-registry.ts

@@ -3,7 +3,7 @@
 import { BaseRegistry } from "./base-registry";
 import { observable, makeObservable } from "mobx";
 import { LensExtension } from "../lens-extension";
-import { CatalogEntity } from "../../common/catalog-entity";
+import { CatalogEntity } from "../../common/catalog";
 
 export type CommandContext = {
   entity?: CatalogEntity;

src/extensions/registries/entity-setting-registry.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import { CatalogEntity } from "../../common/catalog-entity";
+import { CatalogEntity } from "../../common/catalog";
 import { BaseRegistry } from "./base-registry";
 
 export interface EntitySettingViewProps {
@@ -35,10 +35,6 @@ export class EntitySettingRegistry extends BaseRegistry<EntitySettingRegistratio
   getItemsForKind(kind: string, apiVersion: string, source?: string) {
     let items = this.getItems().filter((item) => {
       return item.kind === kind && item.apiVersions.includes(apiVersion);
-    }).map((item) => {
-      item.priority = item.priority ?? 50;
-
-      return item;
     });
 
     if (source) {
@@ -47,7 +43,7 @@ export class EntitySettingRegistry extends BaseRegistry<EntitySettingRegistratio
       });
     }
 
-    return items.sort((a, b) => b.priority - a.priority);
+    return items.sort((a, b) => (b.priority ?? 50) - (a.priority ?? 50));
   }
 }
 

src/extensions/registries/kube-object-detail-registry.ts

@@ -16,15 +16,9 @@ export class KubeObjectDetailRegistry extends BaseRegistry<KubeObjectDetailRegis
   getItemsForKind(kind: string, apiVersion: string) {
     const items = this.getItems().filter((item) => {
       return item.kind === kind && item.apiVersions.includes(apiVersion);
-    }).map((item) => {
-      if (item.priority === null) {
-        item.priority = 50;
-      }
-
-      return item;
     });
 
-    return items.sort((a, b) => b.priority - a.priority);
+    return items.sort((a, b) => (b.priority ?? 50) - (a.priority ?? 50));
   }
 }
 

src/main/catalog-pusher.ts

@@ -1,6 +1,6 @@
 import { autorun, toJS } from "mobx";
 import { broadcastMessage, subscribeToBroadcast, unsubscribeFromBroadcast } from "../common/ipc";
-import { CatalogEntityRegistry} from "../common/catalog-entity-registry";
+import { CatalogEntityRegistry} from "../common/catalog";
 import "../common/catalog-entities/kubernetes-cluster";
 
 export class CatalogPusher {

src/main/cluster-manager.ts

@@ -6,10 +6,10 @@ import { ClusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import { Cluster } from "./cluster";
 import logger from "./logger";
 import { apiKubePrefix } from "../common/vars";
-import { cloneJson, Singleton } from "../common/utils";
+import { CatalogEntity, catalogEntityRegistry } from "../common/catalog";
 import { CatalogEntity, CatalogEntityData } from "../common/catalog-entity";
+import { cloneJson, Singleton } from "../common/utils";
 import { KubernetesCluster } from "../common/catalog-entities/kubernetes-cluster";
-import { catalogEntityRegistry } from "../common/catalog-entity-registry";
 
 const clusterOwnerRef = "ClusterManager";
 

src/main/index.ts

@@ -31,7 +31,7 @@ import { bindBroadcastHandlers } from "../common/ipc";
 import { startUpdateChecking } from "./app-updater";
 import { IpcRendererNavigationEvents } from "../renderer/navigation/events";
 import { CatalogPusher } from "./catalog-pusher";
-import { catalogEntityRegistry } from "../common/catalog-entity-registry";
+import { catalogEntityRegistry } from "../common/catalog";
 import { HotbarStore } from "../common/hotbar-store";
 import { HelmRepoManager } from "./helm/helm-repo-manager";
 

src/renderer/api/__tests__/catalog-entity-registry.test.ts

@@ -1,6 +1,6 @@
 import { CatalogEntityRegistry } from "../catalog-entity-registry";
 import "../../../common/catalog-entities";
-import { catalogCategoryRegistry } from "../../../common/catalog-category-registry";
+import { catalogCategoryRegistry } from "../../../common/catalog/catalog-category-registry";
 
 describe("CatalogEntityRegistry", () => {
   describe("updateItems", () => {

src/renderer/api/catalog-category-registry.ts

@@ -1 +1 @@
-export { catalogCategoryRegistry } from "../../common/catalog-category-registry";
+export { catalogCategoryRegistry } from "../../common/catalog";

src/renderer/api/catalog-entity-registry.ts

@@ -1,8 +1,7 @@
 import "../../common/catalog-entities";
 import { action, observable, makeObservable } from "mobx";
 import { broadcastMessage, subscribeToBroadcast } from "../../common/ipc";
-import { CatalogCategory, CatalogEntity, CatalogEntityData } from "../../common/catalog-entity";
-import { catalogCategoryRegistry, CatalogCategoryRegistry } from "../../common/catalog-category-registry";
+import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegistry, CatalogCategoryRegistry, CatalogEntityKindData } from "../../common/catalog";
 
 export class CatalogEntityRegistry {
   @observable protected _items: CatalogEntity[] = observable.array([], { deep: true });
@@ -12,13 +11,13 @@ export class CatalogEntityRegistry {
   }
 
   init() {
-    subscribeToBroadcast("catalog:items", (ev, items: CatalogEntityData[]) => {
+    subscribeToBroadcast("catalog:items", (ev, items: (CatalogEntityData & CatalogEntityKindData)[]) => {
       this.updateItems(items);
     });
     broadcastMessage("catalog:broadcast");
   }
 
-  @action updateItems(items: CatalogEntityData[]) {
+  @action updateItems(items: (CatalogEntityData & CatalogEntityKindData)[]) {
     this._items.forEach((item, index) => {
       const foundIndex = items.findIndex((i) => i.apiVersion === item.apiVersion && i.kind === item.kind && i.metadata.uid === item.metadata.uid);
 

src/renderer/api/catalog-entity.ts

@@ -1,16 +1,17 @@
 import { navigate } from "../navigation";
 import { commandRegistry } from "../../extensions/registries";
-import { CatalogEntity } from "../../common/catalog-entity";
+import { CatalogEntity } from "../../common/catalog";
 
 export {
   CatalogCategory,
   CatalogEntity,
   CatalogEntityData,
+  CatalogEntityKindData,
   CatalogEntityActionContext,
   CatalogEntityAddMenuContext,
   CatalogEntityContextMenu,
   CatalogEntityContextMenuContext
-} from "../../common/catalog-entity";
+} from "../../common/catalog";
 
 export const catalogEntityRunContext = {
   navigate: (url: string) => navigate(url),

src/renderer/components/+catalog/catalog-entity.store.ts

@@ -2,7 +2,7 @@ import { computed, IReactionDisposer, makeObservable, observable, reaction } fro
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { CatalogEntity, CatalogEntityActionContext } from "../../api/catalog-entity";
 import { ItemObject, ItemStore } from "../../item.store";
-import { CatalogCategory } from "../../../common/catalog-entity";
+import { CatalogCategory } from "../../../common/catalog";
 
 export class CatalogEntityItem implements ItemObject {
   constructor(public entity: CatalogEntity) {

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

@@ -16,7 +16,7 @@ import { autobind } from "../../utils";
 import { Notifications } from "../notifications";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Tab, Tabs } from "../tabs";
-import { catalogCategoryRegistry } from "../../../common/catalog-category-registry";
+import { catalogCategoryRegistry } from "../../../common/catalog";
 import { CatalogAddButton } from "./catalog-add-button";
 
 enum sortBy {

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

@@ -18,12 +18,12 @@
       background-color: var(--primary);
     }
 
-    div.default {
-      background-color: var(--halfGray);
+    &.interactive {
+      margin-left: -3px;
+      border: 3px solid var(--clusterMenuBackground);
     }
 
     &.active {
-      margin-left: -3px;
       border: 3px solid #fff;
     }
 
@@ -64,11 +64,8 @@
     left: 30px;
     min-width: 250px;
 
-    ul {
-      li {
-        font-size: 12px;
-
-      }
+    li.MenuItem {
+      font-size: 0.9em;
     }
   }
 }

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

@@ -5,13 +5,14 @@ import { observer } from "mobx-react";
 import { cssNames, IClassName } from "../../utils";
 import { Tooltip } from "../tooltip";
 import { Avatar } from "@material-ui/core";
-import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog-entity";
+import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog";
 import { Menu, MenuItem } from "../menu";
 import { Icon } from "../icon";
 import { observable, makeObservable } from "mobx";
 import { navigate } from "../../navigation";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
+import randomColor from "randomcolor";
 import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 
 interface Props extends DOMAttributes<HTMLElement> {
@@ -107,6 +108,12 @@ export class HotbarIcon extends React.Component<Props> {
     }
   }
 
+  generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
+    return {
+      "backgroundColor": randomColor({ seed: entity.metadata.name, luminosity: "dark" })
+    };
+  }
+
   render() {
     const {
       entity, errorClass, isActive,
@@ -126,7 +133,15 @@ export class HotbarIcon extends React.Component<Props> {
     return (
       <div className={className}>
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
-        <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
+        <Avatar
+          {...elemProps}
+          id={entityIconId}
+          variant="square"
+          className={isActive ? "active" : "default"}
+          style={this.generateAvatarStyle(entity)}
+        >
+          {this.iconString}
+        </Avatar>
         { this.badgeIcon }
         <Menu
           usePortal={false}

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

@@ -12,6 +12,7 @@ import { Icon } from "../icon";
 import { Badge } from "../badge";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
+import { Tooltip, TooltipPosition } from "../tooltip";
 
 interface Props {
   className?: IClassName;
@@ -43,7 +44,9 @@ export class HotbarMenu extends React.Component<Props> {
 
   render() {
     const { className } = this.props;
-    const hotbarIndex = HotbarStore.getInstance().activeHotbarIndex + 1;
+    const hotbarStore = HotbarStore.getInstance();
+    const hotbar = hotbarStore.getActive();
+    const activeIndexDisplay = hotbarStore.activeHotbarIndex + 1;
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
@@ -63,7 +66,13 @@ export class HotbarMenu extends React.Component<Props> {
         <div className="HotbarSelector flex gaps auto">
           <Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
           <div className="box">
-            <Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
+            <Badge id="hotbarIndex" small label={activeIndexDisplay} onClick={() => this.openSelector()} />
+            <Tooltip
+              targetId="hotbarIndex"
+              preferredPositions={TooltipPosition.TOP}
+            >
+              {hotbar.name}
+            </Tooltip>
           </div>
           <Icon material="chevron_right" className="next box" onClick={() => this.next()} />
         </div>

yarn.lock

@@ -1558,6 +1558,11 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b"
   integrity sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==
 
+"@types/randomcolor@^0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.5.5.tgz#6d8af5f87c6bec1e338ae2d0739056cc2e5720fd"
+  integrity sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==
+
 "@types/range-parser@*":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
@@ -11491,6 +11496,11 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+randomcolor@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
+  integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"