replace leave lobby popup with custom popup

[ryanbarlow97]

Description:

old:

new:

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory

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

w.o.n

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Walkthrough

BaseModal now supports async close confirmation with an inline dialog. HostLobbyModal and JoinLobbyModal use the new confirmation path. Navigation awaits close guards before switching pages or closing modals, and one escape-close test was updated for the deferred flow.

Changes

Async modal close confirmation

Layer / File(s)	Summary
BaseModal async close gating src/client/components/BaseModal.ts	Adds closeConfirm state, confirmClose(), and settleCloseConfirm(). Renders <confirm-dialog> and makes close handling await confirmBeforeClose().
Lobby modals delegate to confirmClose src/client/HostLobbyModal.ts, src/client/JoinLobbyModal.ts	Both modal classes replace native confirm() with this.confirmClose(...) and widen confirmBeforeClose() to boolean | Promise<boolean>.
Navigation async close guard src/client/Navigation.ts	Nav clicks and the main click handler now await confirmBeforeClose() before navigation or modal close.
Escape close test update tests/client/LeaderboardModal.test.ts	The escape-close test becomes async and waits for deferred close completion before checking state.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A modal asked, “Shall I close now?”
The answer came in async glow.
A little dialog took the stage,
While Escape key waited by the page.
Then page and prompt both said goodbye,
Like soft clouds drifting through the sky.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: replacing the leave-lobby popup with a custom in-game popup.
Description check	✅ Passed	The description is directly related to the UI change, screenshots, and added tests in this pull request.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/client/Navigation.ts (1)

134-149: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win

Do not call leaveLobby() before close() here.

Line 143 already dispatches the leave event for HostLobbyModal, and Line 149 then triggers HostLobbyModal.onClose(), which dispatches leave-lobby again on Line 561 in src/client/HostLobbyModal.ts. That makes backdrop/main-click dismissal send the same leave action twice.

Suggested fix

-              // Call leaveLobby or closeAndLeave first if it exists (for lobby modals)
-              if (typeof openModal.leaveLobby === "function") {
-                openModal.leaveLobby();
-              } else if (typeof openModal.closeAndLeave === "function") {
+              // Let the modal own its teardown in onClose()/closeAndLeave().
+              if (typeof openModal.closeAndLeave === "function") {
                 openModal.closeAndLeave();
                 return; // closeAndLeave already calls close()
               }
               openModal.close();

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/client/Navigation.ts` around lines 134 - 149, The modal dismissal flow in
Navigation should not invoke leaveLobby before close for HostLobbyModal, because
close already routes through HostLobbyModal.onClose and re-dispatches the leave
action. Update the openModal handling so that backdrop/main-click dismissal
relies on close() for HostLobbyModal, while preserving the existing
confirmBeforeClose and closeAndLeave behavior; use the openModal.close,
openModal.leaveLobby, openModal.closeAndLeave, and HostLobbyModal.onClose paths
to locate the change.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/client/Navigation.ts`:
- Around line 134-149: The modal dismissal flow in Navigation should not invoke
leaveLobby before close for HostLobbyModal, because close already routes through
HostLobbyModal.onClose and re-dispatches the leave action. Update the openModal
handling so that backdrop/main-click dismissal relies on close() for
HostLobbyModal, while preserving the existing confirmBeforeClose and
closeAndLeave behavior; use the openModal.close, openModal.leaveLobby,
openModal.closeAndLeave, and HostLobbyModal.onClose paths to locate the change.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8c8b4bdf-67d1-47da-ae17-a4a0429e708e

📥 Commits

Reviewing files that changed from the base of the PR and between 9f06a40 and 751be3c.

📒 Files selected for processing (4)

• src/client/HostLobbyModal.ts
• src/client/Navigation.ts
• src/client/components/BaseModal.ts
• tests/client/LeaderboardModal.test.ts