add icon column to catalog list

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

src/renderer/components/+catalog/catalog.scss

@@ -69,7 +69,28 @@
     }
   }
 
+  .TableCell.icon {
+    max-width: 40px;
+    .HotbarIcon {
+      --size: 24px;
+      position: relative;
+      top: -3px;
+      .MuiAvatar-root {
+        font-size: 8px;
+        border-radius: 3px;
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  .TableCell.source {
+    max-width: 100px;
+  }
+
   .TableCell.status {
+    max-width: 100px;
     &.connected {
       color: var(--colorSuccess);
     }

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

@@ -40,6 +40,7 @@ import { CatalogAddButton } from "./catalog-add-button";
 import type { RouteComponentProps } from "react-router";
 import type { ICatalogViewRouteParam } from "./catalog.route";
 import { Notifications } from "../notifications";
+import { HotbarIcon } from "../hotbar/hotbar-icon";
 
 enum sortBy {
   name = "name",
@@ -174,6 +175,23 @@ export class Catalog extends React.Component<Props> {
     );
   }
 
+  renderIcon(item: CatalogEntityItem) {
+    const category = catalogCategoryRegistry.getCategoryForEntity(item.entity);
+
+    if (!category) {
+      return null;
+    }
+
+    return (
+      <>
+        <HotbarIcon
+          uid={item.getId()}
+          title={item.name}
+          source={item.source} />
+      </>
+    );
+  }
+
   render() {
     if (!this.catalogEntityStore) {
       return null;
@@ -202,12 +220,14 @@ export class Catalog extends React.Component<Props> {
             (entity: CatalogEntityItem) => entity.searchFields,
           ]}
           renderTableHeader={[
+            { title: "", className: "icon" },
             { title: "Name", className: "name", sortBy: sortBy.name },
             { title: "Source", className: "source", sortBy: sortBy.source },
             { title: "Labels", className: "labels" },
             { title: "Status", className: "status", sortBy: sortBy.status },
           ]}
           renderTableContents={(item: CatalogEntityItem) => [
+            this.renderIcon(item),
             item.name,
             item.source,
             item.labels.map((label) => <Badge key={label} label={label} title={label} />),

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

@@ -20,92 +20,6 @@
  */
 
 .HotbarMenu {
-  .HotbarIcon {
-    --size: 37px;
-
-    border-radius: 6px;
-    user-select: none;
-    cursor: pointer;
-    transition: none;
-    text-shadow: 0 0 4px #0000008f;
-    position: relative;
-
-    div.MuiAvatar-colorDefault {
-      font-weight:500;
-      text-transform: uppercase;
-      border-radius: 6px;
-    }
-
-    &.disabled {
-      opacity: 0.4;
-      cursor: default;
-      filter: grayscale(0.7);
-
-      &:hover {
-        &:not(.active) {
-          box-shadow: none;
-        }
-      }
-    }
-
-    &.isDragging {
-      box-shadow: none;
-    }
-
-    div.MuiAvatar-root {
-      &.active {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
-        transition: all 0s 0.8s;
-      }
-
-      &:hover {
-        &:not(.active) {
-          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
-        }
-      }
-    }
-
-    .led {
-      position: absolute;
-      left: 3px;
-      top: 3px;
-      background-color: var(--layoutBackground);
-      border: 1px solid var(--clusterMenuBackground);
-      border-radius: 50%;
-      padding: 0px;
-      width: 8px;
-      height: 8px;
-
-      &.online {
-        background-color: var(--primary);
-        box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary);
-      }
-    }
-
-    .badge {
-      position: absolute;
-      right: -2px;
-      bottom: -3px;
-      margin: -8px;
-      font-size: var(--font-size-small);
-      background: var(--clusterMenuBackground);
-      color: var(--textColorAccent);
-      padding: 0px;
-      border-radius: 50%;
-      border: 2px solid var(--clusterMenuBackground);
-      width: 15px;
-      height: 15px;
-
-      svg {
-        width: 13px;
-      }
-    }
-
-    img {
-      width: var(--size);
-      height: var(--size);
-    }
-  }
 
   .HotbarIconMenu {
     left: 30px;
@@ -116,3 +30,93 @@
     }
   }
 }
+
+.HotbarIcon {
+  --size: 37px;
+
+  border-radius: 6px;
+  user-select: none;
+  cursor: pointer;
+  transition: none;
+  text-shadow: 0 0 4px #0000008f;
+  position: relative;
+
+  div.MuiAvatar-colorDefault {
+    font-weight:500;
+    text-transform: uppercase;
+    border-radius: 6px;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: default;
+    filter: grayscale(0.7);
+
+    &:hover {
+      &:not(.active) {
+        box-shadow: none;
+      }
+    }
+  }
+
+  &.isDragging {
+    box-shadow: none;
+  }
+
+  div.MuiAvatar-root {
+    width: var(--size);
+    height: var(--size);
+
+    &.active {
+      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+      transition: all 0s 0.8s;
+    }
+
+    &:hover {
+      &:not(.active) {
+        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
+      }
+    }
+  }
+
+  .led {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    background-color: var(--layoutBackground);
+    border: 1px solid var(--clusterMenuBackground);
+    border-radius: 50%;
+    padding: 0px;
+    width: 8px;
+    height: 8px;
+
+    &.online {
+      background-color: var(--primary);
+      box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary);
+    }
+  }
+
+  .badge {
+    position: absolute;
+    right: -2px;
+    bottom: -3px;
+    margin: -8px;
+    font-size: var(--font-size-small);
+    background: var(--clusterMenuBackground);
+    color: var(--textColorAccent);
+    padding: 0px;
+    border-radius: 50%;
+    border: 2px solid var(--clusterMenuBackground);
+    width: 15px;
+    height: 15px;
+
+    svg {
+      width: 13px;
+    }
+  }
+
+  img {
+    width: var(--size);
+    height: var(--size);
+  }
+}