tree versuche

buildtime/client/logical-editor/src/components/PropertySideBar.jsx

@@ -11,9 +11,7 @@ const PropertySideBar = ({ properties }) => {
             <div className="side-links">
                 <ul>
                     {properties.map((node) => (
-                        <li key={node.id}>
+                        <PropertyTreeView node={node} />
-                            {node.label}
-                        </li>
                     ))}
                 </ul>
             </div><div className="spacer">...</div>

buildtime/client/logical-editor/src/components/PropertyTreeView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useState } from 'react';
 
 import { ChevronRightIcon } from '@heroicons/react/16/solid';
-import { DocumentIcon, FolderIcon } from '@heroicons/react/24/solid';
+import { DocumentIcon, FolderIcon } from '@heroicons/react/16/solid';
 
 const PropertyTreeView = ({ node, key }) => {
     const [expanded, setExpanded] = useState(true);
@@ -17,21 +17,11 @@ const PropertyTreeView = ({ node, key }) => {
             />
           </button>
         )}
-
+        <FolderIcon className={`size-3 text-gray-500`} />{node.label}
-        {node.subPropertygroups ? (
-          <FolderIcon
-            className={`size-6 text-sky-500 ${
-              node.subPropertygroups.length === 0 ? 'ml-[22px]' : ''
-            }`}
-          />
-        ) : (
-          <DocumentIcon className="ml-[22px] size-6 text-gray-900" />
-        )}
-        {node.label}
       </span>
 
       {expanded && (
-        <ul className="pl-6">
+        <ul>
           {node.subPropertygroups?.map((node) => (
             <PropertyTreeView node={node} key={node.id} />
           ))}