JoinLobbyModal for public and private lobbies (#3097)

## Description:

Replaced the src/client/JoinPrivateLobbyModal.ts with a new
src/client/JoinLobbyModal.ts which handles both public + private
lobbies.

<img width="771" height="714" alt="image"
src="https://github.com/user-attachments/assets/7ac55d91-3f0c-4f99-b960-cea9e617538d"
/>

also made a "connecting" to the lobby 
<img width="772" height="708" alt="image"
src="https://github.com/user-attachments/assets/a2812462-c5f4-459a-b63a-49d93bb2a6a2"
/>


It also needed to be updated to address the issue with the modal using
both polling + websockets

## 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/components/LobbyConfigItem.ts

@@ -0,0 +1,29 @@
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("lobby-config-item")
+export class LobbyConfigItem extends LitElement {
+  @property({ type: String }) label = "";
+  @property({ attribute: false }) value: string | TemplateResult = "";
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`
+      <div
+        class="bg-white/5 border border-white/10 rounded-lg p-3 flex flex-col items-center justify-center gap-1 text-center min-w-[100px]"
+      >
+        <span
+          class="text-white/40 text-[10px] font-bold uppercase tracking-wider"
+          >${this.label}</span
+        >
+        <span
+          class="text-white font-bold text-sm w-full break-words hyphens-auto"
+          >${this.value}</span
+        >
+      </div>
+    `;
+  }
+}