Merge pull request #5605 from node-red/3431-store-sidebar-widths

knolleary · web-flow · commit e1eddb238f92 · 2026-04-02T10:18:06.000+01:00
[3431] feature: Store sidebar width between editor sessions
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
@@ -57,8 +57,21 @@ RED.sidebar = (function() {
         const state = {
             primary: { top: { tabs: [] }, bottom: { tabs: [] } },
             secondary: { top: { tabs: [] }, bottom: { tabs: [] } },
-            v: sidebarLayoutVersion
+            v: sidebarLayoutVersion,
+            dimensions: {
+                // Store split as px for reliable restore before render in init() 
+                // since container height may not be available until after render
+                primary: {
+                    width: sidebars.primary.container ? sidebars.primary.container.width() : sidebars.primary.defaultWidth,
+                    splitPx: sidebars.primary.sections.top.container.outerHeight() || (sidebars.primary.container ? sidebars.primary.container.height() * sidebars.primary.defaultTopHeight : 300)
+                },
+                secondary: {
+                    width: sidebars.secondary.container ? sidebars.secondary.container.width() : sidebars.secondary.defaultWidth,
+                    splitPx: sidebars.secondary.sections.top.container.outerHeight() || (sidebars.secondary.container ? sidebars.secondary.container.height() * sidebars.secondary.defaultTopHeight : 300)
+                }
+            }
         }
+
         function getTabButtons(tabBar) {
             const result = []
             tabBar.children('button').each(function() {
@@ -585,6 +598,7 @@ RED.sidebar = (function() {
                     sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
                 }
                 RED.events.emit("sidebar:resize");
+                exportSidebarState();
             }
         });
         return separator
@@ -748,6 +762,7 @@ RED.sidebar = (function() {
                 sidebar.resizeSidebar()
             },
             stop:function(event,ui) {
+                exportSidebarState();
             }
         });
 
@@ -841,6 +856,25 @@ RED.sidebar = (function() {
         sidebars.primary.tabBars.bottom.active = lastSessionSelectedTabs?.primary?.bottom?.active
         sidebars.secondary.tabBars.top.active = lastSessionSelectedTabs?.secondary?.top?.active
         sidebars.secondary.tabBars.bottom.active = lastSessionSelectedTabs?.secondary?.bottom?.active
+
+        // Restore sidebar widths and splitPx if present
+        if (lastSessionSelectedTabs?.dimensions) {
+            if (lastSessionSelectedTabs.dimensions.primary?.width) {
+                sidebars.primary.container.width(lastSessionSelectedTabs.dimensions.primary.width)
+            }
+            if (lastSessionSelectedTabs.dimensions.secondary?.width) {
+                sidebars.secondary.container.width(lastSessionSelectedTabs.dimensions.secondary.width)
+            }
+
+            if (lastSessionSelectedTabs.dimensions.primary?.splitPx) {
+                sidebars.primary.sections.top.container.outerHeight(lastSessionSelectedTabs.dimensions.primary.splitPx);
+                sidebars.primary.sections.top.height = lastSessionSelectedTabs.dimensions.primary.splitPx;
+            }
+            if (lastSessionSelectedTabs.dimensions.secondary?.splitPx) {
+                sidebars.secondary.sections.top.container.outerHeight(lastSessionSelectedTabs.dimensions.secondary.splitPx);
+                sidebars.secondary.sections.top.height = lastSessionSelectedTabs.dimensions.secondary.splitPx;
+            }
+        }
     }
 
     return {
