add execute button to QR editor

public/scripts/extensions/quick-reply/html/qrEditor.html

@@ -63,5 +63,17 @@
 				<span><i class="fa-solid fa-fw fa-message"></i> Execute on opening chat</span>
 			</label>
 		</div>
+
+
+		<h3>Testing</h3>
+		<div id="qr--modal-execute" class="menu_button" title="Execute the quick reply now">
+			<i class="fa-solid fa-play"></i>
+			Execute
+		</div>
+		<label class="checkbox_label">
+			<input type="checkbox" id="qr--modal-executeHide">
+			<span> Hide editor while executing</span>
+		</label>
+		<div id="qr--modal-executeErrors"></div>
 	</div>
 </div>

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

@@ -345,6 +345,32 @@ export class QuickReply {
                 this.updateContext();
             });
 
+
+            /**@type {HTMLElement}*/
+            const executeErrors = dom.querySelector('#qr--modal-executeErrors');
+            /**@type {HTMLInputElement}*/
+            const executeHide = dom.querySelector('#qr--modal-executeHide');
+            let executePromise;
+            /**@type {HTMLElement}*/
+            const executeBtn = dom.querySelector('#qr--modal-execute');
+            executeBtn.addEventListener('click', async()=>{
+                if (executePromise) return;
+                executeBtn.classList.add('qr--busy');
+                executeErrors.innerHTML = '';
+                if (executeHide.checked) {
+                    document.querySelector('#shadow_popup').classList.add('qr--hide');
+                }
+                try {
+                    executePromise = this.onExecute();
+                    await executePromise;
+                } catch (ex) {
+                    executeErrors.textContent = ex.message;
+                }
+                executePromise = null;
+                executeBtn.classList.remove('qr--busy');
+                document.querySelector('#shadow_popup').classList.remove('qr--hide');
+            });
+
             await popupResult;
         } else {
             warn('failed to fetch qrEditor template');

public/scripts/extensions/quick-reply/style.css

@@ -255,3 +255,15 @@
 #dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
   flex: 1 1 auto;
 }
+#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor #qr--modal-execute {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+}
+#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor #qr--modal-execute.qr--busy {
+  opacity: 0.5;
+  cursor: wait;
+}
+#shadow_popup.qr--hide {
+  opacity: 0 !important;
+}

public/scripts/extensions/quick-reply/style.less

@@ -281,6 +281,20 @@
 					}
 				}
 			}
+
+			#qr--modal-execute {
+				display: flex;
+				flex-direction: row;
+				gap: 0.5em;
+				&.qr--busy {
+					opacity: 0.5;
+					cursor: wait;
+				}
+			}
 		}
 	}
 }
+
+#shadow_popup.qr--hide {
+	opacity: 0 !important;
+}