A few annotations and event listener removals on disconnectedCallback

src/web/components/c-category-li.mjs

@@ -31,16 +31,21 @@ export class CCategoryLi extends HTMLElement {
         this.addEventListener("click", this.handleClick.bind(this));
     }
 
+    /**
+     * Remove listeners on disconnectedCallback
+     */
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick.bind(this));
+    }
+
     /**
      * Handle click
      *
      * @param {Event} e
      */
     handleClick(e) {
-        // todo some event (target ) bs here
-        if (e.target === this.querySelector("button")) {
-            // todo back to this "hitbox" issue w the icon inside the button
-            console.log(e.target);
+        if (e.target === this.querySelector("button") || e.target === this.querySelector("button > i")) {
+            e.stopPropagation(); // stop the event from propagating to the collapsable panel
             this.app.manager.ops.editFavouritesClick(e);
         }
     }

src/web/components/c-operation-li.mjs

@@ -31,7 +31,13 @@ export class COperationLi extends HTMLElement {
         this.addEventListener('dblclick', this.handleDoubleClick.bind(this));
     }
 
-    // todo: dont think I need config separately, just use this.app.operations[name].xx?
+    /**
+     * Remove listeners on disconnectedCallback
+     */
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick.bind(this));
+        this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
+    }
 
     /**
      * @fires OperationsWaiter#operationDblclick on double click
@@ -52,6 +58,9 @@ export class COperationLi extends HTMLElement {
             this.app.addFavourite(this.name);
             this.updateFavourite(true);
         }
+        if (e.target === this.querySelector("i.remove-icon")) {
+            this.remove();
+        }
     }
 
     /**
@@ -168,6 +177,9 @@ export class COperationLi extends HTMLElement {
         return icon;
     }
 
+    /**
+     * Update favourite icon for this list item and add 'favourite' class
+     */
     updateFavourite(isFavourite) {
         if (isFavourite) {
             this.querySelector("li").classList.add("favourite");

src/web/components/c-operation-list.mjs

@@ -18,6 +18,9 @@ export class COperationList extends HTMLElement {
         this.icon = icon;
     }
 
+    /**
+     * Build c-operation-list
+     */
     build() {
         const ul =  document.createElement("ul");
         ul.classList.add("op-list");