From 428c1fafba2ba542a9cbb1f47bde1be41aff8a81 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 1 Jan 2026 22:05:17 +0100
Subject: [PATCH] use animated modal for room browser

---
 frontend/src/html/popups.html                 |  6 +-
 frontend/src/styles/popups.scss               |  4 +-
 frontend/src/ts/index.ts                      |  2 +-
 .../ts/modals/tribe-browse-public-rooms.ts    | 75 ++++++++++++++
 .../popups/tribe-browse-public-rooms-popup.ts | 97 -------------------
 5 files changed, 81 insertions(+), 103 deletions(-)
 create mode 100644 frontend/src/ts/modals/tribe-browse-public-rooms.ts
 delete mode 100644 frontend/src/ts/popups/tribe-browse-public-rooms-popup.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index eda6e7006..3820ba7c1 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -153,13 +153,13 @@
   </div>
 </div>
 
-<div id="tribeBrowsePublicRoomsPopupWrapper" class="popupWrapper hidden">
-  <div id="tribeBrowsePublicRoomsPopup">
+<dialog id="tribeBrowsePublicRooms" class="modalWrapper hidden">
+  <div class="modal">
     <div class="title">Public rooms</div>
     <div class="list"></div>
     <div class="error hidden">No public rooms found</div>
   </div>
-</div>
+</dialog>
 
 <div id="tribeRoomCodePopupWrapper" class="popupWrapper hidden">
   <div id="tribeRoomCodePopup">
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index ae2d8f8d4..7889aac31 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -483,8 +483,8 @@ body.darkMode {
   }
 }
 
-#tribeBrowsePublicRoomsPopupWrapper {
-  #tribeBrowsePublicRoomsPopup {
+#tribeBrowsePublicRooms {
+  .modal {
     color: var(--sub-color);
     background: var(--bg-color);
     border-radius: var(--roundness);
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index ca459879e..9f7512cf2 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -43,7 +43,7 @@ import { egVideoListener } from "./popups/video-ad-popup";
 import "./states/connection";
 import "./test/tts";
 import "./elements/fps-counter";
-import "./popups/tribe-browse-public-rooms-popup";
+import "./modals/tribe-browse-public-rooms";
 import { isDevEnvironment, addToGlobal } from "./utils/misc";
 import * as VersionButton from "./elements/version-button";
 import * as Focus from "./test/focus";
diff --git a/frontend/src/ts/modals/tribe-browse-public-rooms.ts b/frontend/src/ts/modals/tribe-browse-public-rooms.ts
new file mode 100644
index 000000000..58aad38e2
--- /dev/null
+++ b/frontend/src/ts/modals/tribe-browse-public-rooms.ts
@@ -0,0 +1,75 @@
+import AnimatedModal from "../utils/animated-modal";
+import { qs } from "../utils/dom";
+import * as Loader from "../elements/loader";
+import * as TribeConfig from "../tribe/tribe-config";
+import TribeSocket from "../tribe/tribe-socket";
+import * as TribeType from "../tribe/types";
+import * as Tribe from "../tribe/tribe";
+
+function updateList(list: TribeType.Room[]): void {
+  // TODO: Confirm type from miodec
+
+  const el = $(modal.getModal());
+
+  if (list.length === 0) {
+    el.find(".error").removeClass("hidden");
+    el.find(".list").addClass("hidden");
+    return;
+  }
+  el.find(".error").addClass("hidden");
+  el.find(".list").removeClass("hidden");
+  for (const room of list) {
+    const html = `
+    <div class="room" id="${room.id}">
+      <div class="name">
+        <div class="title">name</div>
+        <div class="value">${room.name}</div>
+      </div>
+      <div class="players">
+        <div class="title">players</div>
+        <div class="value">${room.size}</div>
+      </div>
+      <div class="state">
+        <div class="title">state</div>
+        <div class="value">${room.state}</div>
+      </div>
+      <div class="config">
+        <div class="title">config</div>
+        <div class="value">${TribeConfig.getConfigString(room.config)}</div>
+      </div>
+      <div class="chevron">
+        <i class="fas fa-chevron-right"></i>
+      </div>
+    </div>
+    `;
+    const roomEl = el.find(".list").append(html);
+    roomEl.on("click", () => {
+      Tribe.joinRoom(room.id, true);
+      void modal.hide();
+    });
+  }
+}
+
+export function show(): void {
+  Loader.show();
+  void TribeSocket.out.room.getPublicRooms(0, "").then((r) => {
+    Loader.hide();
+    if (r.status !== "Error" && r.rooms) {
+      updateList(r.rooms);
+    }
+  });
+  void modal.show();
+}
+
+const modal = new AnimatedModal({
+  dialogId: "tribeBrowsePublicRooms",
+  cleanup: async () => {
+    const el = $(modal.getModal());
+    el.find(".search").val("");
+    el.find(".list").empty();
+  },
+});
+
+qs(".pageTribe .menu .customRooms #browseCustomRooms")?.on("click", (e) => {
+  show();
+});
diff --git a/frontend/src/ts/popups/tribe-browse-public-rooms-popup.ts b/frontend/src/ts/popups/tribe-browse-public-rooms-popup.ts
deleted file mode 100644
index 145719b36..000000000
--- a/frontend/src/ts/popups/tribe-browse-public-rooms-popup.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as Tribe from "../tribe/tribe";
-import * as TribeConfig from "../tribe/tribe-config";
-import * as Loader from "../elements/loader";
-import TribeSocket from "../tribe/tribe-socket";
-import * as TribeType from "../tribe/types";
-
-function updateList(list: TribeType.Room[]): void {
-  // TODO: Confirm type from miodec
-  if (list.length === 0) {
-    $("#tribeBrowsePublicRoomsPopup .error").removeClass("hidden");
-    $("#tribeBrowsePublicRoomsPopup .list").addClass("hidden");
-    return;
-  }
-  $("#tribeBrowsePublicRoomsPopup .error").addClass("hidden");
-  $("#tribeBrowsePublicRoomsPopup .list").removeClass("hidden");
-  $("#tribeBrowsePublicRoomsPopup .list").html("");
-  for (const room of list) {
-    const html = `
-    <div class="room" id="${room.id}">
-      <div class="name">
-        <div class="title">name</div>
-        <div class="value">${room.name}</div>
-      </div>
-      <div class="players">
-        <div class="title">players</div>
-        <div class="value">${room.size}</div>
-      </div>
-      <div class="state">
-        <div class="title">state</div>
-        <div class="value">${room.state}</div>
-      </div>
-      <div class="config">
-        <div class="title">config</div>
-        <div class="value">${TribeConfig.getConfigString(room.config)}</div>
-      </div>
-      <div class="chevron">
-        <i class="fas fa-chevron-right"></i>
-      </div>
-    </div>
-    `;
-    $("#tribeBrowsePublicRoomsPopup .list").append(html);
-  }
-}
-
-export function show(): void {
-  Loader.show();
-  void TribeSocket.out.room.getPublicRooms(0, "").then((r) => {
-    Loader.hide();
-    if (r.status !== "Error" && r.rooms) {
-      updateList(r.rooms);
-    }
-  });
-  if ($("#tribeBrowsePublicRoomsPopupWrapper").hasClass("hidden")) {
-    $("#tribeBrowsePublicRoomsPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125, () => {
-        $("#tribeBrowsePublicRoomsPopup .search").trigger("focus");
-        $("#tribeBrowsePublicRoomsPopup .search").val("");
-      });
-  }
-}
-
-function hide(): void {
-  if (!$("#tribeBrowsePublicRoomsPopupWrapper").hasClass("hidden")) {
-    $("#tribeBrowsePublicRoomsPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        100,
-        () => {
-          $("#tribeBrowsePublicRoomsPopupWrapper").addClass("hidden");
-        },
-      );
-  }
-}
-
-$(document).on("click", "#tribeBrowsePublicRoomsPopup .room", (e) => {
-  const roomId = $(e.currentTarget).attr("id") as string;
-  Tribe.joinRoom(roomId, true);
-  hide();
-});
-
-$("#tribeBrowsePublicRoomsPopupWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "tribeBrowsePublicRoomsPopupWrapper") {
-    hide();
-  }
-});
-
-$(".pageTribe .menu .customRooms #browseCustomRooms").on("click", (e) => {
-  if ($(e.currentTarget).hasClass("disabled")) return;
-  show();
-});