Component Context is more organized

Author: AttAditya

src/components/commons/Glass/index.tsx

@@ -15,7 +15,6 @@ export function Glass({
       className={`glass-card ${className}`}
       {...props}
     >
-      <div className="glass-card-background" />
       {children}
     </div>
   </>);

src/components/commons/Glass/style.css

@@ -4,18 +4,5 @@
   background: #7f7f7f88;
   border: 0.25rem solid #ffffff1a;
   border-radius: 1rem;
-  box-shadow: 0 0 2rem 1rem #0000004d;
-}
-
-.glass-card-background {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  color: inherit;
-  opacity: 0.4;
-  border-radius: calc(var(--icon-size) / 2 - 0.25rem);
-  filter: blur(0.5rem);
 }
 

src/components/engine/DecorativeNode/index.tsx

@@ -0,0 +1,16 @@
+import type { NodeModel } from "@defs/Node"
+
+import "./style.css";
+
+export function DecorativeNode({
+  node,
+}: {
+  node: NodeModel;
+}) {
+  return (<>
+    <div className="decorative-node">
+      <span className="decorative-node-name">{node.name}</span>
+    </div>
+  </>);
+}
+

src/components/engine/DecorativeNode/style.css

@@ -0,0 +1,9 @@
+.decorative-node {
+  grid-column: 1 / -1;
+  margin-top: 0.5rem;
+}
+
+.decorative-node:first-child {
+  margin-top: 0;
+}
+

src/components/engine/Node/index.tsx

@@ -9,6 +9,7 @@ import { DynamicIcon } from "@components/commons/DynamicIcon";
 import { Glass } from "@components/commons/Glass";
 
 import { NodeContext } from "@components/engine/NodeContext";
+import { DecorativeNode } from "@components/engine/DecorativeNode";
 
 import "./style.css";
 
@@ -28,6 +29,8 @@ export function Node({
     else setActive(prev => !prev);
   }, [node]);
 
+  if (node.isDecorative) return <DecorativeNode node={node} />;
+
   return (<>
     <div className="node-wrapper">
       <Glass

src/components/engine/Node/style.css

@@ -70,6 +70,7 @@
 .node:hover > .node-name {
   opacity: 1;
   translate: 0;
+  z-index: 10;
 }
 
 .node-pointer {

src/components/engine/NodeContext/index.tsx

@@ -31,7 +31,7 @@ export function NodeContext({
     >
       {
         context?.map((contextNode => <Node
-          key={contextNode.name}
+          key={contextNode.id}
           node={contextNode}
         />))
       }

src/components/engine/NodeContext/style.css

@@ -5,7 +5,7 @@
   padding: 1rem;
   cursor: default;
   display: grid;
-  grid-template-columns: repeat(5, 3.5rem);
+  grid-template-columns: repeat(5, 1fr);
   gap: 0.5rem;
   transform: translateX(-50%) translateY(-50%) scale(0);
   opacity: 0;
@@ -22,6 +22,9 @@
 .node-context.side {
   left: calc(100% + 2rem);
   top: 50%;
+  max-height: 50vh;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .node.active + .node-context.side {

src/contexts/nodeFactory.tsx

@@ -80,6 +80,7 @@ const createNodeFactoryContext = () => {
       color: "black",
       context: [
         nodeTemplate(baseId, {
+          id: `ANN:BASE:${baseId}`,
           name: "Base Node",
           code: "base",
           icon: "Atom",
@@ -91,10 +92,30 @@ const createNodeFactoryContext = () => {
           name: "Components",
           icon: "Shapes",
           color: "black",
-          context: componentLib.map(component => nodeTemplate(
-            baseId,
-            component,
-          )),
+          context: componentLib.sort(
+            (
+              a: { order?: number },
+              b: { order?: number },
+            ) => a.order! - b.order!
+          ).reduce((
+            acc: NodeModel[],
+            curr: {
+              name: string;
+              icon: string;
+              color: string;
+              nodes: NodeModel[];
+            }
+          ) => [
+            ...acc,
+            {
+              id: `ANN:CMP:SECTION:${curr.name}`,
+              name: curr.name,
+              color: curr.color,
+              icon: curr.icon,
+              isDecorative: true,
+            },
+            ...curr.nodes.map(node => nodeTemplate(baseId, node)),
+          ], [])
         },
         {
           id: "ANN:CCMP",
@@ -103,6 +124,7 @@ const createNodeFactoryContext = () => {
           color: "black",
           context: [
             {
+              id: "ANN:CCMP:ADD",
               name: "Add Custom Component",
               icon: "Plus",
               color: "black",
@@ -111,6 +133,7 @@ const createNodeFactoryContext = () => {
             ...customComponents.map(component => nodeTemplate(
               baseId,
               {
+                id: `ANN:CCMP:${component.name}`,
                 name: component.name,
                 code: component.name,
                 icon: "Component",
@@ -126,6 +149,7 @@ const createNodeFactoryContext = () => {
           color: "black",
           context: [
             {
+              id: "ANN:STATES:ADD",
               name: "Add State",
               icon: "Plus",
               color: "black",
@@ -134,6 +158,7 @@ const createNodeFactoryContext = () => {
             ...statesList.map(state => nodeTemplate(
               baseId,
               {
+                id: `ANN:STATES:${state.name}`,
                 name: state.name,
                 code: state.name,
                 icon: "Puzzle",

src/defs/Node.ts

@@ -11,6 +11,7 @@ export interface NodeModel {
   baseType?: string;
   isBase?: boolean;
   isTopLevel?: boolean;
+  isDecorative?: boolean;
 }
 
 export type NodeGroup = {