layers tree I

src/components/Graph.tsx

@@ -190,12 +190,7 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
   }
 
   function getRandomWords(count: number) {
-    const wordList = [
-      "apple", "river", "mountain", "sky", "storm", "ocean", "forest", "dream",
-      "stone", "flame", "shadow", "cloud", "leaf", "wind", "fire", "earth",
-      "flower", "bird", "light", "night", "sun", "rain", "snow", "tree",
-      "wolf", "star", "sand", "wave", "heart", "path"
-    ];
+    const wordList = ['Apple', 'Sun', 'Flame', 'Earth', 'Forest', 'Dream', 'Sky', 'Shadow', 'Flower', 'Ocean', 'River', 'Path', 'Sand', 'Night', 'Star', 'Rain', 'Light', 'Tree', 'Wave', 'Storm', 'Stone', 'Snow', 'Cloud', 'Heart', 'Mountain', 'Leaf', 'Bird', 'Wind', 'Fire', 'Wolf'];
 
     return wordList
       .sort(() => Math.random() - 0.5)

src/components/NodeContextMenu.tsx

@@ -3,6 +3,7 @@ import { defaultGraph, graphContext, type EdgeModel, type NodeContext } from "./
 import { useContext } from "react";
 import { cloneDeep } from "lodash";
 import { useGraphsStore } from "../stores/GraphsStore";
+import { useGraphLayersTreeStore } from "../stores/TreeStore";
 
 const items: MenuProps['items'] = [
   {
@@ -39,6 +40,7 @@ export default function NodeContextMenu({
 
   const graphContextValue = useContext(graphContext)!;
   const graphsById = useGraphsStore((s) => s.graphsById);
+  const addTreeNode = useGraphLayersTreeStore(store => store.add);
 
   function contextMenuOpenChange(open: boolean) {
     if (!open) {
@@ -64,9 +66,10 @@ export default function NodeContextMenu({
         if (!selectedGraph) {
           selectedGraph = defaultGraph();
           graphsById.set(nodeContext.nodeId, selectedGraph);
+          const parenNodeId = graphContextValue.graphId === 'main' ? undefined : graphContextValue.graphId;
+          addTreeNode(nodeContext, parenNodeId);
         }
-
-        console.info(graphsById)
+        
         graphContextValue.setGraph(selectedGraph);
 
         break;