Added distinction between components and flows

src/frontend/src/components/genericIconComponent/index.tsx

@@ -3,7 +3,7 @@ import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 
 const ForwardedIconComponent = forwardRef(
-  ({ name, className, iconColor }: IconComponentProps, ref) => {
+  ({ name, className, iconColor, stroke }: IconComponentProps, ref) => {
     const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
     return (
       <TargetIcon
@@ -11,6 +11,7 @@ const ForwardedIconComponent = forwardRef(
         className={className}
         style={iconColor ? { color: iconColor } : {}}
         ref={ref}
+        stroke={stroke ? stroke : "currentColor"}
       />
     );
   }

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -21,6 +21,7 @@ import {
 } from "../../../controllers/API";
 import { storeComponent } from "../../../types/store";
 import cloneFLowWithParent from "../../../utils/storeUtils";
+import { gradients } from "../../../utils/styleUtils";
 import { classNames } from "../../../utils/utils";
 
 export const MarketCardComponent = ({
@@ -141,6 +142,66 @@ export const MarketCardComponent = ({
         <CardHeader>
           <div>
             <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+              <div
+                className={classNames(
+                  "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-primary",
+                  gradients[
+                    parseInt(data.id.slice(0, 12), 16) % gradients.length
+                  ]
+                )}
+              >
+                <div
+                  className={classNames(
+                    data.is_component ? "h-7 w-7 rounded-full bg-muted" : "",
+                    "flex items-center justify-center"
+                  )}
+                >
+                  {data.is_component ? (
+                    <svg className="h-5 w-5" viewBox="0 0 24 24">
+                      <defs>
+                        <linearGradient
+                          id={data.id}
+                          x1="0%"
+                          y1="0%"
+                          x2="100%"
+                          y2="100%"
+                          className={
+                            gradients[
+                              parseInt(data.id.slice(0, 12), 16) %
+                                gradients.length
+                            ]
+                          }
+                        >
+                          <stop
+                            offset="0%"
+                            stopColor="var(--tw-gradient-from)"
+                          />
+                          <stop
+                            offset="100%"
+                            stopColor="var(--tw-gradient-to)"
+                          />
+                        </linearGradient>
+                      </defs>
+                      <IconComponent
+                        className={classNames(
+                          "h-4 w-4",
+                          gradients[
+                            parseInt(data.id.slice(0, 12), 16) %
+                              gradients.length
+                          ]
+                        )}
+                        stroke={`url(#${data.id})`}
+                        name="ToyBrick"
+                      />
+                    </svg>
+                  ) : (
+                    <IconComponent
+                      className="h-4 w-4 text-background"
+                      name="Network"
+                    />
+                  )}
+                </div>
+              </div>
               <ShadTooltip content={data.name}>
                 <div className="w-full truncate">{data.name}</div>
               </ShadTooltip>

src/frontend/src/types/components/index.ts

@@ -216,6 +216,7 @@ export type IconComponentProps = {
   className?: string;
   iconColor?: string;
   onClick?: () => void;
+  stroke?: string;
 };
 
 export type InputProps = {