From 80f3801b7945a2d3dbe53f0e3ceded71be1c9ecb Mon Sep 17 00:00:00 2001
From: Timo <6156589+Shik3i@users.noreply.github.com>
Date: Wed, 22 Apr 2026 11:14:36 +0200
Subject: [PATCH] feat: add visible active room id and server labels to popup

---
 extension/popup.html | 8 ++++++++
 extension/popup.js   | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/extension/popup.html b/extension/popup.html
index 3e4d0ce..c991287 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -238,6 +238,14 @@
 
         <!-- ACTIVE SECTION: Visible when in a room -->
         <div id="section-active" style="display:none;">
+            <div class="info-card" style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent);">
+                <div>
+                    <label style="margin-bottom: 0;">Active Room</label>
+                    <div id="activeRoomId" style="font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: 1px;">NONE</div>
+                </div>
+                <div id="activeServer" style="font-size: 10px; color: var(--text-muted); text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Official Server</div>
+            </div>
+
             <div class="info-card" style="margin-bottom: 20px;">
                 <label>Invite Link</label>
                 <div class="invite-box">
diff --git a/extension/popup.js b/extension/popup.js
index 56beba8..c10b953 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -39,6 +39,8 @@ const elements = {
     retryBtn: document.getElementById('retryBtn'),
     sectionJoin: document.getElementById('section-join'),
     sectionActive: document.getElementById('section-active'),
+    activeRoomId: document.getElementById('activeRoomId'),
+    activeServer: document.getElementById('activeServer'),
     playBtn: document.getElementById('playBtn'),
     pauseBtn: document.getElementById('pauseBtn')
 };
@@ -99,6 +101,11 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
         const encodedUrl = encodeURIComponent(serverUrl || '');
         const invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}:${serverFlag}:${encodedUrl}`;
         elements.inviteLink.value = invite;
+        if (elements.activeRoomId) elements.activeRoomId.textContent = roomId;
+        if (elements.activeServer) {
+            elements.activeServer.textContent = useCustomServer ? (serverUrl || 'Custom Server') : 'Official Server';
+            elements.activeServer.title = useCustomServer ? (serverUrl || '') : 'sync.shik3i.net';
+        }
     }
 }