feat(ui): move users to channel list with hover volume popup, dedicate main stage to screenshares, add ws ping

public/style.css

@@ -40,6 +40,7 @@ body {
 /* sidebar */
 #sidebar {
   width: 250px; background: var(--bg-1); display: flex; flex-direction: column; flex-shrink: 0;
+  position: relative; z-index: 10;
 }
 #server-name {
   padding: 14px 16px; font-weight: 700; font-size: 15px;
@@ -105,8 +106,8 @@ body {
 #stage.empty #stage-empty { display: grid; }
 #stage:not(.empty) #stage-empty { display: none; }
 
-#screens { display: flex; gap: 12px; flex-wrap: wrap; }
-#screens.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-content: start; }
+#screens { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; min-height: 0; align-items: stretch; }
+#screens.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); align-content: stretch; }
 #screens.multi .screen-card { flex: none; }
 .screen-card.popped {
   min-height: 120px; display: grid; place-items: center;
@@ -122,27 +123,97 @@ body {
   position: relative; background: #000; border-radius: var(--radius); overflow: hidden;
   flex: 1 1 480px; max-width: 100%; box-shadow: 0 8px 24px rgba(0,0,0,.4);
 }
-.screen-card video { width: 100%; display: block; max-height: 62vh; object-fit: contain; }
+.screen-card video { width: 100%; height: 100%; display: block; max-height: 100%; object-fit: contain; }
 .screen-card .label {
   position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.65);
   padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600;
 }
 .screen-card .label .live { color: var(--red); font-weight: 800; margin-right: 5px; }
 
-#tiles { display: flex; gap: 10px; flex-wrap: wrap; }
-.tile {
-  background: var(--bg-1); border-radius: var(--radius); padding: 12px; width: 150px;
-  display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
-  border: 2px solid transparent;
+/* channel user lines */
+.channel-users {
+  margin: 2px 8px 8px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.channel-user-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: var(--text-1);
+  font-size: 13px;
+  cursor: default;
+}
+.channel-user-item:hover {
+  background: var(--bg-3);
+  color: var(--text-0);
+}
+.channel-user-item.speaking .user-line-avatar {
+  box-shadow: 0 0 0 2px var(--green);
+}
+.user-line-avatar {
+  width: 22px;
+  height: 22px;
+  font-size: 11px;
+}
+.user-line-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.user-line-badges {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+}
+.badge-conn {
+  color: var(--yellow);
+  font-weight: bold;
+}
+.badge-mute {
+  font-size: 11px;
+}
+.badge-share {
+  font-size: 11px;
+}
+
+/* hover volume popup */
+.volume-popup {
+  position: absolute;
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--bg-0);
+  border: 1px solid var(--bg-4);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  width: 150px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+  display: none;
+  z-index: 100;
+  pointer-events: auto;
+}
+.channel-user-item:hover .volume-popup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.volume-popup .vol-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-1);
+  white-space: nowrap;
+}
+.volume-popup input[type=range] {
+  width: 100%;
+  accent-color: var(--brand);
 }
-.tile.speaking { border-color: var(--green); }
-.tile .avatar { width: 56px; height: 56px; font-size: 24px; }
-.tile .name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
-.tile .sub { font-size: 11px; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
-.tile .mute-tag { color: var(--red); }
-.tile .share-tag { color: var(--yellow); }
-.tile input[type=range] { width: 100%; accent-color: var(--brand); }
-.tile .connecting { font-size: 11px; color: var(--yellow); }
 
 .avatar {
   width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;