From 1f48e9df47659310c6567b71078c44cf5b630594 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Mon, 29 Jun 2026 02:43:28 +0200
Subject: [PATCH] fix(popup): polish custom-server, host-control card & co-host
 UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Manual Connect: split the server picker into its own inset panel,
  visually separated from the Room ID / Password fields (they were
  welded together in one flat list).
- Custom server URL: stop auto-prepending ws:// — default to wss://
  for real hosts, ws:// only for localhost/127.0.0.1 (matches what
  the background already enforces; the displayed URL no longer lies).
- Host Control card: replace the raw native checkbox with the proper
  .toggle-switch slider used in Options; move the toggle row from a
  <label> to a <div> to avoid an illegally nested label.
- Co-host discoverability: owner-only hint in the Host Control card
  pointing to the participant list (new NOTICE_COHOST_HINT across all
  15 locales). Shown only when actionable: owner + co-host-capable
  relay + host-only active.
- Peer row: group right-side badges/actions into one container so they
  no longer scatter via space-between or collide with long names;
  restyle the give/revoke button (padding, weight, hover fill, tooltip).
- Gate promote/demote (and role badges) on host-only mode being ON,
  in addition to the existing owner-privilege check — roles are moot
  in 'everyone' mode, so no badge/button noise there.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 extension/locales/de.json    |  1 +
 extension/locales/en.json    |  1 +
 extension/locales/es.json    |  1 +
 extension/locales/fr.json    |  1 +
 extension/locales/it.json    |  1 +
 extension/locales/ja.json    |  1 +
 extension/locales/ko.json    |  1 +
 extension/locales/nl.json    |  1 +
 extension/locales/pl.json    |  1 +
 extension/locales/pt-BR.json |  1 +
 extension/locales/pt.json    |  1 +
 extension/locales/ru.json    |  1 +
 extension/locales/tr.json    |  1 +
 extension/locales/uk.json    |  1 +
 extension/locales/zh.json    |  1 +
 extension/popup.html         | 28 ++++++++++++-------
 extension/popup.js           | 52 +++++++++++++++++++++++++++---------
 17 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/extension/locales/de.json b/extension/locales/de.json
index efdee88..22fdb35 100644
--- a/extension/locales/de.json
+++ b/extension/locales/de.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Festlegen, wer die Wiedergabe in diesem Raum steuern darf",
   "LABEL_HOST_ONLY_TOGGLE": "Nur ich darf die Wiedergabe steuern",
   "NOTICE_HOST_CONTROLS": "Der Host steuert die Wiedergabe für alle.",
+  "NOTICE_COHOST_HINT": "Tipp: Gib einzelnen Teilnehmern unten in der Teilnehmerliste die Steuerung.",
   "BADGE_HOST": "Host",
   "BADGE_GUEST": "Gast",
   "BADGE_CONTROLLER": "Controller",
diff --git a/extension/locales/en.json b/extension/locales/en.json
index 416d6b4..5e7ffe2 100644
--- a/extension/locales/en.json
+++ b/extension/locales/en.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Restrict who can control playback in this room",
   "LABEL_HOST_ONLY_TOGGLE": "Only I can control playback",
   "NOTICE_HOST_CONTROLS": "The host controls playback for everyone.",
+  "NOTICE_COHOST_HINT": "Tip: grant control to individual viewers in the participant list below.",
   "BADGE_HOST": "Host",
   "BADGE_GUEST": "Guest",
   "BADGE_CONTROLLER": "Controller",
diff --git a/extension/locales/es.json b/extension/locales/es.json
index 7e72723..95b5e0b 100644
--- a/extension/locales/es.json
+++ b/extension/locales/es.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Restringir quién puede controlar la reproducción en esta sala",
   "LABEL_HOST_ONLY_TOGGLE": "Solo yo puedo controlar la reproducción",
   "NOTICE_HOST_CONTROLS": "El anfitrión controla la reproducción para todos.",
+  "NOTICE_COHOST_HINT": "Consejo: concede el control a usuarios concretos en la lista de participantes de abajo.",
   "BADGE_HOST": "Anfitrión",
   "BADGE_GUEST": "Invitado",
   "BADGE_CONTROLLER": "Controlador",
diff --git a/extension/locales/fr.json b/extension/locales/fr.json
index b550c2e..8c2dbba 100644
--- a/extension/locales/fr.json
+++ b/extension/locales/fr.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Définir qui peut contrôler la lecture dans ce salon",
   "LABEL_HOST_ONLY_TOGGLE": "Moi seul peux contrôler la lecture",
   "NOTICE_HOST_CONTROLS": "L'hôte contrôle la lecture pour tout le monde.",
+  "NOTICE_COHOST_HINT": "Astuce : donnez le contrôle à des participants précis dans la liste ci-dessous.",
   "BADGE_HOST": "Hôte",
   "BADGE_GUEST": "Invité",
   "BADGE_CONTROLLER": "Contrôleur",
diff --git a/extension/locales/it.json b/extension/locales/it.json
index 21996c7..6734f1e 100644
--- a/extension/locales/it.json
+++ b/extension/locales/it.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Limita chi può controllare la riproduzione in questa stanza",
   "LABEL_HOST_ONLY_TOGGLE": "Solo io posso controllare la riproduzione",
   "NOTICE_HOST_CONTROLS": "L'host controlla la riproduzione per tutti.",
+  "NOTICE_COHOST_HINT": "Suggerimento: concedi il controllo ai singoli partecipanti nell'elenco qui sotto.",
   "BADGE_HOST": "Host",
   "BADGE_GUEST": "Ospite",
   "BADGE_CONTROLLER": "Controller",
diff --git a/extension/locales/ja.json b/extension/locales/ja.json
index cc3ab9d..12c4bf7 100644
--- a/extension/locales/ja.json
+++ b/extension/locales/ja.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "このルームで再生を操作できる人を制限します",
   "LABEL_HOST_ONLY_TOGGLE": "再生を操作できるのは自分だけ",
   "NOTICE_HOST_CONTROLS": "ホストが全員の再生を操作します。",
+  "NOTICE_COHOST_HINT": "ヒント: 下の参加者リストで個別の参加者に操作権限を付与できます。",
   "BADGE_HOST": "ホスト",
   "BADGE_GUEST": "ゲスト",
   "BADGE_CONTROLLER": "操作権あり",
diff --git a/extension/locales/ko.json b/extension/locales/ko.json
index ea573a5..8c648f0 100644
--- a/extension/locales/ko.json
+++ b/extension/locales/ko.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "이 방에서 재생을 제어할 수 있는 사람 제한",
   "LABEL_HOST_ONLY_TOGGLE": "나만 재생을 제어할 수 있음",
   "NOTICE_HOST_CONTROLS": "호스트가 모두의 재생을 제어합니다.",
+  "NOTICE_COHOST_HINT": "팁: 아래 참가자 목록에서 개별 참가자에게 제어 권한을 부여하세요.",
   "BADGE_HOST": "호스트",
   "BADGE_GUEST": "게스트",
   "BADGE_CONTROLLER": "제어자",
diff --git a/extension/locales/nl.json b/extension/locales/nl.json
index 6a07ca2..c54da24 100644
--- a/extension/locales/nl.json
+++ b/extension/locales/nl.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Bepaal wie de weergave in deze kamer mag bedienen",
   "LABEL_HOST_ONLY_TOGGLE": "Alleen ik mag de weergave bedienen",
   "NOTICE_HOST_CONTROLS": "De host bedient de weergave voor iedereen.",
+  "NOTICE_COHOST_HINT": "Tip: geef afzonderlijke deelnemers de besturing in de lijst hieronder.",
   "BADGE_HOST": "Host",
   "BADGE_GUEST": "Gast",
   "BADGE_CONTROLLER": "Bediener",
diff --git a/extension/locales/pl.json b/extension/locales/pl.json
index 2cc04be..b061ea9 100644
--- a/extension/locales/pl.json
+++ b/extension/locales/pl.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Określ, kto może sterować odtwarzaniem w tym pokoju",
   "LABEL_HOST_ONLY_TOGGLE": "Tylko ja mogę sterować odtwarzaniem",
   "NOTICE_HOST_CONTROLS": "Host steruje odtwarzaniem dla wszystkich.",
+  "NOTICE_COHOST_HINT": "Wskazówka: przyznaj sterowanie wybranym uczestnikom na liście poniżej.",
   "BADGE_HOST": "Host",
   "BADGE_GUEST": "Gość",
   "BADGE_CONTROLLER": "Sterujący",
diff --git a/extension/locales/pt-BR.json b/extension/locales/pt-BR.json
index 87ab3bc..2165844 100644
--- a/extension/locales/pt-BR.json
+++ b/extension/locales/pt-BR.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Restringir quem pode controlar a reprodução nesta sala",
   "LABEL_HOST_ONLY_TOGGLE": "Somente eu posso controlar a reprodução",
   "NOTICE_HOST_CONTROLS": "O anfitrião controla a reprodução para todos.",
+  "NOTICE_COHOST_HINT": "Dica: conceda o controle a participantes específicos na lista abaixo.",
   "BADGE_HOST": "Anfitrião",
   "BADGE_GUEST": "Convidado",
   "BADGE_CONTROLLER": "Controlador",
diff --git a/extension/locales/pt.json b/extension/locales/pt.json
index 4b7fbe3..2b647f4 100644
--- a/extension/locales/pt.json
+++ b/extension/locales/pt.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Restringir quem pode controlar a reprodução nesta sala",
   "LABEL_HOST_ONLY_TOGGLE": "Só eu posso controlar a reprodução",
   "NOTICE_HOST_CONTROLS": "O anfitrião controla a reprodução para todos.",
+  "NOTICE_COHOST_HINT": "Dica: conceda o controlo a participantes específicos na lista abaixo.",
   "BADGE_HOST": "Anfitrião",
   "BADGE_GUEST": "Convidado",
   "BADGE_CONTROLLER": "Controlador",
diff --git a/extension/locales/ru.json b/extension/locales/ru.json
index 06e1dfd..f3451b5 100644
--- a/extension/locales/ru.json
+++ b/extension/locales/ru.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Ограничить, кто может управлять воспроизведением в этой комнате",
   "LABEL_HOST_ONLY_TOGGLE": "Только я могу управлять воспроизведением",
   "NOTICE_HOST_CONTROLS": "Ведущий управляет воспроизведением для всех.",
+  "NOTICE_COHOST_HINT": "Совет: предоставьте управление отдельным участникам в списке ниже.",
   "BADGE_HOST": "Ведущий",
   "BADGE_GUEST": "Гость",
   "BADGE_CONTROLLER": "Управляющий",
diff --git a/extension/locales/tr.json b/extension/locales/tr.json
index a6caddb..6f53a50 100644
--- a/extension/locales/tr.json
+++ b/extension/locales/tr.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Bu odada oynatmayı kimin kontrol edebileceğini belirleyin",
   "LABEL_HOST_ONLY_TOGGLE": "Oynatmayı yalnızca ben kontrol edebilirim",
   "NOTICE_HOST_CONTROLS": "Oynatmayı herkes için sunucu kontrol eder.",
+  "NOTICE_COHOST_HINT": "İpucu: aşağıdaki katılımcı listesinde tek tek katılımcılara kontrol verin.",
   "BADGE_HOST": "Sunucu",
   "BADGE_GUEST": "Misafir",
   "BADGE_CONTROLLER": "Kontrolcü",
diff --git a/extension/locales/uk.json b/extension/locales/uk.json
index 6f4466f..9088b9b 100644
--- a/extension/locales/uk.json
+++ b/extension/locales/uk.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "Обмежити, хто може керувати відтворенням у цій кімнаті",
   "LABEL_HOST_ONLY_TOGGLE": "Лише я можу керувати відтворенням",
   "NOTICE_HOST_CONTROLS": "Ведучий керує відтворенням для всіх.",
+  "NOTICE_COHOST_HINT": "Порада: надайте керування окремим учасникам у списку нижче.",
   "BADGE_HOST": "Ведучий",
   "BADGE_GUEST": "Гість",
   "BADGE_CONTROLLER": "Керуючий",
diff --git a/extension/locales/zh.json b/extension/locales/zh.json
index 26247fc..8aba7be 100644
--- a/extension/locales/zh.json
+++ b/extension/locales/zh.json
@@ -48,6 +48,7 @@
   "LABEL_HOST_CONTROL_TOOLTIP": "限制谁可以在此房间中控制播放",
   "LABEL_HOST_ONLY_TOGGLE": "仅我可以控制播放",
   "NOTICE_HOST_CONTROLS": "由主持人为所有人控制播放。",
+  "NOTICE_COHOST_HINT": "提示：在下方的参与者列表中将控制权授予单个参与者。",
   "BADGE_HOST": "主持人",
   "BADGE_GUEST": "访客",
   "BADGE_CONTROLLER": "控制者",
diff --git a/extension/popup.html b/extension/popup.html
index 3d36a4c..c6a50ad 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -402,14 +402,18 @@
             <details style="margin-bottom: 12px; background: var(--card); border: 1px solid #334155; border-radius: 8px; padding: 8px;">
                 <summary style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; cursor: pointer; outline: none;" data-i18n="MANUAL_CONNECT_HEADER">Manual Connect / Advanced</summary>
                 <div style="margin-top: 12px;">
-            <div class="form-group">
-                <label title="Select which KoalaSync server to use" data-i18n="LABEL_SERVER">Server</label>
-                <div style="display:flex; gap:4px; margin-bottom:8px;">
-                    <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_OFFICIAL" data-i18n-title="BTN_SERVER_OFFICIAL_TOOLTIP" title="Use the official reliable server">Official</button>
-                    <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_CUSTOM" data-i18n-title="BTN_SERVER_CUSTOM_TOOLTIP" title="Connect to your own self-hosted server">Custom</button>
+            <!-- Server selection — its own concern, kept visually separate from the room fields. -->
+            <div style="background: var(--bg); border: 1px solid #334155; border-radius: 8px; padding: 10px; margin-bottom: 14px;">
+                <div class="form-group" style="margin-bottom:0;">
+                    <label title="Select which KoalaSync server to use" data-i18n="LABEL_SERVER">Server</label>
+                    <div style="display:flex; gap:4px; margin-bottom:0;">
+                        <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_OFFICIAL" data-i18n-title="BTN_SERVER_OFFICIAL_TOOLTIP" title="Use the official reliable server">Official</button>
+                        <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_CUSTOM" data-i18n-title="BTN_SERVER_CUSTOM_TOOLTIP" title="Connect to your own self-hosted server">Custom</button>
+                    </div>
+                    <input type="text" id="serverUrl" data-i18n-placeholder="PLACEHOLDER_SERVER_URL" placeholder="wss://your-server:3000" style="display:none; margin-top:8px;">
                 </div>
-                <input type="text" id="serverUrl" data-i18n-placeholder="PLACEHOLDER_SERVER_URL" placeholder="wss://your-server:3000" style="display:none;">
             </div>
+            <!-- Room credentials — distinct group below the server picker. -->
             <div class="form-group">
                 <label title="The unique identifier for your sync room" data-i18n="LABEL_ROOM_ID" data-i18n-title="LABEL_ROOM_ID_TOOLTIP">Room ID</label>
                 <input type="text" id="roomId" data-i18n-placeholder="PLACEHOLDER_ROOM_ID" data-i18n-title="PLACEHOLDER_ROOM_ID_TOOLTIP" placeholder="Enter Room ID" title="The unique ID of the room you want to join">
@@ -455,10 +459,14 @@
                     <label style="margin:0;" title="Restrict who can control playback in this room" data-i18n="LABEL_HOST_CONTROL" data-i18n-title="LABEL_HOST_CONTROL_TOOLTIP">Host Control</label>
                     <span id="hostRoleBadge" style="font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:8px; background:var(--accent); color:#fff;"></span>
                 </div>
-                <label id="hostControlToggleRow" style="display:none; align-items:center; gap:8px; margin-top:10px; cursor:pointer; font-size:12px; color:var(--text-muted);">
-                    <input type="checkbox" id="hostControlToggle">
-                    <span data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</span>
-                </label>
+                <div id="hostControlToggleRow" style="display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;">
+                    <span style="font-size:12px; color:var(--text); line-height:1.3;" data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</span>
+                    <label class="toggle-switch" style="flex:none;">
+                        <input type="checkbox" id="hostControlToggle">
+                        <span class="slider"></span>
+                    </label>
+                </div>
+                <div id="hostControlCohostHint" style="display:none; margin-top:10px; padding-top:10px; border-top:1px solid #334155; font-size:11px; color:var(--text-muted); line-height:1.4;" data-i18n="NOTICE_COHOST_HINT">Tip: grant control to individual viewers in the participant list below.</div>
                 <div id="hostControlGuestNote" style="display:none; margin-top:10px; font-size:12px; color:var(--text-muted);" data-i18n="NOTICE_HOST_CONTROLS">The host controls playback for everyone.</div>
             </div>
 
diff --git a/extension/popup.js b/extension/popup.js
index 6a73613..edaef4a 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -46,6 +46,7 @@ const elements = {
     hostControlToggleRow: document.getElementById('hostControlToggleRow'),
     hostControlToggle: document.getElementById('hostControlToggle'),
     hostControlGuestNote: document.getElementById('hostControlGuestNote'),
+    hostControlCohostHint: document.getElementById('hostControlCohostHint'),
     activeRoomId: document.getElementById('activeRoomId'),
     activeServer: document.getElementById('activeServer'),
     peerListSync: document.getElementById('peerListSync'),
@@ -361,6 +362,11 @@ function updateHostControlUI(state) {
     if (elements.hostControlToggleRow) elements.hostControlToggleRow.style.display = amHost ? 'flex' : 'none';
     if (elements.hostControlToggle) elements.hostControlToggle.checked = hostOnly;
     if (elements.hostControlGuestNote) elements.hostControlGuestNote.style.display = (!amController && hostOnly) ? 'block' : 'none';
+    // Owner-only discoverability hint: co-hosting is granted down in the peer list,
+    // which isn't obvious from this card. Only show it when it's actionable — owner,
+    // relay supports co-host, and the room is locked to host-only (the buttons only
+    // render in that mode).
+    if (elements.hostControlCohostHint) elements.hostControlCohostHint.style.display = (amHost && !!s.coHostSupported && hostOnly) ? 'block' : 'none';
 
     // Only a non-controller is locked out of the remote controls.
     hcmGuestLocked = (!amController && hostOnly);
@@ -670,6 +676,11 @@ function updatePeerList(peers) {
 
             header.appendChild(nameSpan);
 
+            // Right-side badges + actions, kept in one group so they sit together
+            // on the right instead of being scattered by the header's space-between.
+            const rightGroup = document.createElement('div');
+            rightGroup.style.cssText = 'display:flex; align-items:center; gap:6px; flex-shrink:0;';
+
             // Volume Icon (Top Right)
             if (p.volume !== undefined && p.volume !== null) {
                 const volIcon = document.createElement('div');
@@ -683,7 +694,7 @@ function updatePeerList(peers) {
                 const you = document.createElement('span');
                 you.style.cssText = 'font-size:10px; color:var(--accent); font-weight:bold;';
                 you.textContent = getMessage('LABEL_YOU') || 'YOU';
-                header.appendChild(you);
+                rightGroup.appendChild(you);
             }
 
             // Host Control Mode: show "Solo" badge for peers watching on their own.
@@ -693,13 +704,14 @@ function updatePeerList(peers) {
                 const soloText = getMessage('BADGE_DESYNCED') || 'Solo';
                 solo.textContent = soloText;
                 solo.title = getMessage('TOOLTIP_PEER_DESYNCED') || soloText;
-                header.appendChild(solo);
+                rightGroup.appendChild(solo);
             }
 
-            // Co-Host: role badges + the owner's promote/demote control. Shown when the
-            // feature is active and either the room is host-only or we're the owner
-            // (so a guest in a normal room sees no role noise).
-            const showRoles = !!hcmOwnerPeerId && (hcmRoomIsHostOnly || hcmAmOwner);
+            // Co-Host: role badges + the owner's promote/demote control. Only meaningful
+            // once the room is locked to host-only — in 'everyone' mode anyone can already
+            // control, so roles are moot and we show nothing (no badge/button noise).
+            // The promote/demote button additionally requires owner privileges (below).
+            const showRoles = !!hcmOwnerPeerId && hcmRoomIsHostOnly;
             if (showRoles) {
                 const isOwner = pId === hcmOwnerPeerId;
                 const isController = !isOwner && hcmControllers.includes(pId);
@@ -707,20 +719,32 @@ function updatePeerList(peers) {
                     const roleBadge = document.createElement('span');
                     roleBadge.style.cssText = 'font-size:10px; color:#fff; background:var(--accent); padding:2px 6px; border-radius:6px; font-weight:600;';
                     roleBadge.textContent = isOwner ? (getMessage('BADGE_HOST') || 'Host') : (getMessage('BADGE_CONTROLLER') || 'Controller');
-                    header.appendChild(roleBadge);
+                    rightGroup.appendChild(roleBadge);
                 }
                 // Owner can promote/demote any non-owner peer.
                 if (hcmAmOwner && hcmCoHostSupported && !isOwner) {
                     const btn = document.createElement('button');
-                    btn.style.cssText = 'font-size:10px; padding:2px 8px; border-radius:6px; cursor:pointer; border:1px solid var(--accent); background:transparent; color:var(--accent); white-space:nowrap;';
-                    btn.textContent = isController ? (getMessage('BTN_REVOKE_CONTROL') || 'Revoke') : (getMessage('BTN_GIVE_CONTROL') || 'Give control');
+                    const revoke = isController;
+                    btn.style.cssText = `font-size:10px; padding:3px 9px; border-radius:6px; cursor:pointer; white-space:nowrap; font-weight:600; transition:background .15s,color .15s; border:1px solid ${revoke ? 'var(--text-muted)' : 'var(--accent)'}; background:transparent; color:${revoke ? 'var(--text-muted)' : 'var(--accent)'};`;
+                    btn.textContent = revoke ? (getMessage('BTN_REVOKE_CONTROL') || 'Revoke') : (getMessage('BTN_GIVE_CONTROL') || 'Give control');
+                    btn.title = revoke ? (getMessage('BTN_REVOKE_CONTROL') || 'Revoke') : (getMessage('BTN_GIVE_CONTROL') || 'Give control');
+                    btn.addEventListener('mouseenter', () => {
+                        btn.style.background = revoke ? 'var(--text-muted)' : 'var(--accent)';
+                        btn.style.color = '#fff';
+                    });
+                    btn.addEventListener('mouseleave', () => {
+                        btn.style.background = 'transparent';
+                        btn.style.color = revoke ? 'var(--text-muted)' : 'var(--accent)';
+                    });
                     btn.addEventListener('click', () => {
                         chrome.runtime.sendMessage({ type: 'SET_PEER_ROLE', peerId: pId, controller: !isController }, () => {});
                     });
-                    header.appendChild(btn);
+                    rightGroup.appendChild(btn);
                 }
             }
 
+            if (rightGroup.childNodes.length) header.appendChild(rightGroup);
+
             peerItem.appendChild(header);
 
             // Media Info
@@ -1273,7 +1297,11 @@ if (elements.langSelector) {
 elements.serverUrl.addEventListener('change', () => {
     let url = elements.serverUrl.value.trim();
     if (url && !url.includes('://')) {
-        url = 'ws://' + url;
+        // Default to secure wss:// — plain ws:// is only valid for a local relay
+        // (and the background rejects/upgrades ws:// for any remote host anyway).
+        const host = url.split('/')[0].split(':')[0].toLowerCase();
+        const isLocal = host === 'localhost' || host === '127.0.0.1';
+        url = (isLocal ? 'ws://' : 'wss://') + url;
         elements.serverUrl.value = url;
         chrome.storage.local.set({ serverUrl: url });
     }
@@ -1390,7 +1418,7 @@ elements.joinBtn.addEventListener('click', async () => {
     }
     if (useCustom && serverUrl) {
         try {
-            const urlToCheck = serverUrl.includes('://') ? serverUrl : 'ws://' + serverUrl;
+            const urlToCheck = serverUrl.includes('://') ? serverUrl : 'wss://' + serverUrl;
             new URL(urlToCheck);
         } catch (_e) {
             showError(getMessage('ERR_INVALID_SERVER_URL'));