on user test request: when the recipe pane is maximised but the rec-list is empty, open the operations-dropdown on click of the recipe-list ( which holds no items )

src/web/Manager.mjs

@@ -141,6 +141,7 @@ class Manager {
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
+        document.getElementById("rec-list").addEventListener("click", this.controls.onMaximisedRecipeClick.bind(this.controls));
         // A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit box to maximise is unacceptably tiny, hence this solution
         document.getElementById("maximise-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
         document.getElementById("maximise-input").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));

src/web/waiters/ControlsWaiter.mjs

@@ -489,6 +489,24 @@ ${navigator.userAgent}
             btn.setAttribute("data-original-title", "Maximise pane");
         }
     }
+
+    /**
+     * If #recipe is maximised and #rec-list is empty, clicking / tapping on
+     * the ( empty ) list will open #operations-dropdown to help guide users
+     * with that they are supposed to do
+     */
+    onMaximisedRecipeClick() {
+        if (this.app.isMobileView()
+            // if #recipe is maximised
+            && document.querySelector("#recipe.maximised-pane")
+            // and #rec-list is empty
+            && document.querySelectorAll("#rec-list > li").length === 0 ) {
+
+            // close max pane and display the expanded #operations-dropdown
+            this.setPaneMaximised("recipe", false);
+            this.manager.ops.openOperationsDropdown();
+        }
+    }
 }
 
 export default ControlsWaiter;

src/web/waiters/RecipeWaiter.mjs

@@ -620,17 +620,18 @@ class RecipeWaiter {
         }))
     }
 
+
     /**
      * Update which items are selected in op-list.
      *
      * First, all selected classes are removed from op-list, then we get the current
      * recipe-list ingredient names and add 'selected' back to the matching operations.
      *
-     * Note: It seems a little overkill, but with the current tightly coupled code this is
+     * Note: It seems a little overkill to nuke all selected classes, but with the current
-     * a reliable way to make sure the 'selected' operations are always in sync with
+     * code this is a reliable way to make sure the 'selected' operations are always in sync with
      * the recipe list ( I think this is preferable to complicating a lot of existing
-     * code ), I'd recommend to refactor this at one point, but that would mean a huge code
+     * code ), I'd recommend to refactor this at one point, but that should go hand in hand
-     * overhaul for another time / issue.
+     * with a huge code overhaul for another time / issue.
      */
     updateSelectedOperations() {
         const recipeListItems = document.querySelectorAll("#rec-list > li");
@@ -648,6 +649,8 @@ class RecipeWaiter {
             });
         });
     }
+
+
 }
 
 export default RecipeWaiter;