From d0473bcfa6fd43e1cfd01adcb9716908941654a0 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:18:27 +0200
Subject: [PATCH 01/23] extend ui_config

---
 .../client/source/resource/osparc/ui_config.json  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/services/static-webserver/client/source/resource/osparc/ui_config.json b/services/static-webserver/client/source/resource/osparc/ui_config.json
index 655adf60f86..aec41e2187f 100644
--- a/services/static-webserver/client/source/resource/osparc/ui_config.json
+++ b/services/static-webserver/client/source/resource/osparc/ui_config.json
@@ -120,6 +120,21 @@
         "newStudyLabel": "New Pipeline",
         "idToWidget": "emptyStudyBtn"
       }]
+    },
+    "groupedApps": {
+      "categories": [{
+        "id": "featured",
+        "title": "Featured",
+        "color": "product"
+      }],
+      "apps": [
+        "simcore/services/dynamic/s4l-ui",
+        "simcore/services/dynamic/s4l-jupyter",
+        "simcore/services/dynamic/s4l-ui-framework",
+        "simcore/services/dynamic/iseg-web",
+        "simcore/services/comp/s4l-python-runner",
+        "simcore/services/comp/s4l-python-runner-gpu"
+      ]
     }
   },
   "s4lacad": {

From 13e7284a2319771dc14caabdd61e2942d1c0458f Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:25:53 +0200
Subject: [PATCH 02/23] schema

---
 .../source/resource/osparc/ui_config.json     | 29 +++++++++++------
 .../source/resource/schemas/product-ui.json   | 31 +++++++++++++++++++
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/services/static-webserver/client/source/resource/osparc/ui_config.json b/services/static-webserver/client/source/resource/osparc/ui_config.json
index aec41e2187f..f29354e8f96 100644
--- a/services/static-webserver/client/source/resource/osparc/ui_config.json
+++ b/services/static-webserver/client/source/resource/osparc/ui_config.json
@@ -121,20 +121,31 @@
         "idToWidget": "emptyStudyBtn"
       }]
     },
-    "groupedApps": {
+    "groupedServices": {
       "categories": [{
         "id": "featured",
         "title": "Featured",
         "color": "product"
       }],
-      "apps": [
-        "simcore/services/dynamic/s4l-ui",
-        "simcore/services/dynamic/s4l-jupyter",
-        "simcore/services/dynamic/s4l-ui-framework",
-        "simcore/services/dynamic/iseg-web",
-        "simcore/services/comp/s4l-python-runner",
-        "simcore/services/comp/s4l-python-runner-gpu"
-      ]
+      "services": [{
+        "serviceKey": "simcore/services/dynamic/s4l-ui",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-jupyter",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/iseg-web",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-ui-framework",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner-gpu",
+        "category": "featured"
+      }]
     }
   },
   "s4lacad": {
diff --git a/services/static-webserver/client/source/resource/schemas/product-ui.json b/services/static-webserver/client/source/resource/schemas/product-ui.json
index a1454b8e6dd..8fe7d31c54c 100644
--- a/services/static-webserver/client/source/resource/schemas/product-ui.json
+++ b/services/static-webserver/client/source/resource/schemas/product-ui.json
@@ -7,6 +7,9 @@
     },
     "newStudies": {
       "$ref": "#/definitions/buttonConfig"
+    },
+    "groupedServices": {
+      "$ref": "#/definitions/groupedServicesConfig"
     }
   },
   "additionalProperties": false,
@@ -92,6 +95,34 @@
         }
       },
       "additionalProperties": false
+    },
+    "groupedServicesConfig": {
+      "type": "object",
+      "properties": {
+        "categories": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": { "type": "string" },
+              "title": { "type": "string" },
+              "description": { "type": "string" }
+            },
+            "required": ["id", "title"]
+          }
+        },
+        "services": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "serviceKey": { "type": "string" },
+              "category": { "type": "string" }
+            },
+            "required": ["serviceKey", "category"]
+          }
+        }
+      }
     }
   }
 }

From 4f21fd503bef86026dd43835685d5c553edb4328 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:29:09 +0200
Subject: [PATCH 03/23] fetch hardcoded list

---
 .../client/source/class/osparc/dashboard/AppBrowser.js       | 5 +++++
 .../client/source/class/osparc/store/Products.js             | 4 ++++
 .../client/source/resource/osparc/ui_config.json             | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
index de4f2614836..8d1cf9e7306 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
@@ -30,6 +30,11 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
     this.base(arguments);
 
     this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;
+
+    const groupedServicesConfig = osparc.store.Products.getInstance().getGroupedServicesUiConfig();
+    if (groupedServicesConfig) {
+      console.log("groupedServices", groupedServicesConfig);
+    }
   },
 
   members: {
diff --git a/services/static-webserver/client/source/class/osparc/store/Products.js b/services/static-webserver/client/source/class/osparc/store/Products.js
index 38ef8ad2e6f..c3cde31f2fa 100644
--- a/services/static-webserver/client/source/class/osparc/store/Products.js
+++ b/services/static-webserver/client/source/class/osparc/store/Products.js
@@ -92,5 +92,9 @@ qx.Class.define("osparc.store.Products", {
     getNewStudiesUiConfig: function() {
       return this.__uiConfig["newStudies"];
     },
+
+    getGroupedServicesUiConfig: function() {
+      return this.__uiConfig["groupedServices"];
+    },
   }
 });
diff --git a/services/static-webserver/client/source/resource/osparc/ui_config.json b/services/static-webserver/client/source/resource/osparc/ui_config.json
index f29354e8f96..4b4dba52744 100644
--- a/services/static-webserver/client/source/resource/osparc/ui_config.json
+++ b/services/static-webserver/client/source/resource/osparc/ui_config.json
@@ -125,7 +125,7 @@
       "categories": [{
         "id": "featured",
         "title": "Featured",
-        "color": "product"
+        "color": "product-color"
       }],
       "services": [{
         "serviceKey": "simcore/services/dynamic/s4l-ui",

From 7368f65112bb241a2597e0b625ff90a32ede77bc Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:31:22 +0200
Subject: [PATCH 04/23] remove groupBy from app browser

---
 .../client/source/class/osparc/dashboard/AppBrowser.js           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
index 8d1cf9e7306..b5b8e9ac8cb 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
@@ -149,7 +149,6 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
         flex: 1
       });
       this.__addSortingButtons();
-      this._addGroupByButton();
       this._addViewModeButton();
 
       this._addResourceFilter();

From 20e3047245cf2ca862f10170d1f1c0824ffdaf23 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:44:22 +0200
Subject: [PATCH 05/23] helper

---
 .../client/source/class/osparc/product/Utils.js               | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/services/static-webserver/client/source/class/osparc/product/Utils.js b/services/static-webserver/client/source/class/osparc/product/Utils.js
index c62579e2374..d636a3258f9 100644
--- a/services/static-webserver/client/source/class/osparc/product/Utils.js
+++ b/services/static-webserver/client/source/class/osparc/product/Utils.js
@@ -380,5 +380,9 @@ qx.Class.define("osparc.product.Utils", {
     hasNewPlusButton: function() {
       return Boolean(osparc.store.Products.getInstance().getPlusButtonUiConfig());
     },
+
+    groupServices: function() {
+      return Boolean(osparc.store.Products.getInstance().getGroupedServicesUiConfig());
+    },
   }
 });

From 6e0dcbf808eb27b268dee679a9df78faa33d55de Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:45:02 +0200
Subject: [PATCH 06/23] replace button by default value

---
 .../class/osparc/dashboard/AppBrowser.js      |  3 ++
 .../dashboard/ResourceContainerManager.js     | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
index b5b8e9ac8cb..dcc905f9033 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
@@ -149,6 +149,9 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
         flex: 1
       });
       this.__addSortingButtons();
+      if (osparc.product.Utils.groupServices()) {
+        this._resourcesContainer.__groupByChanged("groupedServices");
+      }
       this._addViewModeButton();
 
       this._addResourceFilter();
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 9398d8eba77..714c21b6475 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -525,12 +525,42 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       }
     },
 
+    __groupByGroupedServices: function(cards, resourceData) {
+      const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
+      if (tags.length === 0) {
+        let noGroupContainer = this.__getGroupContainer("no-group");
+        const card = this.__createCard(resourceData);
+        this.__addCardToContainer(card, noGroupContainer);
+        this.self().sortListByPriority(noGroupContainer.getContentContainer());
+        cards.push(card);
+      } else {
+        tags.forEach(tag => {
+          let groupContainer = this.__getGroupContainer(tag.getTagId());
+          if (groupContainer === null) {
+            groupContainer = this.__createGroupContainer(tag.getTagId(), tag.getName(), tag.getColor());
+            tag.bind("name", groupContainer, "headerLabel");
+            tag.bind("color", groupContainer, "headerColor");
+            groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
+            this.__groupedContainers.add(groupContainer);
+            this.__groupedContainers.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));
+            this.__moveNoGroupToLast();
+          }
+          const card = this.__createCard(resourceData);
+          this.__addCardToContainer(card, groupContainer);
+          this.self().sortListByPriority(groupContainer.getContentContainer());
+          cards.push(card);
+        });
+      }
+    },
+
     __resourceToCards: function(resourceData) {
       const cardsCreated = [];
       if (this.getGroupBy() === "tags") {
         this.__groupByTags(cardsCreated, resourceData);
       } else if (this.getGroupBy() === "shared") {
         this.__groupByShareWith(cardsCreated, resourceData);
+      } else if (this.getGroupBy() === "groupedServices") {
+        this.__groupByGroupedServices(cardsCreated, resourceData);
       } else {
         const card = this.__createCard(resourceData);
         this.__addCardToContainer(card, this.__nonGroupedContainer);

From 523bf3ae957d145ab96f9fdf23ee1e525c503d94 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:46:14 +0200
Subject: [PATCH 07/23] fix

---
 .../client/source/class/osparc/dashboard/AppBrowser.js          | 2 +-
 .../source/class/osparc/dashboard/ResourceContainerManager.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
index dcc905f9033..c8e64140092 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
@@ -150,7 +150,7 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
       });
       this.__addSortingButtons();
       if (osparc.product.Utils.groupServices()) {
-        this._resourcesContainer.__groupByChanged("groupedServices");
+        this._resourcesContainer.setGroupBy("groupedServices");
       }
       this._addViewModeButton();
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 714c21b6475..90a0789416a 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -58,7 +58,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     groupBy: {
-      check: [null, "tags", "shared"],
+      check: [null, "tags", "shared", "groupedServices"],
       init: null,
       nullable: true
     }

From 5b68c143d243322a7d793a5d185ac7fc221bcf27 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 09:49:08 +0200
Subject: [PATCH 08/23] make it protected

---
 .../client/source/class/osparc/dashboard/AppBrowser.js    | 7 +------
 .../source/class/osparc/dashboard/ResourceBrowserBase.js  | 8 ++++----
 .../class/osparc/dashboard/ResourceContainerManager.js    | 5 +++++
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
index c8e64140092..a25495f0d75 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
@@ -30,11 +30,6 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
     this.base(arguments);
 
     this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;
-
-    const groupedServicesConfig = osparc.store.Products.getInstance().getGroupedServicesUiConfig();
-    if (groupedServicesConfig) {
-      console.log("groupedServices", groupedServicesConfig);
-    }
   },
 
   members: {
@@ -150,7 +145,7 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
       });
       this.__addSortingButtons();
       if (osparc.product.Utils.groupServices()) {
-        this._resourcesContainer.setGroupBy("groupedServices");
+        this._groupByChanged("groupedServices");
       }
       this._addViewModeButton();
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
index 6dbca0245bf..27420228013 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -324,7 +324,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       this._addToLayout(resourcesContainer);
     },
 
-    __groupByChanged: function(groupBy) {
+    _groupByChanged: function(groupBy) {
       // if cards are grouped they need to be in grid mode
       this._resourcesContainer.setMode("grid");
       this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
@@ -356,14 +356,14 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
       const dontGroup = new qx.ui.menu.RadioButton(this.tr("None"));
       osparc.utils.Utils.setIdToWidget(dontGroup, "groupByNone");
-      dontGroup.addListener("execute", () => this.__groupByChanged(null));
+      dontGroup.addListener("execute", () => this._groupByChanged(null));
 
       groupByMenu.add(dontGroup);
       groupOptions.add(dontGroup);
 
       if (this._resourceType === "template") {
         const tagByGroup = new qx.ui.menu.RadioButton(this.tr("Tags"));
-        tagByGroup.addListener("execute", () => this.__groupByChanged("tags"));
+        tagByGroup.addListener("execute", () => this._groupByChanged("tags"));
         groupByMenu.add(tagByGroup);
         groupOptions.add(tagByGroup);
         if (
@@ -376,7 +376,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       }
 
       const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));
-      groupByShared.addListener("execute", () => this.__groupByChanged("shared"));
+      groupByShared.addListener("execute", () => this._groupByChanged("shared"));
       groupByMenu.add(groupByShared);
       groupOptions.add(groupByShared);
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 90a0789416a..e6fa14e8ca7 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -526,6 +526,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __groupByGroupedServices: function(cards, resourceData) {
+      const groupedServicesConfig = osparc.store.Products.getInstance().getGroupedServicesUiConfig();
+      if (groupedServicesConfig) {
+        console.log("groupedServices", groupedServicesConfig);
+      }
+
       const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
       if (tags.length === 0) {
         let noGroupContainer = this.__getGroupContainer("no-group");

From 8f0d7b05003a499c9aad36868fe187112c1224ef Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:06:45 +0200
Subject: [PATCH 09/23] logic in place

---
 .../dashboard/ResourceContainerManager.js     | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index e6fa14e8ca7..4a9c087ce22 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -527,35 +527,43 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     __groupByGroupedServices: function(cards, resourceData) {
       const groupedServicesConfig = osparc.store.Products.getInstance().getGroupedServicesUiConfig();
-      if (groupedServicesConfig) {
-        console.log("groupedServices", groupedServicesConfig);
+      if (groupedServicesConfig == null) {
+        return;
       }
-
-      const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];
-      if (tags.length === 0) {
-        let noGroupContainer = this.__getGroupContainer("no-group");
-        const card = this.__createCard(resourceData);
-        this.__addCardToContainer(card, noGroupContainer);
-        this.self().sortListByPriority(noGroupContainer.getContentContainer());
-        cards.push(card);
-      } else {
-        tags.forEach(tag => {
-          let groupContainer = this.__getGroupContainer(tag.getTagId());
-          if (groupContainer === null) {
-            groupContainer = this.__createGroupContainer(tag.getTagId(), tag.getName(), tag.getColor());
-            tag.bind("name", groupContainer, "headerLabel");
-            tag.bind("color", groupContainer, "headerColor");
-            groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
-            this.__groupedContainers.add(groupContainer);
-            this.__groupedContainers.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));
-            this.__moveNoGroupToLast();
-          }
-          const card = this.__createCard(resourceData);
-          this.__addCardToContainer(card, groupContainer);
-          this.self().sortListByPriority(groupContainer.getContentContainer());
-          cards.push(card);
-        });
+      console.log("groupedServices", groupedServicesConfig, resourceData);
+
+      // create containers
+      const containers = [];
+      // create group containers for each category
+      groupedServicesConfig["categories"].forEach(category => {
+        let groupContainer = this.__getGroupContainer(category["id"]);
+        if (groupContainer === null) {
+          groupContainer = this.__createGroupContainer(category["id"], category["title"], category["color"]);
+        }
+        containers.push(groupContainer);
+      });
+      // create the no-group (Misc) container
+      let noGroupContainer = this.__getGroupContainer("misc");
+      if (noGroupContainer === null) {
+        noGroupContainer = this.__createGroupContainer("misc", "Misc", "text");
+      }
+      containers.push(noGroupContainer);
+
+      // create card and add it to the right container
+      let container = null;
+      const card = this.__createCard(resourceData);
+      const serviceKey = resourceData["key"];
+      if (serviceKey) {
+        const groupInfo = groupedServicesConfig["services"].find(serviceInfo => serviceInfo["serviceKey"] === serviceKey);
+        if (groupInfo) {
+          container = containers.find(container => container.getGroupId() === groupInfo["categoryId"]);
+        }
+      }
+      if (container === null) {
+        container = noGroupContainer;
       }
+      this.__addCardToContainer(card, container);
+      cards.push(card);
     },
 
     __resourceToCards: function(resourceData) {

From 6bf0798f5ec75b5313ff811d45ca995a00ddbd29 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:26:22 +0200
Subject: [PATCH 10/23] more progress

---
 .../dashboard/ResourceContainerManager.js     | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 4a9c087ce22..bb3eaef032e 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -309,8 +309,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
           case "shared":
             groupTitle = "Not Shared";
             break;
+          case "groupedServices":
+            groupTitle = "Misc";
+            break;
         }
-        const noGroupContainer = this.__createGroupContainer("no-group", groupTitle, "transparent");
+        const noGroupContainer = this.__createGroupContainer("no-group", groupTitle, "text");
         this.__groupedContainers.add(noGroupContainer);
         this._add(this.__groupedContainers);
       } else {
@@ -530,40 +533,33 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       if (groupedServicesConfig == null) {
         return;
       }
-      console.log("groupedServices", groupedServicesConfig, resourceData);
 
-      // create containers
-      const containers = [];
       // create group containers for each category
       groupedServicesConfig["categories"].forEach(category => {
-        let groupContainer = this.__getGroupContainer(category["id"]);
-        if (groupContainer === null) {
-          groupContainer = this.__createGroupContainer(category["id"], category["title"], category["color"]);
+        if (this.__getGroupContainer(category["id"]) === null) {
+          this.__createGroupContainer(category["id"], category["title"], category["color"]);
         }
-        containers.push(groupContainer);
       });
-      // create the no-group (Misc) container
-      let noGroupContainer = this.__getGroupContainer("misc");
-      if (noGroupContainer === null) {
-        noGroupContainer = this.__createGroupContainer("misc", "Misc", "text");
-      }
-      containers.push(noGroupContainer);
 
-      // create card and add it to the right container
+      // get the right container
       let container = null;
-      const card = this.__createCard(resourceData);
       const serviceKey = resourceData["key"];
       if (serviceKey) {
         const groupInfo = groupedServicesConfig["services"].find(serviceInfo => serviceInfo["serviceKey"] === serviceKey);
         if (groupInfo) {
-          container = containers.find(container => container.getGroupId() === groupInfo["categoryId"]);
+          container = this.__getGroupContainer(groupInfo["category"]);
         }
       }
       if (container === null) {
-        container = noGroupContainer;
+        container = this.__getGroupContainer("no-group");;
       }
+
+      // create the card and add it to the container
+      const card = this.__createCard(resourceData);
       this.__addCardToContainer(card, container);
       cards.push(card);
+
+      this.__moveNoGroupToLast();
     },
 
     __resourceToCards: function(resourceData) {

From ede2ca248d88706f8961977add2728160dc43398 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:35:42 +0200
Subject: [PATCH 11/23] fix

---
 .../class/osparc/dashboard/ResourceContainerManager.js       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index bb3eaef032e..10f08a2dea2 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -537,7 +537,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       // create group containers for each category
       groupedServicesConfig["categories"].forEach(category => {
         if (this.__getGroupContainer(category["id"]) === null) {
-          this.__createGroupContainer(category["id"], category["title"], category["color"]);
+          const groupContainer = this.__createGroupContainer(category["id"], category["title"], category["color"]);
+          this.__groupedContainers.add(groupContainer);
         }
       });
 
@@ -551,7 +552,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         }
       }
       if (container === null) {
-        container = this.__getGroupContainer("no-group");;
+        container = this.__getGroupContainer("no-group");
       }
 
       // create the card and add it to the container

From 13451efddcc187a8c359a27461bb7943be09da69 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:41:29 +0200
Subject: [PATCH 12/23] working

---
 .../source/class/osparc/dashboard/AppBrowser.js  |  4 +---
 .../osparc/dashboard/ResourceBrowserBase.js      | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
index a25495f0d75..de4f2614836 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js
@@ -144,9 +144,7 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
         flex: 1
       });
       this.__addSortingButtons();
-      if (osparc.product.Utils.groupServices()) {
-        this._groupByChanged("groupedServices");
-      }
+      this._addGroupByButton();
       this._addViewModeButton();
 
       this._addResourceFilter();
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
index 27420228013..ede00ce16e3 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -362,17 +362,23 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       groupOptions.add(dontGroup);
 
       if (this._resourceType === "template") {
-        const tagByGroup = new qx.ui.menu.RadioButton(this.tr("Tags"));
-        tagByGroup.addListener("execute", () => this._groupByChanged("tags"));
-        groupByMenu.add(tagByGroup);
-        groupOptions.add(tagByGroup);
+        const groupByTag = new qx.ui.menu.RadioButton(this.tr("Tags"));
+        groupByTag.addListener("execute", () => this._groupByChanged("tags"));
+        groupByMenu.add(groupByTag);
+        groupOptions.add(groupByTag);
         if (
           osparc.product.Utils.isProduct("s4l") ||
           osparc.product.Utils.isProduct("s4lacad") ||
           osparc.product.Utils.isProduct("s4llite")
         ) {
-          tagByGroup.execute();
+          groupByTag.execute();
         }
+      } else if (this._resourceType === "service" && osparc.product.Utils.groupServices()) {
+        const groupByFeatured = new qx.ui.menu.RadioButton(this.tr("Featured"));
+        groupByFeatured.addListener("execute", () => this._groupByChanged("groupedServices"));
+        groupByMenu.add(groupByFeatured);
+        groupOptions.add(groupByFeatured);
+        groupByFeatured.execute();
       }
 
       const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));

From eae72f22b200a5bfb6e6d1a9959fa909930db2b6 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:43:53 +0200
Subject: [PATCH 13/23] and hide the button

---
 .../client/source/class/osparc/dashboard/ResourceBrowserBase.js  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
index ede00ce16e3..8c7fd59acd3 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -379,6 +379,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         groupByMenu.add(groupByFeatured);
         groupOptions.add(groupByFeatured);
         groupByFeatured.execute();
+        groupByButton.exclude();
       }
 
       const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));

From e939b45d0a6da84dada254c837ac9aadffa1ebf4 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:47:45 +0200
Subject: [PATCH 14/23] aesthetics

---
 .../class/osparc/dashboard/GroupedCardContainer.js     | 10 +++++++---
 .../class/osparc/dashboard/ResourceBrowserBase.js      |  2 +-
 .../class/osparc/dashboard/ResourceContainerManager.js |  4 ++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
index 2223517302c..52b8e945d75 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
@@ -23,7 +23,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
 
     this._setLayout(new qx.ui.layout.VBox());
 
-    const showAllButton = this.__showAllButton = new qx.ui.form.Button().set({
+    const showAllButton = this.__expandButton = new qx.ui.form.Button().set({
       margin: 10,
       marginBottom: 5
     });
@@ -70,7 +70,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
   },
 
   members: {
-    __showAllButton: null,
+    __expandButton: null,
     __contentContainer: null,
 
     _createChildControlImpl: function(id) {
@@ -116,7 +116,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
     __createContentContainer: function() {
       let contentContainer = null;
       const expanded = this.isExpanded();
-      const showAllBtn = this.__showAllButton;
+      const showAllBtn = this.__expandButton;
       if (expanded) {
         contentContainer = new osparc.dashboard.CardContainer();
         showAllBtn.show();
@@ -174,6 +174,10 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       return this.__contentContainer;
     },
 
+    getExpandButton: function() {
+      return this.__expandButton;
+    },
+
     // overridden
     add: function(child, idx) {
       if (osparc.dashboard.CardContainer.isValidCard(child)) {
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
index 8c7fd59acd3..857a8c58f82 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -379,7 +379,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         groupByMenu.add(groupByFeatured);
         groupOptions.add(groupByFeatured);
         groupByFeatured.execute();
-        groupByButton.exclude();
+        groupByButton.exclude(); // don't let users change the grouping
       }
 
       const groupByShared = new qx.ui.menu.RadioButton(this.tr("Shared with"));
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 10f08a2dea2..3d34248e306 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -561,6 +561,10 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       cards.push(card);
 
       this.__moveNoGroupToLast();
+      this.__groupedContainersList.forEach(groupedContainer => {
+        groupedContainer.setExpanded(true);
+        groupedContainer.getExpandButton().exclude();
+      });
     },
 
     __resourceToCards: function(resourceData) {

From 737f8cfe0ddc4b90a22500785ecd5d0626bb204c Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:48:26 +0200
Subject: [PATCH 15/23] featured also in s4lacad

---
 .../source/resource/osparc/ui_config.json     | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/services/static-webserver/client/source/resource/osparc/ui_config.json b/services/static-webserver/client/source/resource/osparc/ui_config.json
index 4b4dba52744..02e493d537e 100644
--- a/services/static-webserver/client/source/resource/osparc/ui_config.json
+++ b/services/static-webserver/client/source/resource/osparc/ui_config.json
@@ -172,6 +172,32 @@
         "newStudyLabel": "New Pipeline",
         "idToWidget": "emptyStudyBtn"
       }]
+    },
+    "groupedServices": {
+      "categories": [{
+        "id": "featured",
+        "title": "Featured",
+        "color": "product-color"
+      }],
+      "services": [{
+        "serviceKey": "simcore/services/dynamic/s4l-ui",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-jupyter",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/iseg-web",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/dynamic/s4l-ui-framework",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner",
+        "category": "featured"
+      }, {
+        "serviceKey": "simcore/services/comp/s4l-python-runner-gpu",
+        "category": "featured"
+      }]
     }
   },
   "s4llite": {

From 8738f6034a28bdf1345cc4e615bc5994ef8d79bb Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 10:59:01 +0200
Subject: [PATCH 16/23] tag icon

---
 .../source/class/osparc/dashboard/ResourceContainerManager.js   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 3d34248e306..068fa3b5d1d 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -538,6 +538,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       groupedServicesConfig["categories"].forEach(category => {
         if (this.__getGroupContainer(category["id"]) === null) {
           const groupContainer = this.__createGroupContainer(category["id"], category["title"], category["color"]);
+          groupContainer.setHeaderIcon("@FontAwesome5Solid/tag/24");
           this.__groupedContainers.add(groupContainer);
         }
       });
@@ -553,6 +554,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       }
       if (container === null) {
         container = this.__getGroupContainer("no-group");
+        container.setHeaderIcon("@FontAwesome5Solid/tag/24");
       }
 
       // create the card and add it to the container

From 6219bacc54d2cfce7e9465772769561193f7ff07 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 11:42:31 +0200
Subject: [PATCH 17/23] remove force grid

---
 .../source/class/osparc/dashboard/ResourceBrowserBase.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
index 857a8c58f82..3718d207146 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -326,8 +326,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
     _groupByChanged: function(groupBy) {
       // if cards are grouped they need to be in grid mode
-      this._resourcesContainer.setMode("grid");
-      this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
+      // this._resourcesContainer.setMode("grid");
+      // this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
       this._resourcesContainer.setGroupBy(groupBy);
       this._reloadCards();
     },

From 8d15a04be53df2a4d3f4e4409f072b40951eebd6 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 13:04:18 +0200
Subject: [PATCH 18/23] minor

---
 .../dashboard/ResourceContainerManager.js     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 068fa3b5d1d..9c542aa9942 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -171,18 +171,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       return this.__nonGroupedContainer;
     },
 
-    __createGroupContainer: function(groupId, headerLabel, headerColor = "text") {
-      const groupContainer = new osparc.dashboard.GroupedCardContainer().set({
-        groupId: groupId.toString(),
-        headerLabel,
-        headerIcon: "",
-        headerColor,
-        visibility: "excluded"
-      });
-      this.__groupedContainersList.push(groupContainer);
-      return groupContainer;
-    },
-
     areMoreResourcesRequired: function(loadingResourcesBtn) {
       if (this.__nonGroupedContainer) {
         return this.__nonGroupedContainer.areMoreResourcesRequired(loadingResourcesBtn);
@@ -343,6 +331,18 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       return flatList;
     },
 
+    __createGroupContainer: function(groupId, headerLabel, headerColor = "text") {
+      const groupContainer = new osparc.dashboard.GroupedCardContainer().set({
+        groupId: groupId.toString(),
+        headerLabel,
+        headerIcon: "",
+        headerColor,
+        visibility: "excluded"
+      });
+      this.__groupedContainersList.push(groupContainer);
+      return groupContainer;
+    },
+
     reloadCards: function(resourceType) {
       this.__rebuildLayout(resourceType);
 

From 7f262c827c4bba98950b5be787bc43e5dbf23055 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 13:35:27 +0200
Subject: [PATCH 19/23] propagate signals and properties

---
 .../osparc/dashboard/GroupedCardContainer.js  | 31 ++++++++++++++++++-
 .../dashboard/ResourceContainerManager.js     |  9 ++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
index 52b8e945d75..ff81e852858 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
@@ -66,7 +66,19 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       nullable: false,
       event: "changeExpanded",
       apply: "__applyExpanded"
-    }
+    },
+
+    mode: {
+      check: ["grid", "list"],
+      init: "grid",
+      nullable: false,
+      event: "changeMode"
+    },
+  },
+
+  events: {
+    "changeSelection": "qx.event.type.Data",
+    "changeVisibility": "qx.event.type.Data"
   },
 
   members: {
@@ -119,6 +131,23 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       const showAllBtn = this.__expandButton;
       if (expanded) {
         contentContainer = new osparc.dashboard.CardContainer();
+
+        const setContainerSpacing = () => {
+          const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
+          contentContainer.getLayout().set({
+            spacingX: spacing,
+            spacingY: spacing
+          });
+        };
+        setContainerSpacing();
+        this.addListener("changeMode", () => setContainerSpacing());
+        [
+          "changeSelection",
+          "changeVisibility"
+        ].forEach(signalName => {
+          contentContainer.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);
+        });
+
         showAllBtn.show();
       } else {
         const spacing = osparc.dashboard.GridButtonBase.SPACING;
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index 9c542aa9942..b2079ac5b03 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -339,6 +339,15 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         headerColor,
         visibility: "excluded"
       });
+
+      this.bind("mode", groupContainer, "mode");
+      [
+        "changeSelection",
+        "changeVisibility"
+      ].forEach(signalName => {
+        groupContainer.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);
+      });
+
       this.__groupedContainersList.push(groupContainer);
       return groupContainer;
     },

From 096c18f30f25998265dcf2c6f9c5540bccd03035 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 15:00:01 +0200
Subject: [PATCH 20/23] refactor

---
 .../osparc/dashboard/GroupedCardContainer.js  | 25 +++++++++++--------
 .../dashboard/ResourceContainerManager.js     | 19 +++++++-------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
index ff81e852858..7591d734877 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
@@ -125,22 +125,27 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
       return control || this.base(arguments, id);
     },
 
+    __modeChanged: function(container) {
+      const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
+      container.getLayout().set({
+        spacingX: spacing,
+        spacingY: spacing
+      });
+      if (this.getMode() === "list") {
+        this.set({
+          expanded: true,
+        });
+      }
+    },
+
     __createContentContainer: function() {
       let contentContainer = null;
       const expanded = this.isExpanded();
       const showAllBtn = this.__expandButton;
       if (expanded) {
         contentContainer = new osparc.dashboard.CardContainer();
-
-        const setContainerSpacing = () => {
-          const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
-          contentContainer.getLayout().set({
-            spacingX: spacing,
-            spacingY: spacing
-          });
-        };
-        setContainerSpacing();
-        this.addListener("changeMode", () => setContainerSpacing());
+        this.__modeChanged(contentContainer);
+        this.addListener("changeMode", () => this.__modeChanged(contentContainer));
         [
           "changeSelection",
           "changeVisibility"
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index b2079ac5b03..ba2e2ee47d7 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -311,17 +311,18 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       }
     },
 
+    __modeChanged: function(container) {
+      const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
+      container.getLayout().set({
+        spacingX: spacing,
+        spacingY: spacing
+      });
+    },
+
     __createFlatList: function() {
       const flatList = new osparc.dashboard.CardContainer();
-      const setContainerSpacing = () => {
-        const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
-        flatList.getLayout().set({
-          spacingX: spacing,
-          spacingY: spacing
-        });
-      };
-      setContainerSpacing();
-      this.addListener("changeMode", () => setContainerSpacing());
+      this.__modeChanged(flatList);
+      this.addListener("changeMode", () => this.__modeChanged(flatList));
       [
         "changeSelection",
         "changeVisibility"

From da002bc141f344b30f30f79434d6675e0e0c1b74 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 15:11:45 +0200
Subject: [PATCH 21/23] minor

---
 .../source/class/osparc/dashboard/GroupedCardContainer.js      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
index 7591d734877..24c51b49f97 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
@@ -170,7 +170,8 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
         });
       }
       contentContainer.set({
-        padding: 5,
+        paddingTop: 5,
+        paddingBottom: 5,
         allowGrowX: false
       });
       this._addAt(contentContainer, 1, {

From 4a86b9a3fbab9a3e4082257503e75a1f52bca23c Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 15:13:50 +0200
Subject: [PATCH 22/23] it now supports it

---
 .../source/class/osparc/dashboard/ResourceBrowserBase.js       | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
index 3718d207146..e12f569ad09 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -325,9 +325,6 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
     },
 
     _groupByChanged: function(groupBy) {
-      // if cards are grouped they need to be in grid mode
-      // this._resourcesContainer.setMode("grid");
-      // this.__viewModeLayout.setVisibility(groupBy ? "excluded" : "visible");
       this._resourcesContainer.setGroupBy(groupBy);
       this._reloadCards();
     },

From 5070ea7ae1144e6d4dd7533b78b36c06641cfefd Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Fri, 6 Jun 2025 15:31:28 +0200
Subject: [PATCH 23/23] refactor

---
 .../osparc/dashboard/GroupedCardContainer.js  |  6 +----
 .../dashboard/ResourceContainerManager.js     | 22 +++++++++----------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
index 24c51b49f97..a919ffe6188 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/GroupedCardContainer.js
@@ -126,11 +126,7 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
     },
 
     __modeChanged: function(container) {
-      const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
-      container.getLayout().set({
-        spacingX: spacing,
-        spacingY: spacing
-      });
+      osparc.dashboard.ResourceContainerManager.updateSpacing(this.getMode(), container);
       if (this.getMode() === "list") {
         this.set({
           expanded: true,
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
index ba2e2ee47d7..fa516600a4f 100644
--- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
+++ b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -110,7 +110,15 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         }
       }
       return false;
-    }
+    },
+
+    updateSpacing: function(mode, container) {
+      const spacing = mode === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
+      container.getLayout().set({
+        spacingX: spacing,
+        spacingY: spacing
+      });
+    },
   },
 
   members: {
@@ -311,18 +319,10 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       }
     },
 
-    __modeChanged: function(container) {
-      const spacing = this.getMode() === "grid" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;
-      container.getLayout().set({
-        spacingX: spacing,
-        spacingY: spacing
-      });
-    },
-
     __createFlatList: function() {
       const flatList = new osparc.dashboard.CardContainer();
-      this.__modeChanged(flatList);
-      this.addListener("changeMode", () => this.__modeChanged(flatList));
+      osparc.dashboard.ResourceContainerManager.updateSpacing(this.getMode(), flatList);
+      this.addListener("changeMode", () => osparc.dashboard.ResourceContainerManager.updateSpacing(this.getMode(), flatList));
       [
         "changeSelection",
         "changeVisibility"