Add icon to catalog category (#2606)

* add icon to catalog category

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix styles

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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

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

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

@@ -38,6 +38,22 @@
       }
     }
 
+    .badge {
+      color: $textColorAccent;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      margin: -$padding;
+      font-size: $font-size-small;
+      background: $clusterMenuBackground;
+      color: white;
+      padding: 0px;
+      border-radius: 50%;
+      svg {
+        width: 13px;
+      }
+    }
+
     img {
       width: var(--size);
       height: var(--size);

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

@@ -12,6 +12,7 @@ import { observable } from "mobx";
 import { navigate } from "../../navigation";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
+import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 
 interface Props extends DOMAttributes<HTMLElement> {
   entity: CatalogEntity;
@@ -55,6 +56,21 @@ export class HotbarIcon extends React.Component<Props> {
     }
   }
 
+  get badgeIcon() {
+    const className = "badge";
+    const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
+
+    if (!category) {
+      return <Icon material="bug_report" className={className} />;
+    }
+
+    if (category.metadata.icon.includes("<svg")) {
+      return <Icon svg={category.metadata.icon} className={className} />;
+    } else {
+      return <Icon material={category.metadata.icon} className={className} />;
+    }
+  }
+
   toggleMenu() {
     this.menuOpen = !this.menuOpen;
   }
@@ -106,6 +122,7 @@ export class HotbarIcon extends React.Component<Props> {
       <div className={className}>
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
         <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
+        { this.badgeIcon }
         <Menu
           usePortal={false}
           htmlFor={entityIconId}

src/renderer/components/icon/icon.tsx

@@ -94,7 +94,7 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (svg) {
-      const svgIconText = require(`!!raw-loader!./${svg}.svg`).default;
+      const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
 
       iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }