From bffd1d61b22001fcf498be9648615ee055818745 Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:58:45 +0100
Subject: [PATCH] Improve with error handling, storage cleanup and
 centralization in one object

---
 .../editor-client/src/js/ui/palette.js        | 58 ++++++++++++++-----
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
index 10654fdda..6400a746b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -35,6 +35,8 @@ RED.palette = (function() {
     var categoryContainers = {};
     var sidebarControls;
 
+    let lastState = { filter: "", collapsed: [] };
+
     function createCategory(originalCategory,rootCategory,category,ns) {
         if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) {
             createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory);
@@ -73,15 +75,16 @@ RED.palette = (function() {
                 $("#red-ui-palette-header-"+category+" i").addClass("expanded");
             },
             toggle: function() {
-                const collapse = JSON.parse(localStorage.getItem("palette-collapse") || "[]");
                 if (catDiv.hasClass("red-ui-palette-open")) {
                     categoryContainers[category].close();
-                    collapse.push(category);
+                    if (!lastState.collapsed.includes(category)) {
+                        lastState.collapsed.push(category);
+                    }
                 } else {
                     categoryContainers[category].open();
-                    collapse.splice(collapse.indexOf(category), 1);
+                    lastState.collapsed.splice(lastState.collapsed.indexOf(category), 1);
                 }
-                localStorage.setItem("palette-collapse", JSON.stringify(collapse.filter((c, i, array) => array.indexOf(c) === i)));
+                savePaletteState();
             }
         };
 
@@ -600,13 +603,12 @@ RED.palette = (function() {
 
         RED.events.on("subflows:change",refreshSubflow);
 
-
-
         $("#red-ui-palette-search input").searchBox({
             delay: 100,
             change: function() {
                 filterChange($(this).val());
-                localStorage.setItem("palette-filter", $(this).val());
+                lastState.filter = $(this).val();
+                savePaletteState();
             }
         });
 
@@ -675,14 +677,33 @@ RED.palette = (function() {
             }
         });
 
-        const collapse = JSON.parse(localStorage.getItem("palette-collapse") || "[]");
-        const callback = function () {
-            collapse.forEach((category) => categoryContainers[category]?.close());
-            $("#red-ui-palette-search input").searchBox("value", (localStorage.getItem("palette-filter") || ""));
-            RED.events.off("runtime-state", callback);
-        };
-        RED.events.on("runtime-state", callback);
+        try {
+            const stateFromStorage = JSON.parse(localStorage.getItem("palette-state") || "{}");
+
+            for (const prop in stateFromStorage) {
+                if (Object.prototype.hasOwnProperty.call(lastState, prop)) {
+                    lastState[prop] = stateFromStorage[prop];
+                }
+            }
+
+            // Remove old/unknown category from localStorage
+            lastState.collapsed = lastState.collapsed.filter((c, i, a) => a.indexOf(c) === i && categoryContainers[c]);
+
+            const callback = function () {
+                // Hide categories previously hidded
+                lastState.collapsed.forEach((category) => categoryContainers[category].close());
+                // Apply the category filter
+                $("#red-ui-palette-search input").searchBox("value", lastState.filter);
+                RED.events.off("runtime-state", callback);
+            };
+
+            savePaletteState();
+            RED.events.on("runtime-state", callback);
+        } catch (error) {
+            console.error("Unexpected error loading palette state from localStorage: ", error);
+        }
     }
+
     function togglePalette(state) {
         if (!state) {
             $("#red-ui-main-container").addClass("red-ui-palette-closed");
@@ -702,6 +723,15 @@ RED.palette = (function() {
         })
         return categories;
     }
+
+    function savePaletteState() {
+        try {
+            localStorage.setItem("palette-state", JSON.stringify(lastState));
+        } catch (error) {
+            console.error("Unexpected error saving palette state to localStorage: ", error);
+        }
+    }
+
     return {
         init: init,
         add:addNodeType,