add c-operation-list so any of these elements ( category list, category list item, operation list, operation list item ) can be created individually or simply through their parent. Also fix some annotations across the app that used event instead of Event, causing the IDE to get confused

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

@@ -1,4 +1,4 @@
-import {COperationLi} from "./c-operation-li.mjs";
+import {COperationList} from "./c-operation-list.mjs";
 
 /**
  * c(ustom element)-category-li ( list item )
@@ -7,38 +7,66 @@ import {COperationLi} from "./c-operation-li.mjs";
  * @param {CatConf} category - The category and operations to be populated.
  * @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
  * @param {Boolean} isExpanded - expand the category on init or not
+ * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to favourite an operation easily
  * */
 export class CCategoryLi extends HTMLElement {
     constructor(
         app,
         category,
         operations,
-        isExpanded
+        isExpanded,
+        includeOpLiStarIcon,
     ) {
         super();
 
         this.app = app;
-        this.category = category;
-        this.operations = operations;
+        this.category = category; // contains a string[] of operation names under .ops
+        this.operations = operations; // opConfig[]
         this.label = category.name;
         this.isExpanded = isExpanded;
+        this.includeOpLiStarIcon = includeOpLiStarIcon;
 
         this.build();
 
         this.addEventListener("click", this.handleClick.bind(this));
     }
 
-    // /**
-    //  * Handle click
-    //  *
-    //  * @param {Event} e
-    //  */
-    // handleClick(e) {
-    //     if (e.target === this.querySelector("button")) {
-    //         // todo back to this "hitbox" issue w the icon inside the button
-    //         this.app.manager.ops.editFavouritesClick(e);
-    //     }
-    // }
+    /**
+     * 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);
+            this.app.manager.ops.editFavouritesClick(e);
+        }
+    }
+
+    /**
+     * Build c-category-li containing a nested c-operation-list ( op-list )
+     */
+    build() {
+        const li = this.buildListItem();
+        const a = this.buildAnchor();
+        const div = this.buildCollapsablePanel();
+
+        li.appendChild(a);
+        li.appendChild(div);
+        this.appendChild(li);
+
+        const opList = new COperationList(
+            this.app,
+            this.category.ops,
+            this.includeOpLiStarIcon,
+        )
+
+        opList.build();
+
+        div.appendChild(opList);
+    }
 
     /**
      * Build the li element
@@ -101,53 +129,6 @@ export class CCategoryLi extends HTMLElement {
         return div;
     };
 
-    /**
-     * Build the op-list for this category
-     *
-     * @param {string[]} opNames
-     */
-    buildOperationList(opNames) {
-        return opNames.map(opName => {
-            if (!(opName in this.operations)) {
-                log.warn(`${opName} could not be found.`);
-                return;
-            }
-
-            return new COperationLi(
-                this.app,
-                opName,
-                {
-                    class: "check-icon",
-                    innerText: "check"
-                },
-                this.operations[opName]
-            );
-        });
-    }
-
-    /**
-     * Build c-category-li and dispatch event oplistcreate
-     */
-    build() {
-        const ul = document.createElement("ul");
-        ul.classList.add("op-list");
-
-        const li = this.buildListItem();
-        const a = this.buildAnchor();
-        const div = this.buildCollapsablePanel();
-
-        li.appendChild(a);
-        li.appendChild(div);
-        div.appendChild(ul);
-        this.appendChild(li);
-
-        this.buildOperationList(this.category.ops).forEach(operationListItem =>
-            ul.appendChild(operationListItem)
-        );
-
-        ul.dispatchEvent(this.app.manager.oplistcreate);
-    }
-
     /**
      * Append a c-operation-li to this op-list
      *

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

@@ -5,15 +5,17 @@ import {CCategoryLi} from "./c-category-li.mjs";
  *
  * @param {App} app - The main view object for CyberChef
  * @param {CatConf[]} categories - The list of categories and operations to be populated.
- * @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
+ * @param {Object.<string, OpConf>} operations - A list of operation configuration objects.
+ * @param {boolean} includeOpLiStarIcon - optionally add the 'star' icon to the left of an individual operation
  **/
 export class CCategoryList extends HTMLElement {
-    constructor( app, categories, operations ) {
+    constructor(app, categories, operations, includeOpLiStarIcon) {
         super();
 
         this.app = app;
         this.categories = categories;
         this.operations = operations;
+        this.includeOpLiStarIcon = includeOpLiStarIcon;
     }
 
     /**
@@ -27,9 +29,9 @@ export class CCategoryList extends HTMLElement {
                 this.app,
                 category,
                 this.operations,
-                index === 0
+                index === 0,
+                this.includeOpLiStarIcon
             );
-
             ul.appendChild(cat);
         });
 

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

@@ -6,22 +6,24 @@ import url from "url";
  * @param {App} app - The main view object for CyberChef
  * @param {string} name - The name of the operation
  * @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the right side of the operation
- * @param {Object} config - The configuration object for this operation.
+ * @param {Boolean} includeStarIcon - Include the left side 'star' icon to favourite an operation easily
  */
 export class COperationLi extends HTMLElement {
     constructor(
         app,
         name,
         icon,
-        config
+        includeStarIcon,
     ) {
         super();
 
         this.app = app;
         this.name = name;
-        this.isFavourite = this.app.isLocalStorageAvailable() && localStorage.favourites?.includes(name);
         this.icon = icon;
-        this.config = config;
+        this.includeStarIcon = includeStarIcon;
+
+        this.config = this.app.operations[name];
+        this.isFavourite = this.app.isLocalStorageAvailable() && localStorage.favourites?.includes(name);
 
         this.build();
 
@@ -29,6 +31,8 @@ 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?
+
     /**
      * @fires OperationsWaiter#operationDblclick on double click
      * @param {Event} e
@@ -50,6 +54,23 @@ export class COperationLi extends HTMLElement {
         }
     }
 
+    /**
+     * Build c-operation-li
+     */
+    build() {
+        const li = this.buildListItem();
+        const icon = this.buildIcon();
+
+        if ( this.includeStarIcon ){
+            const starIcon = this.buildStarIcon();
+            li.appendChild(starIcon);
+        }
+
+        li.appendChild(icon);
+
+        this.appendChild(li);
+    }
+
     /**
      * Given a URL for a Wikipedia (or other wiki) page, this function returns a link to that page.
      *
@@ -128,7 +149,7 @@ export class COperationLi extends HTMLElement {
     }
 
     /**
-     * Build the star icon
+     * Build the ( optional ) star icon
      */
     buildStarIcon() {
         const icon = document.createElement("i");
@@ -147,20 +168,6 @@ export class COperationLi extends HTMLElement {
         return icon;
     }
 
-    /**
-     * Build c-operation-li
-     */
-    build() {
-        const li = this.buildListItem();
-        const icon = this.buildIcon();
-        const starIcon = this.buildStarIcon();
-
-        li.appendChild(icon);
-        li.appendChild(starIcon);
-
-        this.appendChild(li);
-    }
-
     updateFavourite(isFavourite) {
         if (isFavourite) {
             this.querySelector("li").classList.add("favourite");

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

@@ -0,0 +1,45 @@
+import {COperationLi} from "./c-operation-li.mjs";
+
+/**
+ * c(ustom element)-operation-list
+ *
+ * @param {App} app - The main view object for CyberChef
+ * @param {string[]} opNames - A list of operation names
+ * @param {boolean} includeStarIcon - optionally add the 'star' icon to the left of the operation
+ * @param {Object} icon ( { class: string, innerText: string } ). check-icon by default
+ */
+export class COperationList extends HTMLElement {
+    constructor(app, opNames, includeStarIcon, icon) {
+        super();
+
+        this.app = app;
+        this.opNames = opNames;
+        this.includeStarIcon = includeStarIcon;
+        this.icon = icon;
+    }
+
+    build() {
+        const ul =  document.createElement("ul");
+        ul.classList.add("op-list");
+
+        this.opNames.forEach((opName => {
+            const li = new COperationLi(
+                this.app,
+                opName,
+                {
+                    class: this.icon ? this.icon.class : "check-icon",
+                    innerText: this.icon ? this.icon.innerText : "check"
+                },
+                this.includeStarIcon
+            );
+
+            ul.appendChild(li);
+        }))
+
+        ul.dispatchEvent(this.app.manager.oplistcreate);
+
+        this.append(ul);
+    }
+}
+
+customElements.define("c-operation-list", COperationList);