Add confirmation dialog before closing host lobby modal 🔧 (#3364)

## Description:

Show a confirm prompt when the user tries to close the host lobby via
click-outside or Escape key, preventing accidental lobby exits. Happened
to many people and also DougDoug...

Does not show the prompt when the user clicks the arrow button because
it's probably intentional.

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FloPinguin

resources/lang/en.json

@@ -430,7 +430,8 @@
     "teams_Humans Vs Nations": "Humans vs Nations",
     "starting_gold": "Starting gold",
     "crowded": "Crowded modifier",
-    "hard_nations": "Hard Nations"
+    "hard_nations": "Hard Nations",
+    "leave_confirmation": "Are you sure you want to leave the lobby?"
   },
   "team_colors": {
     "red": "Red",

src/client/HostLobbyModal.ts

@@ -406,6 +406,10 @@ export class HostLobbyModal extends BaseModal {
     );
   }
 
+  public confirmBeforeClose(): boolean {
+    return confirm(translateText("host_modal.leave_confirmation"));
+  }
+
   protected onClose(): void {
     console.log("Closing host lobby modal");
     this.stopLobbyUpdates();

src/client/Navigation.ts

@@ -106,6 +106,13 @@ export function initNavigation() {
             ) as any;
 
             if (openModal && typeof openModal.close === "function") {
+              // Check confirmation guard before closing
+              if (
+                typeof openModal.confirmBeforeClose === "function" &&
+                !openModal.confirmBeforeClose()
+              ) {
+                return;
+              }
               // Call leaveLobby or closeAndLeave first if it exists (for lobby modals)
               if (typeof openModal.leaveLobby === "function") {
                 openModal.leaveLobby();

src/client/components/BaseModal.ts

@@ -39,6 +39,11 @@ export abstract class BaseModal extends LitElement {
     if (this.modalEl) {
       this.modalEl.onClose = () => {
         if (this.isModalOpen) {
+          if (!this.confirmBeforeClose()) {
+            // Re-open the underlying o-modal since it already closed itself
+            this.modalEl?.open();
+            return;
+          }
           this.close();
         }
       };
@@ -57,6 +62,9 @@ export abstract class BaseModal extends LitElement {
   private handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Escape" && this.isModalOpen) {
       e.preventDefault();
+      if (!this.confirmBeforeClose()) {
+        return;
+      }
       this.close();
     }
   };
@@ -93,6 +101,15 @@ export abstract class BaseModal extends LitElement {
     // Default implementation does nothing
   }
 
+  /**
+   * Guard called before closing via Escape key or click-outside.
+   * Override in subclasses to show a confirmation dialog.
+   * Return false to prevent the modal from closing.
+   */
+  public confirmBeforeClose(): boolean {
+    return true;
+  }
+
   /**
    * Open the modal. Handles both inline and modal element modes.
    * Subclasses can override onOpen() for custom behavior.