Property Group Label Translation und erste TreeView fertig

buildtime/client/logical-editor/src/App.css

@@ -48,12 +48,11 @@
 .sidebar {
   display: flex;
   flex-flow: column;
-  height: 70vh;
   padding: 16px;
   color: gray;
   background: var(--code-bg);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  width: 200px;
+  width: 300px;
 }
 
 .sidebar h1 {
@@ -94,6 +93,8 @@
 .side-links {
   font-size: 12px;
   background: whitesmoke;
+  overflow: auto;
+  height: 70vh;
 }
 
 footer {

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

@@ -6,22 +6,21 @@ import { DocumentIcon, FolderIcon } from '@heroicons/react/16/solid';
 
 const PropertyTreeView = ({ node, key }) => {
     const [expanded, setExpanded] = useState(true);
-    console.log('node:', key, node.id, node.label, node.subPropertygroups);
     return (
     <li key={node.id}>
-      <span className="flex items-center gap-1.5 py-1">
+      <span className="flex items-center gap-1 py-1">
         {node.subPropertygroups && node.subPropertygroups.length > 0 && (
           <button onClick={() => setExpanded(!expanded)} className="p-1 -m-1">
             <ChevronRightIcon
               className={`size-4 text-gray-500 ${expanded ? 'rotate-90' : ''}`}
             />
-          </button>
+          </button> 
         )}
-        <FolderIcon className={`size-3 text-gray-500`} />{node.label}
+        <FolderIcon className={`size-3 text-gray-500`} />{node.labelTranslation}
       </span>
 
       {expanded && (
-        <ul>
+        <ul className="ml-1 border-l border-gray-300 pl-8">
           {node.subPropertygroups?.map((node) => (
             <PropertyTreeView node={node} key={node.id} />
           ))}

buildtime/client/logical-editor/src/pages/PropertyPage.jsx

@@ -4,7 +4,7 @@ import PropertySideBar from '../components/PropertySideBar';
 import UseFetch from '../components/tools/UseFetch';
 
 const PropertyPage = () => {
-  const { data: properties, isLoading, error } = UseFetch(`http://localhost:8088/propertygroup/1`)
+  const { data: properties, isLoading, error } = UseFetch(`http://localhost:8088/propertygroup/1/lang/1`)
 
   if (isLoading) return <p>Loading profile...</p>  
   if (error) return <p>Error: {error}</p>
@@ -12,7 +12,7 @@ const PropertyPage = () => {
   return (
     <div className="content">
       <div><PropertySideBar properties={[properties]} /></div>
-      <div className="main">{JSON.stringify(properties)}</div>
+      <div className="main"></div>
     </div>  
   );
 };