add a healthy dose of mobile copium

public/scripts/extensions/quick-reply/src/ContextMenu.js

@@ -1,16 +1,23 @@
 import { MenuItem } from "./MenuItem.js";
 
 export class ContextMenu {
+	/**@type {MenuItem[]}*/ itemList = [];
+	/**@type {Boolean}*/ isActive = false;
+	
 	/**@type {HTMLElement}*/ root;
 	/**@type {HTMLElement}*/ menu;
 
-	/**@type {MenuItem[]}*/ itemList = [];
-
 
 
 
 	constructor(/**@type {MenuItem[]}*/items) {
 		this.itemList = items;
+		items.forEach(item=>{
+			item.onExpand = ()=>{
+				items.filter(it=>it!=item)
+					.forEach(it=>it.collapse());
+			};
+		});
 	}
 
 	render() {
@@ -35,12 +42,24 @@ export class ContextMenu {
 
 
 	show({clientX, clientY}) {
+		if (this.isActive) return;
+		this.isActive = true;
 		this.render();
 		this.menu.style.bottom = `${window.innerHeight - clientY}px`;
 		this.menu.style.left = `${clientX}px`;
 		document.body.append(this.root);
 	}
 	hide() {
-		this.root.remove();
+		if (this.root) {
+			this.root.remove();
+		}
+		this.isActive = false;
+	}
+	toggle(/**@type {PointerEvent}*/evt) {
+		if (this.isActive) {
+			this.hide();
+		} else {
+			this.show(evt);
+		}
 	}
 }

public/scripts/extensions/quick-reply/src/MenuHeader.js

@@ -1,15 +1,9 @@
+import { MenuItem } from "./MenuItem.js";
 import { SubMenu } from "./SubMenu.js";
 
-export class MenuHeader {
-	/**@type {String}*/ label;
-
-	/**@type {HTMLElement}*/ root;
-
-
-
-
+export class MenuHeader extends MenuItem {
 	constructor(/**@type {String}*/label) {
-		this.label = label;
+		super(label, null, null);
 	}
 
 

public/scripts/extensions/quick-reply/src/MenuItem.js

@@ -5,8 +5,12 @@ export class MenuItem {
 	/**@type {Object}*/ value;
 	/**@type {Function}*/ callback;
 	/**@type {MenuItem[]}*/ childList = [];
+	/**@type {SubMenu}*/ subMenu;
+	/**@type {Boolean}*/ isForceExpanded = false;
 
 	/**@type {HTMLElement}*/ root;
+	
+	/**@type {Function}*/ onExpand;
 
 
 
@@ -29,15 +33,44 @@ export class MenuItem {
 				if (this.callback) {
 					item.addEventListener('click', (evt)=>this.callback(evt, this));
 				}
+				item.append(this.label);
 				if (this.childList.length > 0) {
 					item.classList.add('ctx-has-children');
 					const sub = new SubMenu(this.childList);
-					item.addEventListener('pointerover', ()=>sub.show(item));
-					item.addEventListener('pointerleave', ()=>sub.hide());
+					this.subMenu = sub;
+					const trigger = document.createElement('div'); {
+						trigger.classList.add('ctx-expander');
+						trigger.textContent = '⋮';
+						trigger.addEventListener('click', (evt)=>{
+							evt.stopPropagation();
+							this.toggle();
+						});
+						item.append(trigger);
+					}
+					item.addEventListener('mouseover', ()=>sub.show(item));
+					item.addEventListener('mouseleave', ()=>sub.hide());
+				
 				}
-				item.append(this.label);
 			}
 		}
 		return this.root;
 	}
+
+
+	expand() {
+		this.subMenu?.show(this.root);
+		if (this.onExpand) {
+			this.onExpand();
+		}
+	}
+	collapse() {
+		this.subMenu?.hide();
+	}
+	toggle() {
+		if (this.subMenu.isActive) {
+			this.expand();
+		} else {
+			this.collapse();
+		}
+	}
 }

public/scripts/extensions/quick-reply/src/SubMenu.js

@@ -47,9 +47,18 @@ export class SubMenu {
 		});
 	}
 	hide() {
-		this.root.remove();
-		this.root.style.top = '';
-		this.root.style.left = '';
+		if (this.root) {
+			this.root.remove();
+			this.root.style.top = '';
+			this.root.style.left = '';
+		}
 		this.isActive = false;
 	}
+	toggle(/**@type {HTMLElement}*/parent) {
+		if (this.isActive) {
+			this.hide();
+		} else {
+			this.show(parent);
+		}
+	}
 }