diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index 5bfb1ac73a..15fc7708a7 100644 --- a/src/common/hotbar-store.ts +++ b/src/common/hotbar-store.ts @@ -274,6 +274,14 @@ export class HotbarStore extends BaseStore { hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id; } + + /** + * Checks if entity already pinned to hotbar + * @returns boolean + */ + isAddedToActive(entity: CatalogEntity) { + return !!this.getActive().items.find(item => item?.entity.uid === entity.metadata.uid); + } } /** diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx index 73afbf2c04..3974f317a1 100644 --- a/src/renderer/components/layout/sidebar.tsx +++ b/src/renderer/components/layout/sidebar.tsx @@ -44,6 +44,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; import { HotbarIcon } from "../hotbar/hotbar-icon"; import { observable } from "mobx"; import type { CatalogEntityContextMenuContext } from "../../../common/catalog"; +import { HotbarStore } from "../../../common/hotbar-store"; interface Props { className?: string; @@ -202,7 +203,16 @@ export class Sidebar extends React.Component { onClick={() => navigate("/")} menuItems={this.contextMenu.menuItems} onMenuOpen={() => { - this.contextMenu.menuItems = []; + const hotbarStore = HotbarStore.getInstance(); + const isAddedToActive = HotbarStore.getInstance().isAddedToActive(this.clusterEntity); + const title = isAddedToActive + ? `Remove from hotbar ${hotbarStore.getActive().name}` + : `Add to hotbar ${hotbarStore.getActive().name}`; + const onClick = isAddedToActive + ? () => hotbarStore.removeFromHotbar(metadata.uid) + : () => hotbarStore.addToHotbar(this.clusterEntity); + + this.contextMenu.menuItems = [{ title, onClick }]; this.clusterEntity.onContextMenuOpen(this.contextMenu); }} />