Usign avatar in catalog entity details

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

src/renderer/components/+catalog/catalog-entity-details.module.css

@@ -33,9 +33,8 @@
   margin-right: calc(var(--margin) * 3);
 
   .avatar {
-    :global(.MuiAvatar-root) {
-      font-size: 3ch;
-    }
+    font-size: 3ch;
+    cursor: pointer;
   }
 
   .hint {

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -27,10 +27,10 @@ import type { CatalogCategory, CatalogEntity } from "../../../common/catalog";
 import { Icon } from "../icon";
 import { CatalogEntityDrawerMenu } from "./catalog-entity-drawer-menu";
 import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
-import { HotbarIcon } from "../hotbar/hotbar-icon";
 import type { CatalogEntityItem } from "./catalog-entity-item";
 import { isDevelopment } from "../../../common/vars";
 import { cssNames } from "../../utils";
+import { Avatar } from "../avatar/avatar";
 
 interface Props<T extends CatalogEntity> {
   item: CatalogEntityItem<T> | null | undefined;
@@ -60,17 +60,14 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
         {showDetails && (
           <div className="flex">
             <div className={styles.entityIcon}>
-              <HotbarIcon
-                uid={item.id}
+              <Avatar
                 title={item.name}
-                source={item.source}
-                src={item.entity.spec.icon?.src}
-                material={item.entity.spec.icon?.material}
-                background={item.entity.spec.icon?.background}
-                disabled={!item?.enabled}
-                onClick={() => item.onRun()}
+                colorHash={`${item.name}-${item.source}`}
                 size={128}
+                src={item.entity.spec.icon?.src}
                 data-testid="detail-panel-hot-bar-icon"
+                background={item.entity.spec.icon?.background}
+                onClick={() => item.onRun()}
                 className={styles.avatar}
               />
               {item?.enabled && (

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

@@ -219,8 +219,7 @@ export class Catalog extends React.Component<Props> {
           src={item.entity.spec.icon?.src}
           background={item.entity.spec.icon?.background}
           className={styles.catalogAvatar}
-          width={24}
-          height={24}
+          size={24}
         >
           {item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material}/>}
         </Avatar>

src/renderer/components/avatar/avatar.module.css

@@ -28,6 +28,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  user-select: none;
 
   img {
     width: 100%;

src/renderer/components/avatar/avatar.tsx

@@ -29,8 +29,7 @@ import { cssNames, iter } from "../../utils";
 interface Props extends DOMAttributes<any> {
   title: string;
   colorHash?: string;
-  width?: number;
-  height?: number;
+  size?: number;
   src?: string;
   className?: string;
   background?: string;
@@ -73,7 +72,7 @@ function getLabelFromTitle(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, width = 32, height = 32, variant = "rounded", colorHash, children, background, imgProps, src, className, ...rest } = props;
+  const { title, variant = "rounded", size, colorHash, children, background, imgProps, src, className, ...rest } = props;
 
   const getBackgroundColor = () => {
     return background || randomColor({ seed: colorHash, luminosity: "dark" });
@@ -93,7 +92,7 @@ export function Avatar(props: Props) {
         [styles.circle]: variant == "circle",
         [styles.rounded]: variant == "rounded",
       }, className)}
-      style={{ width: `${width}px`, height: `${height}px`, backgroundColor: getBackgroundColor() }}
+      style={{ width: `${size}px`, height: `${size}px`, backgroundColor: getBackgroundColor() }}
       {...rest}
     >
       {renderContents()}

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

@@ -90,8 +90,7 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
           title={title}
           colorHash={`${title}-${source}`}
           className={cssNames(active ? "active" : "default", { interactive: !!onClick })}
-          width={size}
-          height={size}
+          size={size}
           src={src}
         >
           {material && <Icon className="materialIcon" material={material} />}

src/renderer/components/layout/sidebar-cluster.tsx

@@ -108,8 +108,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       <Avatar
         title={metadata.name}
         colorHash={`${metadata.name}-${metadata.source}`}
-        width={40}
-        height={40}
+        size={40}
         src={spec.icon?.src}
         className={styles.avatar}
       />