Handle selected, favourite classes and rerendering of the favcat accordingly

src/web/App.mjs

@@ -417,27 +417,27 @@ class App {
 
         favourites.push(name);
         this.updateFavourites(favourites);
+        this.manager.ops.updateListItemsClasses('#rec-list', 'selected');
     }
 
 
     /**
      * Update favourites in localstorage, load the updated
-     * favourites and re-render c-category-li [favourites]
+     * favourites and rebuild cat fav-list to reflect the updates
      *
      * @param {string[]} favourites
      */
-    updateFavourites(favourites)  {
+    updateFavourites(favourites) {
-        // @todo: probably need this elsewhere
-        // // Destroy the current list items we no longer need in the edit Favourites modal
-        // const operations = document.querySelectorAll("#editable-favourites ....");
-        // listItems.forEach((li => {
-        //     li.remove();
-        // }))
-
         this.saveFavourites(favourites);
         this.loadFavourites();
+        this.buildFavouritesCategory();
+    }
 
-        /* Rebuild only the favourites category */
+    /**
+     * (Re)render only the favourites category after adding
+     * an operation to favourites
+     */
+    buildFavouritesCategory() {
         // double-check if the first category is indeed "catFavourites",
         if (document.querySelector("c-category-list > ul > c-category-li > li > a[data-target='#catFavourites']")) {
             // then destroy
@@ -900,6 +900,12 @@ class App {
      * @fires Manager#oplistcreate from nested c-category-li > c-operation-list build() function
      */
     buildCategoryList() {
+        // double-check if the c-category-list already exists,
+        if (document.querySelector("#categories > c-category-list")){
+            // then destroy it
+            document.querySelector("#categories > c-category-list").remove();
+        }
+
         const categoryList = new CCategoryList(
             this,
             this.categories,

src/web/waiters/OperationsWaiter.mjs

@@ -242,13 +242,17 @@ class OperationsWaiter {
     /**
      * Handler for edit favourites click events.
      * Sets up the 'Edit favourites' pane and displays it.
-     *
-     // * @param {Event} e
      */
     editFavouritesClick() {
+        const div = document.getElementById("editable-favourites");
+
+        // Remove c-operation-list if there already was one
+        if ( div.querySelector("c-operation-list") ){
+            div.removeChild(div.querySelector("c-operation-list"));
+        }
+
         // Get list of Favourite operation names
         const favCatConfig = this.app.categories.find(catConfig => catConfig.name === "Favourites");
-        const div = document.getElementById("editable-favourites");
 
         if(favCatConfig !== undefined) {
             const opList = new COperationList(
@@ -263,6 +267,7 @@ class OperationsWaiter {
 
             opList.build();
 
+            // Append the new opList<COperationList>
             div.appendChild(opList);
         }
 
@@ -366,7 +371,7 @@ class OperationsWaiter {
      */
     updateListItemsClasses(srcListSelector, className) {
         const listItems = document.querySelectorAll(`${srcListSelector} > li`);
-        const ops =  document.querySelectorAll("c-operation-li > li.operation");
+        const ops =  document.querySelectorAll("#categories c-operation-li > li.operation");
 
         this.removeClassFromOps(className);
 
@@ -389,7 +394,7 @@ class OperationsWaiter {
      * @param {string} className  - the class to remove
      */
     removeClassFromOps(className) {
-        const ops = document.querySelectorAll("c-operation-li > li.operation");
+        const ops = document.querySelectorAll("#categories c-operation-li > li.operation");
 
         ops.forEach((op => {
             this.removeClassFromOp(op.getAttribute("data-name"), className);
@@ -404,7 +409,7 @@ class OperationsWaiter {
      * @param {string} className - the class to remove
      */
     removeClassFromOp(opName, className) {
-        const ops = document.querySelectorAll(`c-operation-li > li.operation[data-name="${opName}"].${className}`);
+        const ops = document.querySelectorAll(`#categories c-operation-li > li.operation[data-name="${opName}"].${className}`);
 
         // the same operation may occur twice if it is also in #catFavourites
         ops.forEach((op) => {
@@ -420,7 +425,7 @@ class OperationsWaiter {
      * @param {string} className - the class to add to the operation list item
      */
     addClassToOp(opName, className) {
-        const ops = document.querySelectorAll(`c-operation-li > li.operation[data-name="${opName}"]`);
+        const ops = document.querySelectorAll(`#categories c-operation-li > li.operation[data-name="${opName}"]`);
 
         // the same operation may occur twice if it is also in #catFavourites
         ops.forEach((op => {