UI refinements (#2859)

## Description:

UI Refinements requested by @evanpelle  check https://ui.openfront.dev

## 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:

w.o.n

src/client/Navigation.ts

@@ -1,26 +1,39 @@
 export function initNavigation() {
   const showPage = (pageId: string) => {
-    // Hide all pages
-    document.querySelectorAll(".page-content").forEach((el) => {
-      el.classList.add("hidden");
-      el.classList.remove("block");
-    });
-    document.getElementById("page-play")?.classList.add("hidden");
+    (window as any).currentPageId = pageId;
 
-    const target = document.getElementById(pageId);
-    if (target) {
-      target.classList.remove("hidden");
-      // Modals need block display explicitly
-      if (target.classList.contains("page-content")) {
-        target.classList.add("block");
-      }
+    // Hide only the currently visible modal
+    const visibleModal = document.querySelector(".page-content:not(.hidden)");
+    if (visibleModal) {
+      visibleModal.classList.add("hidden");
+      visibleModal.classList.remove("block");
+    }
 
-      // If the target itself is a modal component with inline attribute, open it
-      if (
-        target.hasAttribute("inline") &&
-        typeof (target as any).open === "function"
-      ) {
-        (target as any).open();
+    // Handle page-play separately (it's not a page-content element)
+    const pagePlayEl = document.getElementById("page-play");
+    if (pageId === "page-play") {
+      pagePlayEl?.classList.remove("hidden");
+    } else {
+      pagePlayEl?.classList.add("hidden");
+    }
+
+    // Show the target page if it's a modal
+    if (pageId !== "page-play") {
+      const target = document.getElementById(pageId);
+      if (target) {
+        target.classList.remove("hidden");
+        // Modals need block display explicitly
+        if (target.classList.contains("page-content")) {
+          target.classList.add("block");
+        }
+
+        // If the target itself is a modal component with inline attribute, open it
+        if (
+          target.hasAttribute("inline") &&
+          typeof (target as any).open === "function"
+        ) {
+          (target as any).open();
+        }
       }
     }
 
@@ -39,39 +52,63 @@ export function initNavigation() {
 
   window.showPage = showPage;
 
-  document.querySelectorAll(".nav-menu-item[data-page]").forEach((el) => {
-    el.addEventListener("click", () => {
-      const pageId = (el as HTMLElement).dataset.page;
+  // Use event delegation for navigation items (they may be inside Lit components)
+  document.addEventListener("click", (e) => {
+    const target = (e.target as HTMLElement).closest(
+      ".nav-menu-item[data-page]",
+    );
+    if (target) {
+      const pageId = (target as HTMLElement).dataset.page;
       if (pageId) showPage(pageId);
-    });
+    }
   });
 
-  // Handle clicks on main container to close open modals (navigate back)
-  const mainEl = document.querySelector("main");
-  if (mainEl) {
-    mainEl.addEventListener("click", (e: Event) => {
-      const target = e.target as HTMLElement;
-      const isPlayPageHidden = document
-        .getElementById("page-play")
-        ?.classList.contains("hidden");
+  // Wait for main-layout component to render before setting up click handler
+  customElements.whenDefined("main-layout").then(() => {
+    // Handle clicks on main container to close open modals (navigate back)
+    const mainEl = document.querySelector("main");
 
-      // Only proceed if we are NOT on the play page (meaning a modal page is open)
-      if (isPlayPageHidden) {
-        // If clicking on the main container directly (e.g. padding/background)
-        // or the max-width wrapper div directly
-        const wrapper = mainEl.firstElementChild as HTMLElement;
-        if (target === mainEl || (wrapper && target === wrapper)) {
-          showPage("page-play");
+    if (mainEl) {
+      mainEl.addEventListener("click", (e: Event) => {
+        const target = e.target as HTMLElement;
+        const isPlayPageHidden = document
+          .getElementById("page-play")
+          ?.classList.contains("hidden");
+
+        // Only proceed if we are NOT on the play page (meaning a modal page is open)
+        if (isPlayPageHidden) {
+          // Close modal if clicking on main element itself, or directly on a page-content element
+          const isOnMain = target === mainEl;
+          const isOnPageContent = target.classList.contains("page-content");
+
+          if (isOnMain || isOnPageContent) {
+            // Find the open modal and call its close() method instead of showPage directly
+            // This ensures proper cleanup (like websocket disconnection)
+            const openModal = document.querySelector(
+              ".page-content:not(.hidden)",
+            ) as any;
+
+            if (openModal && typeof openModal.close === "function") {
+              // Call leaveLobby or closeAndLeave first if it exists (for lobby modals)
+              if (typeof openModal.leaveLobby === "function") {
+                openModal.leaveLobby();
+              } else if (typeof openModal.closeAndLeave === "function") {
+                openModal.closeAndLeave();
+                return; // closeAndLeave already calls close()
+              }
+              openModal.close();
+            } else {
+              showPage("page-play");
+            }
+          }
         }
-      }
-    });
-  }
+      });
+    }
+  });
 
-  // Set default active if not set
-  const initialPage = document.querySelector(
-    '.nav-menu-item[data-page="page-play"]',
-  );
-  if (initialPage && !initialPage.classList.contains("active")) {
+  // Set default page to play if no menu item is active
+  const anyActive = document.querySelector(".nav-menu-item.active");
+  if (!anyActive) {
     showPage("page-play");
   }
 }