From e95fdb7fa629e84b9704bdff64ca877546514d39 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 9 Dec 2025 18:05:09 +0000
Subject: [PATCH] Checkpoint

---
 .../editor-client/src/js/ui/common/panels.js  |  7 +++
 .../editor-client/src/js/ui/sidebar.js        | 49 ++++++++++++++-----
 .../editor-client/src/sass/panels.scss        | 17 ++++++-
 .../editor-client/src/sass/sidebar.scss       | 34 +++++++++++--
 .../editor-client/src/sass/workspace.scss     |  4 +-
 5 files changed, 92 insertions(+), 19 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js
index 285c7c9bb..755c36e53 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js
@@ -34,6 +34,13 @@ RED.panels = (function() {
         $(children[1]).addClass("red-ui-panel");
 
         var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
+        if (options.invisibleSeparator) {
+            if (!vertical) {
+                throw new Error("invisibleSeparator option is only valid for vertical panels");
+            }
+            separator.addClass("red-ui-panels-separator-invisible");
+            $('<div class="red-ui-panels-separator-handle"></div>').appendTo(separator)
+        }
         var startPosition;
         var panelSizes = [];
         var modifiedSizes = false;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
index 95288378c..eb87a9f6a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
@@ -105,9 +105,12 @@ RED.sidebar = (function() {
 
 
         const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
+        const targetSection = Math.floor(Math.random()*2) === 0 ? 'top' : 'bottom';
+        options.targetSection = targetSection;
+
         delete options.closeable;
 
-        options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.content)
+        options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.sections[targetSection].content)
         options.wrapper.append(options.content);
         options.wrapper.hide();
 
@@ -116,7 +119,7 @@ RED.sidebar = (function() {
         }
 
         if (options.toolbar) {
-            targetSidebar.footer.append(options.toolbar);
+            targetSidebar.sections[targetSection].footer.append(options.toolbar);
             $(options.toolbar).hide();
         }
         var id = options.id;
@@ -163,7 +166,7 @@ RED.sidebar = (function() {
                 RED.sidebar.show(options.id)
             }
         })
-        if (targetSidebar.content.children().length === 1) {
+        if (targetSidebar.sections[targetSection].content.children().length === 1) {
             RED.sidebar.show(options.id)
         }
         targetSidebar.resizeSidebarTabBar()
@@ -192,18 +195,18 @@ RED.sidebar = (function() {
     function moveTab(id, srcSidebar, targetSidebar) {
         const options = knownTabs[id];
         options.target = targetSidebar.id;
-        $(options.wrapper).appendTo(targetSidebar.content);
+        $(options.wrapper).appendTo(targetSidebar.sections.top.content);
         if (options.toolbar) {
-            targetSidebar.footer.append(options.toolbar);
+            targetSidebar.sections.top.footer.append(options.toolbar);
         }
         // Reset the tooltip so its left/right direction is recalculated
         options.tabButtonTooltip.delete()
         options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
 
-        if (targetSidebar.content.children().length === 1) {
+        if (targetSidebar.sections.top.content.children().length === 1) {
             RED.sidebar.show(options.id)
         }
-        if (srcSidebar.content.children().length === 0) {
+        if (srcSidebar.sections.top.content.children().length === 0) {
             RED.menu.setSelected(srcSidebar.menuToggle, false);
         }
     }
@@ -482,8 +485,9 @@ RED.sidebar = (function() {
             const tabOptions = knownTabs[id];
             if (tabOptions) {
                 const targetSidebar = tabOptions.target === 'secondary' ? sidebars.secondary : sidebars.primary;
-                targetSidebar.content.children().hide();
-                targetSidebar.footer.children().hide();
+                const targetSection = tabOptions.targetSection || 'top'
+                targetSidebar.sections[targetSection].content.children().hide();
+                targetSidebar.sections[targetSection].footer.children().hide();
                 if (tabOptions.onchange) {
                     tabOptions.onchange.call(tabOptions);
                 }
@@ -510,12 +514,31 @@ RED.sidebar = (function() {
     function setupSidebar(sidebar) {
         sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);
         sidebar.container.width(sidebar.defaultWidth);
-        sidebar.separator = setupSidebarSeparator(sidebar);
-        sidebar.tabBar = setupSidebarTabs(sidebar)
-        sidebar.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.container);
-        sidebar.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.container);
+        sidebar.sections = {};
+        sidebar.sections.top = {}
+        sidebar.sections.top.container = $('<div class="red-ui-sidebar-section"></div>').appendTo(sidebar.container);
+        sidebar.sections.top.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.top.container);
+        sidebar.sections.top.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.top.container);
+
+        sidebar.sections.bottom = {}
+        sidebar.sections.bottom.container = $('<div class="red-ui-sidebar-section"></div>').appendTo(sidebar.container);
+        sidebar.sections.bottom.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.bottom.container);
+        sidebar.sections.bottom.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.bottom.container);
+
+        sidebar.panels = RED.panels.create({
+            container: sidebar.container,
+            invisibleSeparator: true,
+            resize: function(size1, size2) {
+                console.log('resize', size1, size2)
+            }
+        })
+        // sidebar.panels.ratio(1)
         sidebar.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
 
+        
+        sidebar.separator = setupSidebarSeparator(sidebar);
+        sidebar.tabBar = setupSidebarTabs(sidebar)
+        
     }
     function init () {
         sidebars.primary.container = $("#red-ui-sidebar");
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index c782b341b..b28b95baa 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -42,7 +42,22 @@
     cursor: ns-resize;
     background-color: var(--red-ui-primary-background);
 
-    &:before {
+    &.red-ui-panels-separator-invisible {
+        border: none;
+        height: 0px;
+        position: relative;
+        overflow: visible;
+
+        .red-ui-panels-separator-handle {
+            position: absolute;
+            // background: rgba(255,140,0,0.2);
+            top: -6px;
+            left: 0;
+            width: 100%;
+            height: 12px;
+        }
+    }
+    &:not(.red-ui-panels-separator-invisible):before {
         content: '';
         display: block;
         width: 100%;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index d8acb980b..783629809 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -24,15 +24,16 @@
     background: var(--red-ui-primary-background);
     box-sizing: border-box;
     z-index: 10;
-    @include mixins.component-border;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 .red-ui-sidebar-left {
     border-left: none;
+    border-right: none;
 }
 .red-ui-sidebar-right {
+    border-left: none;
     border-right: none;
 }
 
@@ -42,6 +43,32 @@
     flex-grow: 0;
     flex-shrink: 0;
 }
+
+.red-ui-sidebar-section {
+    margin: 4px;
+    display: flex;
+    flex-direction: column;
+    min-height: 40px;
+    background: rgba(0,0,255,0.2);
+    flex-grow: 1;
+    border-radius: 8px;
+    border: 1px solid var(--red-ui-primary-border-color);
+    // overflow: hidden;
+}
+.red-ui-sidebar-left .red-ui-sidebar-section {
+    margin-left: 0
+}
+.red-ui-sidebar-right .red-ui-sidebar-section {
+    margin-right: 0
+}
+
+.red-ui-sidebar-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+}
 .red-ui-sidebar-content {
     position: relative;
     background: var(--red-ui-secondary-background);
@@ -75,7 +102,7 @@
     flex-direction: column;
     align-items: center;
     z-index: 10;
-    border: 1px solid var(--red-ui-primary-border-color);
+    // border: 1px solid var(--red-ui-primary-border-color);
     // height: 100%;
 
     &.red-ui-sidebar-left {
@@ -109,7 +136,8 @@
     .red-ui-sidebar-tab-bar-buttons {
         display: flex;
         width: 100%;
-        background: rgba(255, 0, 0, 0.1);
+        background-color: var(--red-ui-primary-background);
+        // background: rgba(255, 0, 0, 0.1);
         padding: 6px;
         box-sizing: border-box;
         flex-direction: column;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index 9bb5da3a6..6f5b1202c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -20,8 +20,8 @@
     margin: 0;
     overflow: hidden;
     @include mixins.component-border;
-    border-left: none;
-    border-right: none;
+    border-radius: 8px;
+    margin: 4px;
     transition: left 0.1s ease-in-out;
     position: relative;
     flex-grow: 1;