solved bugs(while use backspace key and escape key) and added the groupnames correctly

src/components/outlinePanel/OutlineList .tsx

@@ -68,7 +68,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
     const [isVisible, setIsVisible] = useState(item.isVisible ?? true);
     const [isLocked, setIsLocked] = useState(item.isLocked ?? false);
     const [isEditing, setIsEditing] = useState(false);
-    const [name, setName] = useState(isGroupNode ? item.groupName : item.modelName);
+    const [name, setName] = useState(item.groupName || item.modelName);
 
     const handleDragStart = (e: React.DragEvent) => {
         e.stopPropagation();
@@ -108,10 +108,11 @@ const TreeNode: React.FC<TreeNodeProps> = ({
     };
 
     const handleDivKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-        // support Enter and Space for accessibility
+        if (e.key === "Enter") {
-        if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             toggleSelect();
+        } else if (e.key === "Escape") {
+            setIsEditing(false);
         }
     };
 
@@ -122,7 +123,6 @@ const TreeNode: React.FC<TreeNodeProps> = ({
     return (
         <div className="tree-node">
             <div
-                tabIndex={0}
                 onKeyDown={handleDivKeyDown}
                 onTouchStart={handleTouchStart}
                 className={clsx("tree-node-content", {
@@ -140,7 +140,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                 id={item.modelUuid || item.groupUuid}
                 onClick={toggleSelect}
             >
-                <div className="node-wrapper" style={{ paddingLeft: `${level * 25 + 8}px` }}>
+                <div className="node-wrapper" style={{ paddingLeft: `${level * 6 + 1}px` }}>
                     {isGroupNode && (
                         <button
                             className="expand-button"
@@ -217,7 +217,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
                 </div>
             </div>
             {isExpanded && item.children?.length ? (
-                <div className="tree-children">
+                <div className="tree-children" style={{ paddingLeft: "10px" }}>
                     {item.children.map((child) => (
                         <TreeNode
                             key={child.groupUuid || child.modelUuid}
@@ -301,8 +301,6 @@ export const OutlineList: React.FC<OutlinePanelProps> = ({
         if (!insertItemByAction(draggedItem, targetId, action, updatedHierarchy)) {
             updatedHierarchy.push(draggedItem);
         }
-
-        // Commit changes
         setGroupHierarchy(updatedHierarchy);
         setDraggingItem(null);
         hoveredDiv.style.borderTop = "none";
@@ -404,7 +402,6 @@ export const OutlineList: React.FC<OutlinePanelProps> = ({
         const hoveredDiv = document.getElementById(targetId);
         if (!hoveredDiv) return;
 
-        // Remove previous outlines before applying new one
         hoveredDiv.style.outline = "none";
         hoveredDiv.style.borderTop = "none";
         hoveredDiv.style.borderBottom = "none";
@@ -412,21 +409,13 @@ export const OutlineList: React.FC<OutlinePanelProps> = ({
         const rect = hoveredDiv.getBoundingClientRect();
         const y = (event as any).clientY - rect.top;
 
-        // Determine where the user is hovering
         if (y >= 0 && y < 7) {
-            // Top region
-            console.log("Top: ");
-
             hoveredDiv.style.borderTop = "2px solid purple";
             return "above";
         } else if (y >= 19 && y < 32) {
-            // Bottom region
-            console.log("Bottom: ");
             hoveredDiv.style.borderBottom = "2px solid purple";
             return "below";
         } else {
-            // Middle region (child)
-            console.log("Middle: ");
             hoveredDiv.style.outline = "2px solid #b188ff";
             return "child";
         }
@@ -475,8 +464,8 @@ export const OutlineList: React.FC<OutlinePanelProps> = ({
                                 onDrop={handleDrop}
                                 onDragOver={handleDragOver}
                                 draggingItem={draggingItem}
-                                selectedObject={selectedObject} // pass UUID
+                                selectedObject={selectedObject}
-                                setSelectedObject={setSelectedObject} // pass setter
+                                setSelectedObject={setSelectedObject}
                             />
                         ))}
                     </div>

src/styles/components/outlinePanel.scss

@@ -1,321 +1,3 @@
-// .outline-overlay {
-//     padding: 0 4px;
-//     font-family: "Segoe UI", sans-serif;
-//     display: flex;
-//     position: absolute;
-//     top: 0;
-//     bottom: 0;
-//     width: 100vw;
-//     pointer-events: none;
-//     .outline-card {
-//         pointer-events: all;
-//     }
-// }
-
-// .outline-header {
-//     display: flex;
-//     align-items: center;
-//     justify-content: space-between;
-//     padding: 10px 16px;
-//     border-bottom: 1px solid #2e2e3e;
-
-//     .header-title {
-//         p {
-//             margin: 0;
-//             font-weight: 600;
-//             font-size: 14px;
-//             color: #ffffff;
-//         }
-//     }
-
-//     .outline-toolbar {
-//         display: flex;
-//         gap: 8px;
-
-//         .toolbar-button {
-//             background: none;
-//             border: none;
-//             color: #aaa;
-//             cursor: pointer;
-//             width: 24px;
-//             height: 24px;
-//             border-radius: 4px;
-//             transition: background 0.3s;
-
-//             &:hover {
-//                 background-color: rgba(255, 255, 255, 0.1);
-//                 color: #a855f7;
-//             }
-
-//             svg {
-//                 width: 100%;
-//                 height: 100%;
-//             }
-//         }
-
-//         .close-button {
-//             background: none;
-//             border: none;
-//             color: #aaa;
-//             cursor: pointer;
-//             width: 24px;
-//             height: 24px;
-//             border-radius: 4px;
-//             transition: transform 0.3s ease;
-
-//             &:hover {
-//                 background-color: rgba(255, 255, 255, 0.1);
-//                 transform: rotate(-90deg);
-//                 color: #a855f7;
-//             }
-
-//             svg {
-//                 width: 100%;
-//                 height: 100%;
-//             }
-//         }
-//     }
-// }
-
-// .outline-content {
-//     max-height: 52vh;
-//     overflow-y: auto;
-//     padding: 8px 0;
-
-//     &::-webkit-scrollbar {
-//         width: 6px;
-//     }
-
-//     &::-webkit-scrollbar-thumb {
-//         background: #a855f7;
-//         border-radius: 10px;
-//     }
-// }
-// .tree-node {
-//     display: flex;
-//     flex-direction: column;
-//     width: 100%;
-//     outline: 2px solid transparent;
-//     transition: all 0.3s ease;
-
-//     .tree-node-content {
-//         display: flex;
-//         align-items: center;
-//         width: 100%;
-//         padding: 6px 10px;
-//         border-radius: 8px;
-//         background: transparent;
-//         transition: background 0.2s ease, outline 0.2s ease;
-//         box-sizing: border-box;
-//         position: relative;
-
-//         &:hover {
-//             background: rgba(255, 255, 255, 0.05);
-//         }
-
-//         &.selected {
-//             background: var(--background-color-accent, #6f42c1);
-//         }
-
-//         &.multi-selected {
-//             background: rgba(167, 139, 250, 0.2);
-//             border-left: 3px solid var(--highlight-secondary-color, #a855f7);
-//         }
-
-//         .expand-button {
-//             background: none;
-//             border: none;
-//             color: #aaa;
-//             cursor: pointer;
-//             width: 18px;
-//             height: 18px;
-//             flex-shrink: 0;
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-
-//             &:hover {
-//                 color: #a855f7;
-//             }
-//         }
-
-//         .node-wrapper {
-//             display: flex;
-//             align-items: center;
-//             flex: 1;
-//             min-width: 0;
-//             gap: 8px;
-//         }
-
-//         .node-icon {
-//             color: #a855f7;
-//             flex-shrink: 0;
-//             width: 16px;
-//             height: 16px;
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-//         }
-
-//         .rename-input {
-//             flex: 1;
-//             min-width: 0;
-//             overflow: hidden;
-//             white-space: nowrap;
-//             text-overflow: ellipsis;
-//             font-size: 14px;
-//             color: #fff;
-
-//             input.renaming {
-//                 width: 100%;
-//                 border: none;
-//                 outline: none;
-//                 border-radius: 6px;
-//                 background: rgba(255, 255, 255, 0.1);
-//                 color: #fff;
-//                 padding: 3px 6px;
-//                 font-size: 14px;
-//                 box-sizing: border-box;
-//             }
-//         }
-
-//         .node-controls {
-//             display: flex;
-//             align-items: center;
-//             gap: 4px;
-//             flex-shrink: 0;
-
-//             .control-button {
-//                 background: none;
-//                 border: none;
-//                 color: #aaa;
-//                 cursor: pointer;
-//                 border-radius: 4px;
-//                 padding: 4px;
-//                 display: flex;
-//                 align-items: center;
-//                 justify-content: center;
-
-//                 &:hover {
-//                     background: rgba(255, 255, 255, 0.1);
-//                     color: #a855f7;
-//                 }
-
-//                 svg {
-//                     width: 14px;
-//                     height: 14px;
-//                 }
-//             }
-//         }
-//     }
-
-//     .tree-children {
-//         padding-left: 16px;
-//         border-left: 1px dashed rgba(255, 255, 255, 0.1);
-//         margin-left: 6px;
-//     }
-// }
-
-// // .tree-node {
-// //     display: flex;
-// //     flex-direction: column;
-// //     outline: 2px solid transparent;
-// //     transition: background 0.3s;
-
-// //     .tree-node-content {
-// //         display: flex;
-// //         align-items: center;
-// //         padding: 8px 9px;
-// //         gap: 6px;
-// //         transition: background 0.2s ease;
-// //         position: relative;
-// //         &.selected {
-// //             background: #6f42c1;
-// //             border-radius: 45px;
-// //         }
-
-// //         &:hover {
-// //             outline: 1px solid pink;
-// //             border-radius: 80px;
-// //         }
-// //         .node-wrapper {
-// //             display: flex;
-// //             gap: 40px;
-// //         }
-
-// //         .expand-button {
-// //             background: none;
-// //             border: none;
-// //             cursor: pointer;
-// //             width: 20px;
-// //             height: 20px;
-// //             padding: 0;
-// //             color: #aaa;
-
-// //             &:hover {
-// //                 color: #a855f7;
-// //             }
-// //         }
-
-// //         .node-icon {
-// //             color: white;
-// //             width: 18px;
-// //             flex-shrink: 0;
-// //         }
-
-// //         .rename-input {
-// //             background: transparent;
-// //             border: none;
-// //             color: #fff;
-// //             font-size: 14px;
-// //             flex: 1;
-// //             outline: none;
-// //             padding: 2px 4px;
-// //             &:focus {
-// //                 border-bottom: 1px solid #a855f7;
-// //             }
-// //             .renaming {
-// //                 outline: none;
-// //                 border: none;
-// //                 border-radius: 15px;
-// //                 height: 20px;
-// //             }
-// //         }
-
-// //         .node-controls {
-// //             display: flex;
-// //             gap: 6px;
-
-// //             .control-button {
-// //                 background: none;
-// //                 border: none;
-// //                 color: #888;
-// //                 cursor: pointer;
-// //                 // padding: 4px;
-// //                 border-radius: 4px;
-
-// //                 &:hover {
-// //                     background-color: rgba(255, 255, 255, 0.1);
-// //                     color: #a855f7;
-// //                 }
-
-// //                 svg {
-// //                     width: 16px;
-// //                     height: 16px;
-// //                 }
-// //             }
-// //         }
-// //     }
-// // }
-
-// // .tree-children {
-// //     padding-left: 16px;
-// //     border-left: 1px dashed rgba(255, 255, 255, 0.05);
-// // }
-
-// Outline Component Styles
-// Professional tree/hierarchy view with drag-and-drop support
-
 .outline-overlay {
     padding: 0 4px;
     font-family: "Segoe UI", sans-serif;
@@ -434,14 +116,13 @@
 .tree-node-content {
     display: flex;
     align-items: center;
-    padding: 8px 12px;
+    padding: 3px 8px;
+    margin: 2px 2px;
     gap: 8px;
     transition: background 0.2s ease;
     position: relative;
     cursor: pointer;
     border-radius: 6px;
-    margin: 2px 8px;
-
     &.selected {
         background: #6f42c1;
         border-radius: 50px;
@@ -560,7 +241,6 @@
 }
 
 .tree-children {
-    padding-left: 16px;
     border-left: 1px dashed rgba(255, 255, 255, 0.05);
 }