From 1fa4aaf706989df4fe43ccd08b2fed52d9f7c8b7 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 13 Jul 2023 13:27:42 +0100
Subject: [PATCH 1/8] add catalog select

---
 .../editor-client/src/js/ui/palette-editor.js | 69 ++++++++++++++-----
 .../src/sass/palette-editor.scss              | 23 +++++--
 .../editor-client/src/sass/palette.scss       |  2 +-
 3 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 34d3ba160..e78cad71c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -16,7 +16,7 @@
 RED.palette.editor = (function() {
 
     var disabled = false;
-
+    const catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json', 'http://192.168.86.130:3002/catalogue.json']
     var editorTabs;
     var filterInput;
     var searchInput;
@@ -232,6 +232,7 @@ RED.palette.editor = (function() {
 
 
     function _refreshNodeModule(module) {
+        console.log("refresh",module);
         if (!nodeEntries.hasOwnProperty(module)) {
             nodeEntries[module] = {info:RED.nodes.registry.getModule(module)};
             var index = [module];
@@ -421,7 +422,7 @@ RED.palette.editor = (function() {
             packageList.editableList('empty');
 
             $(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading'));
-            var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json'];
+
             catalogueLoadStatus = [];
             catalogueLoadErrors = false;
             catalogueCount = catalogues.length;
@@ -431,8 +432,11 @@ RED.palette.editor = (function() {
             $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
-            catalogues.forEach(function(catalog,index) {
+            const catalogTypes = []
+            for (let index = 0; index < catalogues.length; index++) {
+                const catalog = catalogues[index];
                 $.getJSON(catalog, {_: new Date().getTime()},function(v) {
+                    catalogTypes.push(v);
                     handleCatalogResponse(null,catalog,index,v);
                     refreshNodeModuleList();
                 }).fail(function(jqxhr, textStatus, error) {
@@ -442,9 +446,19 @@ RED.palette.editor = (function() {
                     handled++;
                     if (handled === catalogueCount) {
                         searchInput.searchBox('change');
+                        console.log("adding types to typedInput", catalogTypes)
+                        const catalogSelection = $('#red-catalogue-filter-select')
+                        catalogSelection.empty()
+                        // loop through catalogTypes, and option per entry
+                        for (let index = 0; index < catalogTypes.length; index++) {
+                            const catalog = catalogTypes[index];
+                            catalogSelection.append(`<option value="${catalog.name}">${catalog.name}</option>`)
+                        }
+                        // select the 1st option
+                        catalogSelection.val(catalogSelection.find('option:first').val())
                     }
                 })
-            });
+            }
         }
     }
 
@@ -812,9 +826,9 @@ RED.palette.editor = (function() {
             content: installTab
         })
 
-        var toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
-
-        var searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
+        const toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
+        
+        const searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
         searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
             .appendTo(searchDiv)
             .searchBox({
@@ -836,14 +850,35 @@ RED.palette.editor = (function() {
                 }
             });
 
-        $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
-        var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
-        var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
-        var sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
-        var sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+        // create a div, left aligned, to contain the label "catalog" and a dropdown select
+        const catalogGroup = $('<div>',{class:""}).appendTo(toolBar);
+        // const catalogSelection = $('<input id="red-catalogue-selection" />', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup);
+        // append a regular select/options el to the catalogGroup
+        const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(catalogGroup);
+        
+
+        // add a single dummy option "Loading..." to catalogSelection until the catalogues are loaded
+        catalogSelection.append($('<option>', { value: "loading", text: "Loading Catalogue List...", disabled: true, selected: true }));
+
+        // catalogSelection.typedInput({ types: [{ value: "loading", label: "Loading Catalogue List...", hasValue: false }] });
+
+        catalogSelection.on("change", function() {
+            var v = $(this).val();
+            console.log(v);
+            if (v === "all") {
+            }
+        })
+
+        const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
+
+        $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions);
+        const sortGroup = $('<span class="button-group"></span>').appendTo(toolBarActions);
+        const sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
+        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
+        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
 
 
-        var sortOpts = [
+        const sortOpts = [
             {button: sortRelevance, func: sortModulesRelevance},
             {button: sortAZ, func: sortModulesAZ},
             {button: sortRecent, func: sortModulesRecent}
@@ -861,7 +896,7 @@ RED.palette.editor = (function() {
             });
         });
 
-        var refreshSpan = $('<span>').appendTo(toolBar);
+        var refreshSpan = $('<span>').appendTo(toolBarActions);
         var refreshButton = $('<a href="#" class="red-ui-sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
         refreshButton.on("click", function(e) {
             e.preventDefault();
@@ -871,7 +906,8 @@ RED.palette.editor = (function() {
         })
         RED.popover.tooltip(refreshButton,RED._("palette.editor.refresh"));
 
-        packageList = $('<ol>',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
+        packageList = $('<ol>').appendTo(installTab).editableList({
+            class: "scrollable",
             addButton: false,
             scrollOnAdd: false,
             addItem: function(container,i,object) {
@@ -952,9 +988,10 @@ RED.palette.editor = (function() {
                 }
             }
         });
+        
 
         if (RED.settings.get('externalModules.palette.allowUpload', true) !== false) {
-            var uploadSpan = $('<span class="button-group">').prependTo(toolBar);
+            var uploadSpan = $('<span class="button-group">').prependTo(toolBarActions);
             var uploadButton = $('<button type="button" class="red-ui-sidebar-header-button red-ui-palette-editor-upload-button"><label><i class="fa fa-upload"></i><form id="red-ui-palette-editor-upload-form" enctype="multipart/form-data"><input name="tarball" type="file" accept=".tgz"></label></button>').appendTo(uploadSpan);
 
             var uploadInput = uploadButton.find('input[type="file"]');
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index ca387782b..60d9ae0eb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -29,6 +29,13 @@
     box-sizing:border-box;
     background: var(--red-ui-secondary-background);
 
+    .red-ui-editableList.scrollable {
+        overflow-y: auto;
+        background-color: aqua;
+        // padding: 0 10px;
+        // box-sizing: border-box;
+        // height: calc(100% - 40px);
+    }
     .red-ui-editableList-container {
         border: none;
         border-radius: 0;
@@ -72,11 +79,8 @@
 
     }
     .red-ui-palette-editor-tab {
-        position:absolute;
-        top:35px;
-        left:0;
-        right:0;
-        bottom:0
+        display: flex;
+        flex-direction: column;
     }
     .red-ui-palette-editor-toolbar {
         background: var(--red-ui-primary-background);
@@ -84,6 +88,15 @@
         padding: 8px 10px;
         border-bottom: 1px solid var(--red-ui-primary-border-color);
         text-align: right;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 3px 12px;
+        .red-ui-palette-editor-toolbar-actions {
+            flex-shrink: 0;
+            flex-grow: 1;
+        }
     }
     .red-ui-palette-module-shade-status {
         color: var(--red-ui-secondary-text-color);
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
index e4071b9db..a3afc3d76 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
@@ -54,7 +54,7 @@
 }
 .red-ui-palette-search {
     position: relative;
-    overflow: hidden;
+    // overflow: hidden;
     background: var(--red-ui-form-input-background);
     text-align: center;
     height: 35px;

From 6ac2e703a654ddaa22621b85092a58eccd30f637 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 13 Jul 2023 19:48:13 +0100
Subject: [PATCH 2/8] fix layout bugs

---
 .../editor-client/src/js/ui/palette-editor.js | 38 +++++++------------
 .../src/sass/palette-editor.scss              | 23 ++++++++---
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index e78cad71c..9df2d5911 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -683,7 +683,8 @@ RED.palette.editor = (function() {
             });
 
 
-        nodeList = $('<ol>',{id:"red-ui-palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({
+        nodeList = $('<ol>',{id:"red-ui-palette-module-list"}).appendTo(modulesTab).editableList({
+            class: "scrollable",
             addButton: false,
             scrollOnAdd: false,
             sort: function(A,B) {
@@ -818,8 +819,7 @@ RED.palette.editor = (function() {
     }
 
     function createInstallTab(content) {
-        var installTab = $('<div>',{class:"red-ui-palette-editor-tab hide"}).appendTo(content);
-
+        const installTab = $('<div>',{class:"red-ui-palette-editor-tab", style: "display: none;"}).appendTo(content);
         editorTabs.addTab({
             id: 'install',
             label: RED._('palette.editor.tab-install'),
@@ -850,32 +850,19 @@ RED.palette.editor = (function() {
                 }
             });
 
-        // create a div, left aligned, to contain the label "catalog" and a dropdown select
-        const catalogGroup = $('<div>',{class:""}).appendTo(toolBar);
-        // const catalogSelection = $('<input id="red-catalogue-selection" />', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup);
-        // append a regular select/options el to the catalogGroup
-        const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(catalogGroup);
-        
-
-        // add a single dummy option "Loading..." to catalogSelection until the catalogues are loaded
-        catalogSelection.append($('<option>', { value: "loading", text: "Loading Catalogue List...", disabled: true, selected: true }));
-
-        // catalogSelection.typedInput({ types: [{ value: "loading", label: "Loading Catalogue List...", hasValue: false }] });
-
-        catalogSelection.on("change", function() {
-            var v = $(this).val();
-            console.log(v);
-            if (v === "all") {
-            }
-        })
-
+        const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(toolBar);
+        catalogSelection.addClass('red-ui-palette-editor-catalogue-filter');
+        catalogSelection.hide() // hide the select until the catalogues have been loaded
+ 
         const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
 
         $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions);
         const sortGroup = $('<span class="button-group"></span>').appendTo(toolBarActions);
         const sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
-        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
-        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle"><i class="fa fa-sort-alpha-asc"></i></a>').appendTo(sortGroup);
+        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle"><i class="fa fa-calendar"></i></a>').appendTo(sortGroup);
+        RED.popover.tooltip(sortAZ,RED._("palette.editor.sortAZ"));
+        RED.popover.tooltip(sortRecent,RED._("palette.editor.sortRecent"));
 
 
         const sortOpts = [
@@ -942,6 +929,9 @@ RED.palette.editor = (function() {
                     var metaRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
                     $('<span class="red-ui-palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
                     $('<span class="red-ui-palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
+                    if (catalogSelection.val() === 'all') {
+                        $('<span class="red-ui-palette-module-updated"><i class="fa fa-cubes"></i>' + (entry.catalog.name || entry.catalog.url) + '</span>').appendTo(metaRow);
+                    }
 
                     var duplicateType = false;
                     if (entry.types && entry.types.length > 0) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index 60d9ae0eb..947ada2e8 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-#red-ui-settings-tab-palette {
+ #red-ui-settings-tab-palette {
     height: 100%;
 }
 
@@ -28,13 +28,16 @@
     padding: 0;
     box-sizing:border-box;
     background: var(--red-ui-secondary-background);
+    display: flex;
+    flex-direction: column;
+
+    .red-ui-tabs {
+        flex-shrink: 0;
+        margin-bottom: 0;
+    }
 
     .red-ui-editableList.scrollable {
         overflow-y: auto;
-        background-color: aqua;
-        // padding: 0 10px;
-        // box-sizing: border-box;
-        // height: calc(100% - 40px);
     }
     .red-ui-editableList-container {
         border: none;
@@ -81,6 +84,7 @@
     .red-ui-palette-editor-tab {
         display: flex;
         flex-direction: column;
+        min-height: 0;
     }
     .red-ui-palette-editor-toolbar {
         background: var(--red-ui-primary-background);
@@ -97,6 +101,15 @@
             flex-shrink: 0;
             flex-grow: 1;
         }
+        .red-ui-palette-editor-catalogue-filter {
+            width: unset;
+            margin: 0;
+            flex-shrink: 1;
+            flex-grow: 1;
+            font-size: 12px;
+            height: 26px;
+            padding: 1px;
+        }
     }
     .red-ui-palette-module-shade-status {
         color: var(--red-ui-secondary-text-color);

From 368ac4ed5c52c40bd7240d885de1b3d14a253841 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 13 Jul 2023 19:48:34 +0100
Subject: [PATCH 3/8] i18n update

---
 .../@node-red/editor-client/locales/en-US/editor.json            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index aae72ab3a..5cadb805f 100644
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -586,6 +586,7 @@
         "editor": {
             "title": "Manage palette",
             "palette": "Palette",
+            "allCatalogs": "All Catalogs",
             "times": {
                 "seconds": "seconds ago",
                 "minutes": "minutes ago",

From 9008f063c3544bdd73f2afae2f0fc797acf01d79 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 13 Jul 2023 19:49:17 +0100
Subject: [PATCH 4/8] hook up filtering to catalog selection

---
 .../editor-client/src/js/ui/palette-editor.js | 124 +++++++++++++-----
 1 file changed, 92 insertions(+), 32 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 9df2d5911..df28755d0 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -16,15 +16,16 @@
 RED.palette.editor = (function() {
 
     var disabled = false;
-    const catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json', 'http://192.168.86.130:3002/catalogue.json']
+    let catalogues = []
     var editorTabs;
-    var filterInput;
-    var searchInput;
-    var nodeList;
-    var packageList;
-    var loadedList = [];
-    var filteredList = [];
-    var loadedIndex = {};
+    let filterInput;
+    let searchInput;
+    let nodeList;
+    let packageList;
+    let fullList = []
+    let loadedList = [];
+    let filteredList = [];
+    let loadedIndex = {};
 
     var typesInUse = {};
     var nodeEntries = {};
@@ -162,6 +163,18 @@ RED.palette.editor = (function() {
         }
     }
 
+    function filterByCatalog(selectedCatalog) {
+        const catalogCount = $('#red-catalogue-filter-select option').length
+        if (catalogCount <= 1 || selectedCatalog === "all") {
+            loadedList = fullList.slice();
+        } else {
+            loadedList = fullList.filter(function(m) {
+                return (m.catalog.name === selectedCatalog);
+            })
+        }
+        refreshFilteredItems();
+        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
+    }
 
     function getContrastingBorder(rgbColor){
         var parts = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)[,)]/.exec(rgbColor);
@@ -370,10 +383,10 @@ RED.palette.editor = (function() {
     var activeSort = sortModulesRelevance;
 
     function handleCatalogResponse(err,catalog,index,v) {
+        const url = catalog.url
         catalogueLoadStatus.push(err||v);
         if (!err) {
             if (v.modules) {
-                var a = false;
                 v.modules = v.modules.filter(function(m) {
                     if (RED.utils.checkModuleAllowed(m.id,m.version,installAllowList,installDenyList)) {
                         loadedIndex[m.id] = m;
@@ -390,13 +403,14 @@ RED.palette.editor = (function() {
                             m.timestamp = 0;
                         }
                         m.index = m.index.join(",").toLowerCase();
+                        m.catalog = catalog;
+                        m.catalogIndex = index;
                         return true;
                     }
                     return false;
                 })
                 loadedList = loadedList.concat(v.modules);
             }
-            searchInput.searchBox('count',loadedList.length);
         } else {
             catalogueLoadErrors = true;
         }
@@ -405,7 +419,7 @@ RED.palette.editor = (function() {
         }
         if (catalogueLoadStatus.length === catalogueCount) {
             if (catalogueLoadErrors) {
-                RED.notify(RED._('palette.editor.errors.catalogLoadFailed',{url: catalog}),"error",false,8000);
+                RED.notify(RED._('palette.editor.errors.catalogLoadFailed',{url: url}),"error",false,8000);
             }
             var delta = 250-(Date.now() - catalogueLoadStart);
             setTimeout(function() {
@@ -417,6 +431,7 @@ RED.palette.editor = (function() {
 
     function initInstallTab() {
         if (loadedList.length === 0) {
+            fullList = [];
             loadedList = [];
             loadedIndex = {};
             packageList.editableList('empty');
@@ -432,36 +447,82 @@ RED.palette.editor = (function() {
             $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
-            const catalogTypes = []
+            const catalogEntries = []
             for (let index = 0; index < catalogues.length; index++) {
-                const catalog = catalogues[index];
-                $.getJSON(catalog, {_: new Date().getTime()},function(v) {
-                    catalogTypes.push(v);
-                    handleCatalogResponse(null,catalog,index,v);
+                const url = catalogues[index];
+                $.getJSON(url, {_: new Date().getTime()},function(v) {
+                    catalogEntries.push({ url: url, name: v.name, updated_at: v.updated_at, modules_count: (v.modules || []).length })
+                    handleCatalogResponse(null,{ url: url, name: v.name},index,v);
                     refreshNodeModuleList();
                 }).fail(function(jqxhr, textStatus, error) {
-                    console.warn("Error loading catalog",catalog,":",error);
-                    handleCatalogResponse(jqxhr,catalog,index);
+                    console.warn("Error loading catalog",url,":",error);
+                    handleCatalogResponse(jqxhr,url,index);
                 }).always(function() {
                     handled++;
                     if (handled === catalogueCount) {
-                        searchInput.searchBox('change');
-                        console.log("adding types to typedInput", catalogTypes)
-                        const catalogSelection = $('#red-catalogue-filter-select')
-                        catalogSelection.empty()
-                        // loop through catalogTypes, and option per entry
-                        for (let index = 0; index < catalogTypes.length; index++) {
-                            const catalog = catalogTypes[index];
-                            catalogSelection.append(`<option value="${catalog.name}">${catalog.name}</option>`)
-                        }
-                        // select the 1st option
-                        catalogSelection.val(catalogSelection.find('option:first').val())
+                        updateCatalogFilter(catalogEntries)
                     }
                 })
             }
         }
     }
 
+    /**
+     * Refreshes the catalog filter dropdown and updates local variables
+     * @param {[{url:String, name:String, updated_at:String, modules_count:Number}]} catalogEntries
+     */
+    function updateCatalogFilter(catalogEntries, maxRetry = 3) {
+        console.log("updateCatalogFilter", catalogEntries, maxRetry)
+        // clean up existing filters
+        const catalogSelection = $('#red-catalogue-filter-select')
+        if (catalogSelection.length === 0) {
+            // sidebar not yet loaded (red-catalogue-filter-select is not in dom)
+            if (maxRetry > 0) {
+                console.log("updateCatalogFilter: sidebar not yet loaded, retrying in 100ms")
+                // try again in 100ms
+                setTimeout(() => {
+                    updateCatalogFilter(catalogEntries, maxRetry - 1)
+                }, 100);
+                return;
+            } 
+            return; // give up
+        }
+        catalogSelection.off("change") // remove any existing event handlers
+        catalogSelection.attr('disabled', 'disabled')
+        catalogSelection.empty()
+        catalogSelection.append($('<option>', { value: "loading", text: RED._('palette.editor.loading'), disabled: true, selected: true }));
+        
+        fullList = loadedList.slice()
+        catalogSelection.empty() // clear the select list
+        // if there are more than 1 catalog, add an option to select all
+        if (catalogEntries.length > 1) {
+        }
+        // loop through catalogTypes, and an option entry per catalog
+        for (let index = 0; index < catalogEntries.length; index++) {
+            const catalog = catalogEntries[index];
+            catalogSelection.append(`<option value="${catalog.name}">${catalog.name}</option>`)
+        }
+        // select the 1st option in the select list
+        catalogSelection.val(catalogSelection.find('option:first').val())
+        
+        // if there is only 1 catalog, hide the select
+        if (catalogEntries.length > 1) {
+            catalogSelection.prepend(`<option value="all">${RED._('palette.editor.allCatalogs')}</option>`)
+            catalogSelection.show()
+            catalogSelection.removeAttr('disabled') // permit the user to select a catalog
+        }
+        // refresh the searchInput counter and trigger a change
+        filterByCatalog(catalogSelection.val())
+        searchInput.searchBox('change');
+
+        // hook up the change event handler
+        catalogSelection.on("change", function() {
+            const selectedCatalog = $(this).val();
+            filterByCatalog(selectedCatalog);
+            searchInput.searchBox('change');
+        })
+    }
+
     function refreshFilteredItems() {
         packageList.editableList('empty');
         var currentFilter = searchInput.searchBox('value').trim();
@@ -476,7 +537,6 @@ RED.palette.editor = (function() {
         if (filteredList.length === 0) {
             packageList.editableList('addItem',{});
         }
-
         if (filteredList.length > 10) {
             packageList.editableList('addItem',{start:10,more:filteredList.length-10})
         }
@@ -506,6 +566,7 @@ RED.palette.editor = (function() {
     var updateDenyList = [];
 
     function init() {
+        catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json']
         if (RED.settings.get('externalModules.palette.allowInstall', true) === false) {
             return;
         }
@@ -815,7 +876,7 @@ RED.palette.editor = (function() {
                     $('<div>',{class:"red-ui-search-empty"}).text(RED._('search.empty')).appendTo(container);
                 }
             }
-        });
+        })
     }
 
     function createInstallTab(content) {
@@ -845,7 +906,6 @@ RED.palette.editor = (function() {
                         searchInput.searchBox('count',loadedList.length);
                         packageList.editableList('empty');
                         packageList.editableList('addItem',{count:loadedList.length});
-
                     }
                 }
             });

From cfb7406fb8f43ba55f8cf7d587debebd722fb29a Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Thu, 13 Jul 2023 20:28:09 +0100
Subject: [PATCH 5/8] remove console debugging

---
 .../@node-red/editor-client/src/js/ui/palette-editor.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index df28755d0..2f64c4a1f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -478,7 +478,7 @@ RED.palette.editor = (function() {
         if (catalogSelection.length === 0) {
             // sidebar not yet loaded (red-catalogue-filter-select is not in dom)
             if (maxRetry > 0) {
-                console.log("updateCatalogFilter: sidebar not yet loaded, retrying in 100ms")
+               // console.log("updateCatalogFilter: sidebar not yet loaded, retrying in 100ms")
                 // try again in 100ms
                 setTimeout(() => {
                     updateCatalogFilter(catalogEntries, maxRetry - 1)

From 50f11faf1f5d1a06515a0526b937e750aeae3f76 Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Thu, 13 Jul 2023 20:28:16 +0100
Subject: [PATCH 6/8] remove console debugging

---
 .../@node-red/editor-client/src/js/ui/palette-editor.js          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 2f64c4a1f..6f5bf5db2 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -472,7 +472,6 @@ RED.palette.editor = (function() {
      * @param {[{url:String, name:String, updated_at:String, modules_count:Number}]} catalogEntries
      */
     function updateCatalogFilter(catalogEntries, maxRetry = 3) {
-        console.log("updateCatalogFilter", catalogEntries, maxRetry)
         // clean up existing filters
         const catalogSelection = $('#red-catalogue-filter-select')
         if (catalogSelection.length === 0) {

From 0d73a4b01390d19e16f03b84236f1f4f91eb58b2 Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Thu, 13 Jul 2023 20:28:24 +0100
Subject: [PATCH 7/8] remove console debugging

---
 .../@node-red/editor-client/src/js/ui/palette-editor.js          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 6f5bf5db2..1fb9a8203 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -245,7 +245,6 @@ RED.palette.editor = (function() {
 
 
     function _refreshNodeModule(module) {
-        console.log("refresh",module);
         if (!nodeEntries.hasOwnProperty(module)) {
             nodeEntries[module] = {info:RED.nodes.registry.getModule(module)};
             var index = [module];

From 15973768e277760ec2d9f7da336b936886d8162d Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 14 Jul 2023 12:57:27 +0100
Subject: [PATCH 8/8] improve catalog visibility/ux

---
 .../editor-client/src/js/ui/palette-editor.js | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 1fb9a8203..24f9c1909 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -17,6 +17,7 @@ RED.palette.editor = (function() {
 
     var disabled = false;
     let catalogues = []
+    const loadedCatalogs = []
     var editorTabs;
     let filterInput;
     let searchInput;
@@ -163,19 +164,6 @@ RED.palette.editor = (function() {
         }
     }
 
-    function filterByCatalog(selectedCatalog) {
-        const catalogCount = $('#red-catalogue-filter-select option').length
-        if (catalogCount <= 1 || selectedCatalog === "all") {
-            loadedList = fullList.slice();
-        } else {
-            loadedList = fullList.filter(function(m) {
-                return (m.catalog.name === selectedCatalog);
-            })
-        }
-        refreshFilteredItems();
-        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
-    }
-
     function getContrastingBorder(rgbColor){
         var parts = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)[,)]/.exec(rgbColor);
         if (parts) {
@@ -446,11 +434,11 @@ RED.palette.editor = (function() {
             $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
-            const catalogEntries = []
+            loadedCatalogs.length = 0; // clear the loadedCatalogs array
             for (let index = 0; index < catalogues.length; index++) {
                 const url = catalogues[index];
                 $.getJSON(url, {_: new Date().getTime()},function(v) {
-                    catalogEntries.push({ url: url, name: v.name, updated_at: v.updated_at, modules_count: (v.modules || []).length })
+                    loadedCatalogs.push({ index: index, url: url, name: v.name, updated_at: v.updated_at, modules_count: (v.modules || []).length })
                     handleCatalogResponse(null,{ url: url, name: v.name},index,v);
                     refreshNodeModuleList();
                 }).fail(function(jqxhr, textStatus, error) {
@@ -459,7 +447,9 @@ RED.palette.editor = (function() {
                 }).always(function() {
                     handled++;
                     if (handled === catalogueCount) {
-                        updateCatalogFilter(catalogEntries)
+                        //sort loadedCatalogs by e.index ascending
+                        loadedCatalogs.sort((a, b) => a.index - b.index)
+                        updateCatalogFilter(loadedCatalogs)
                     }
                 })
             }
@@ -492,9 +482,7 @@ RED.palette.editor = (function() {
         
         fullList = loadedList.slice()
         catalogSelection.empty() // clear the select list
-        // if there are more than 1 catalog, add an option to select all
-        if (catalogEntries.length > 1) {
-        }
+
         // loop through catalogTypes, and an option entry per catalog
         for (let index = 0; index < catalogEntries.length; index++) {
             const catalog = catalogEntries[index];
@@ -506,7 +494,6 @@ RED.palette.editor = (function() {
         // if there is only 1 catalog, hide the select
         if (catalogEntries.length > 1) {
             catalogSelection.prepend(`<option value="all">${RED._('palette.editor.allCatalogs')}</option>`)
-            catalogSelection.show()
             catalogSelection.removeAttr('disabled') // permit the user to select a catalog
         }
         // refresh the searchInput counter and trigger a change
@@ -521,6 +508,18 @@ RED.palette.editor = (function() {
         })
     }
 
+    function filterByCatalog(selectedCatalog) {
+        if (loadedCatalogs.length <= 1 || selectedCatalog === "all") {
+            loadedList = fullList.slice();
+        } else {
+            loadedList = fullList.filter(function(m) {
+                return (m.catalog.name === selectedCatalog);
+            })
+        }
+        refreshFilteredItems();
+        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
+    }
+
     function refreshFilteredItems() {
         packageList.editableList('empty');
         var currentFilter = searchInput.searchBox('value').trim();
@@ -910,7 +909,6 @@ RED.palette.editor = (function() {
 
         const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(toolBar);
         catalogSelection.addClass('red-ui-palette-editor-catalogue-filter');
-        catalogSelection.hide() // hide the select until the catalogues have been loaded
  
         const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
 
@@ -987,7 +985,7 @@ RED.palette.editor = (function() {
                     var metaRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
                     $('<span class="red-ui-palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
                     $('<span class="red-ui-palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
-                    if (catalogSelection.val() === 'all') {
+                    if (loadedCatalogs.length > 1) {
                         $('<span class="red-ui-palette-module-updated"><i class="fa fa-cubes"></i>' + (entry.catalog.name || entry.catalog.url) + '</span>').appendTo(metaRow);
                     }