Dim disabled pin icon

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

src/common/__tests__/hotbar-store.test.ts

@@ -324,6 +324,15 @@ describe("HotbarStore", () => {
       console.error = error;
       console.warn = warn;
     });
+
+    it("checks if entity already pinned to hotbar", () => {
+      const hotbarStore = HotbarStore.getInstance();
+
+      hotbarStore.addToHotbar(testCluster);
+
+      expect(hotbarStore.entityPinnedToHotbar(testCluster)).toBeTruthy();
+      expect(hotbarStore.entityPinnedToHotbar(awsCluster)).toBeFalsy();
+    });
   });
 
   describe("pre beta-5 migrations", () => {

src/common/hotbar-store.ts

@@ -171,7 +171,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }};
 
 
-    if (hotbar.items.find(i => i?.entity.uid === uid)) {
+    if (this.entityPinnedToHotbar(item)) {
       return;
     }
 
@@ -274,6 +274,14 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
 
     hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id;
   }
+
+  /**
+   * Checks if entity already pinned to hotbar
+   * @returns boolean
+   */
+  entityPinnedToHotbar(entity: CatalogEntity) {
+    return !!this.getActive().items.find(item => item?.entity.uid === entity.metadata.uid);
+  }
 }
 
 /**

src/renderer/components/+catalog/catalog.module.css

@@ -44,6 +44,10 @@
 
   &:hover .pinIcon {
     opacity: 1;
+
+    &:global(.disabled) {
+      opacity: 0.3;
+    }
   }
 }
 

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

@@ -188,13 +188,21 @@ export class Catalog extends React.Component<Props> {
   };
 
   renderName(item: CatalogEntityItem<CatalogEntity>) {
+    const disabledIcon = HotbarStore.getInstance().entityPinnedToHotbar(item.entity);
+
     return (
       <div className={styles.entityName}>
         {item.name}
-        <Icon className={styles.pinIcon} material="push_pin" small tooltip="Pin to Hotbar" onClick={(event) => {
-          event.stopPropagation();
-          this.addToHotbar(item);
-        }}/>
+        <Icon
+          small
+          disabled={disabledIcon}
+          className={styles.pinIcon}
+          material="push_pin"
+          tooltip={disabledIcon ? "" : "Pin to Hotbar"}
+          onClick={(event) => {
+            event.stopPropagation();
+            this.addToHotbar(item);
+          }}/>
       </div>
     );
   }