Showing category icons

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

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

@@ -28,6 +28,7 @@ import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 import { Icon } from "../icon";
 import { StylesProvider } from "@material-ui/core";
 import { cssNames } from "../../utils";
+import type { CatalogCategory } from "../../api/catalog-entity";
 
 type Props = {
   onItemClick: (id: string) => void;
@@ -37,6 +38,14 @@ function getCategories() {
   return catalogCategoryRegistry.items;
 }
 
+function getCategoryIcon(category: CatalogCategory) {
+  if (!category.metadata?.icon) return null;
+
+  return category.metadata.icon.includes("<svg")
+    ? <Icon small svg={category.metadata.icon}/>
+    : <Icon small material={category.metadata.icon}/>;
+}
+
 function Item(props: TreeItemProps) {
   return (
     <TreeItem classes={treeStyles} {...props}/>
@@ -63,6 +72,7 @@ export function CatalogMenu(props: Props) {
             {
               getCategories().map(category => (
                 <Item
+                  icon={getCategoryIcon(category)}
                   key={category.getId()}
                   nodeId={category.getId()}
                   label={category.metadata.name}

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

@@ -19,6 +19,10 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/* This file overwrites basic Material UI TreeView styles. Can contain only following
+  classnames: root, expanded, selected, content, iconContainer, label, group
+*/
+
 .root {
   color: var(--textColorTertiary);
   min-height: 26px;
@@ -38,17 +42,21 @@
 }
 
 .content:hover {
-  background-color: var(--blue);
+  background-color: var(--sidebarItemHoverBackground);
-  color: var(--textColorAccent);
 }
 
 .group {
-  margin-left: 0;
+  margin-left: 0px;
+}
+
+.group .iconContainer {
+  margin-left: 28px;
 }
 
 .selected > *:first-child {
   background-color: var(--blue);
   color: var(--textColorAccent);
+  border-radius: 2px;
 }
 
 .iconContainer {