From b47de1df8603b330d9aff3d07254fa2d068eff70 Mon Sep 17 00:00:00 2001
From: abhiroopc84 <abhiroopc84@icloud.com>
Date: Fri, 18 Oct 2024 22:32:59 +0530
Subject: [PATCH 1/2] Add rounded corners and truncate

---
 app/src/routes/editor/LayersPanel/LayersTab.tsx     |  2 +-
 app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/src/routes/editor/LayersPanel/LayersTab.tsx b/app/src/routes/editor/LayersPanel/LayersTab.tsx
index cb9ebed3f..46f4652b6 100644
--- a/app/src/routes/editor/LayersPanel/LayersTab.tsx
+++ b/app/src/routes/editor/LayersPanel/LayersTab.tsx
@@ -114,7 +114,7 @@ const LayersTab = observer(() => {
     return (
         <div
             ref={ref}
-            className="flex h-[calc(100vh-8.25rem)] text-xs text-active flex-grow min-w-fit"
+            className="flex h-[calc(100vh-8.25rem)] text-xs text-active flex-grow w-full"
             onMouseOver={() => setTreeHovered(true)}
             onMouseLeave={() => handleMouseLeaveTree()}
         >
diff --git a/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx b/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
index 88fadbaea..1c285af27 100644
--- a/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
+++ b/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
@@ -99,9 +99,7 @@ const TreeNode = observer(
                             onClick={(e) => handleSelectNode(e)}
                             onMouseOver={(e) => handleHoverNode(e)}
                             className={twMerge(
-                                clsx(
-                                    'flex flex-row items-center h-6 cursor-pointer rounded w-fit min-w-full',
-                                    {
+                                clsx('flex flex-row items-center h-6 cursor-pointer w-full pr-1', {
                                         'bg-background-onlook': hovered,
                                         'bg-[#FA003C] dark:bg-[#FA003C]/90': selected,
                                         'text-purple-100 dark:text-purple-100':
@@ -122,7 +120,7 @@ const TreeNode = observer(
                                 ),
                             )}
                         >
-                            <span className="w-4 h-4">
+                            <span className="w-4 h-4 flex-none">
                                 {!node.isLeaf && (
                                     <div
                                         className="w-4 h-4 flex items-center justify-center"
@@ -142,7 +140,7 @@ const TreeNode = observer(
                             {instance ? (
                                 <Component1Icon
                                     className={clsx(
-                                        'w-3 h-3 ml-1 mr-2',
+                                        'w-3 h-3 ml-1 mr-2 flex-none',
                                         hovered && !selected
                                             ? 'text-purple-600 dark:text-purple-200 '
                                             : selected
@@ -152,7 +150,7 @@ const TreeNode = observer(
                                 />
                             ) : (
                                 <NodeIcon
-                                    iconClass={clsx('w-3 h-3 ml-1 mr-2', {
+                                    iconClass={clsx('w-3 h-3 ml-1 mr-2 flex-none', {
                                         'fill-white dark:fill-primary': !instance && selected,
                                     })}
                                     node={node.data}

From 1a7168dfe413e49401632e8f253f5c5b336e881d Mon Sep 17 00:00:00 2001
From: abhiroopc84 <abhiroopc84@icloud.com>
Date: Fri, 18 Oct 2024 22:33:50 +0530
Subject: [PATCH 2/2] Color parent group

---
 .../editor/LayersPanel/Tree/TreeNode.tsx      | 83 +++++++++++++++----
 1 file changed, 65 insertions(+), 18 deletions(-)

diff --git a/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx b/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
index 1c285af27..615f0705d 100644
--- a/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
+++ b/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
@@ -60,6 +60,39 @@ const TreeNode = observer(
             sendMouseEvent(e, node.data.id, MouseAction.MOUSE_DOWN);
         }
 
+        function parentSelected(node: NodeApi<LayerNode>) {
+            if (node.parent) {
+                if (node.parent.isSelected) {
+                    return node.parent;
+                }
+                return parentSelected(node.parent);
+            }
+            return null;
+        }
+
+        function allAncestorsLastAndOpen(
+            node: NodeApi<LayerNode>,
+            selectedParentNode: NodeApi<LayerNode>,
+        ) {
+            if (node.parent && node.parent !== selectedParentNode) {
+                if (node.parent.nextSibling || node.parent.isClosed) {
+                    return false;
+                }
+                return allAncestorsLastAndOpen(node.parent, selectedParentNode);
+            }
+            return true;
+        }
+
+        function parentGroupEnd(node: NodeApi<LayerNode>) {
+            if (node.nextSibling || node.isOpen) {
+                return false;
+            }
+            const selectedParent = parentSelected(node);
+            if (selectedParent && allAncestorsLastAndOpen(node, selectedParent)) {
+                return true;
+            }
+        }
+
         async function sendMouseEvent(
             e: React.MouseEvent<HTMLDivElement>,
             selector: string,
@@ -100,24 +133,38 @@ const TreeNode = observer(
                             onMouseOver={(e) => handleHoverNode(e)}
                             className={twMerge(
                                 clsx('flex flex-row items-center h-6 cursor-pointer w-full pr-1', {
-                                        'bg-background-onlook': hovered,
-                                        'bg-[#FA003C] dark:bg-[#FA003C]/90': selected,
-                                        'text-purple-100 dark:text-purple-100':
-                                            instance && selected,
-                                        'text-purple-500 dark:text-purple-300':
-                                            instance && !selected,
-                                        'text-purple-800 dark:text-purple-200':
-                                            instance && !selected && hovered,
-                                        'bg-purple-700/70 dark:bg-purple-500/50':
-                                            instance && selected,
-                                        'bg-purple-400/30 dark:bg-purple-900/60':
-                                            instance && !selected && hovered,
-                                        'text-white dark:text-primary': !instance && selected,
-                                        'text-hover': !instance && !selected && hovered,
-                                        'text-foreground-onlook':
-                                            !instance && !selected && !hovered,
-                                    },
-                                ),
+                                    rounded:
+                                        (hovered && !parentSelected(node) && !selected) ||
+                                        (selected && node.isLeaf) ||
+                                        (selected && node.isClosed),
+                                    'rounded-t': selected && node.isInternal,
+                                    'rounded-b': parentSelected(node) && parentGroupEnd(node),
+                                    'rounded-none': parentSelected(node) && node.nextSibling,
+                                    'bg-background-onlook': hovered,
+                                    'bg-[#FA003C] dark:bg-[#FA003C]/90': selected,
+                                    'bg-[#FA003C]/10 dark:bg-[#FA003C]/10': parentSelected(node),
+                                    'bg-[#FA003C]/20 dark:bg-[#FA003C]/20':
+                                        hovered && parentSelected(node),
+                                    'text-purple-100 dark:text-purple-100': instance && selected,
+                                    'text-purple-500 dark:text-purple-300': instance && !selected,
+                                    'text-purple-800 dark:text-purple-200':
+                                        instance && !selected && hovered,
+                                    'bg-purple-700/70 dark:bg-purple-500/50': instance && selected,
+                                    'bg-purple-400/30 dark:bg-purple-900/60':
+                                        instance && !selected && hovered && !parentSelected(node),
+                                    'bg-purple-300/30 dark:bg-purple-900/30':
+                                        editorEngine.ast.getInstance(
+                                            parentSelected(node)?.data.id || '',
+                                        ),
+                                    'bg-purple-300/50 dark:bg-purple-900/50':
+                                        hovered &&
+                                        editorEngine.ast.getInstance(
+                                            parentSelected(node)?.data.id || '',
+                                        ),
+                                    'text-white dark:text-primary': !instance && selected,
+                                    'text-hover': !instance && !selected && hovered,
+                                    'text-foreground-onlook': !instance && !selected && !hovered,
+                                }),
                             )}
                         >
                             <span className="w-4 h-4 flex-none">