frontend

frontend/src/sidebar/Sidebar.jsx

@@ -29,12 +29,12 @@ const FolderNode = ({
 }) => {
   const isRoot = node.id === 'root';
   const hasChildren = Boolean(node.hasChildren);
-  const canToggle = !isRoot && (hasChildren || !node.loaded);
+  const canToggle = hasChildren || !node.loaded;
-  const showChevron = !isRoot && (hasChildren || !node.loaded);
+  const showChevron = canToggle;
   const icon = showChevron ? <ChevronIcon className="toggle-icon" /> : null;
   const canDrag = !isRoot;
   const isDragging = draggingFolderId === node.id;
-  const isExpanded = isRoot ? true : Boolean(node.expanded);
+  const isExpanded = Boolean(node.expanded);
   const rowClasses = ['folder-row'];
   if (isSelected) {
     rowClasses.push('active');
@@ -66,14 +66,12 @@ const FolderNode = ({
           }
         }}
       >
-        {!isRoot && (
+        <span
-          <span
+          className={`toggle${showChevron ? '' : ' invisible'}${isExpanded ? ' expanded' : ''}`}
-            className={`toggle${showChevron ? '' : ' invisible'}${isExpanded ? ' expanded' : ''}`}
+          onClick={handleToggleClick}
-            onClick={handleToggleClick}
+        >
-          >
+          {icon}
-            {icon}
+        </span>
-          </span>
-        )}
         <span className="name">
           <FolderIcon className="folder-icon-image" size={16} />
           {node.name}

frontend/src/styles.css

@@ -1095,9 +1095,7 @@ button.danger:hover:not([disabled]) {
   padding: 0;
 }
 
-.folder-children.folder-children--level1 {
+
-  margin-left: 0;
-}
 
 .sidebar-section {
   margin-top: 1rem;