fix(GenericNode): change icon name from "Ungroup" to "group_components" to match the corresponding icon component

fix(GradientSparkles): add new icon component "GradientUngroup" to render the "Ungroup" icon with gradient stroke
fix(ComponentsComponent): add TODO comment to create a placeholder for when there are no components created yet
fix(styleUtils): import and use the new "GradientUngroup" icon component for the "group_components" icon in nodeIconsLucide

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -177,7 +177,7 @@ export default function GenericNode({
               }
             >
               <IconComponent
-                name={data.node?.flow ? "Ungroup" : name}
+                name={data.node?.flow ? "group_components" : name}
                 className={
                   "generic-node-icon " +
                   (!showNode ? "absolute inset-x-6 h-12 w-12" : "")
@@ -213,13 +213,13 @@ export default function GenericNode({
                           takeSnapshot();
                         }}
                       >
-                        <div className="generic-node-tooltip-div pr-3 text-primary">
+                        <div className="generic-node-tooltip-div pr-2 text-primary">
                           {data.node?.display_name}
                         </div>
                         {data.node?.flow && (
                           <IconComponent
                             name="Pencil"
-                            className="h-5 w-5 text-ring"
+                            className="h-4 w-4 text-ring"
                           />
                         )}
                       </div>

src/frontend/src/icons/GradientSparkles/index.tsx

@@ -60,3 +60,19 @@ export const GradientGroup = (props) => {
     </>
   );
 };
+
+export const GradientUngroup = (props) => {
+  return (
+    <>
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop className="gradient-start" offset="0%" />
+            <stop className="gradient-end" offset="100%" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <ForwardedIconComponent name="Ungroup" stroke="url(#grad4)" {...props} />
+    </>
+  );
+};

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -105,7 +105,7 @@ export default function ComponentsComponent({
         <div className="flex w-full flex-col gap-4">
           {!isLoading && data.length === 0 ? (
             <div className="w-full text-center">
-              You haven't created any {name}s yet.
+              {/* TODO: create placeholder */}
             </div>
           ) : (
             <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">

src/frontend/src/utils/styleUtils.ts

@@ -113,7 +113,11 @@ import { EvernoteIcon } from "../icons/Evernote";
 import { FBIcon } from "../icons/FacebookMessenger";
 import { GitBookIcon } from "../icons/GitBook";
 import { GoogleIcon } from "../icons/Google";
-import { GradientInfinity, GradientSave } from "../icons/GradientSparkles";
+import {
+  GradientInfinity,
+  GradientSave,
+  GradientUngroup,
+} from "../icons/GradientSparkles";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
 import { MetaIcon } from "../icons/Meta";
@@ -276,6 +280,7 @@ export const nodeIconsLucide: iconsType = {
   WikipediaQueryRun: SvgWikipedia,
   WolframAlphaQueryRun: SvgWolfram,
   custom_components: GradientInfinity,
+  group_components: GradientUngroup,
   custom: Edit,
   Trash2,
   Boxes,