Fix bugs and clean noise reduction

src/app/features/room/rooms-side-panel/rooms-side-panel.component.html

@@ -33,7 +33,7 @@
           class="w-4 h-4"
         />
         <span>Users</span>
-        <span class="text-xs px-1.5 py-0.5 rounded-full bg-primary/15 text-primary">{{ onlineUsers().length }}</span>
+        <span class="text-xs px-1.5 py-0.5 rounded-full bg-primary/15 text-primary">{{ knownUserCount() }}</span>
       </button>
     </div>
   </div>
@@ -149,7 +149,10 @@
               @if (voiceUsersInRoom(ch.id).length > 0) {
                 <div class="ml-5 mt-1 space-y-1">
                   @for (u of voiceUsersInRoom(ch.id); track u.id) {
-                    <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40">
+                    <div
+                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40"
+                      (contextmenu)="openVoiceUserVolumeMenu($event, u)"
+                    >
                       <app-user-avatar
                         [name]="u.displayName"
                         [avatarUrl]="u.avatarUrl"
@@ -187,6 +190,13 @@
                           class="w-4 h-4 text-muted-foreground"
                         />
                       }
+                      @if (isUserLocallyMuted(u)) {
+                        <ng-icon
+                          name="lucideVolumeX"
+                          class="w-4 h-4 text-destructive"
+                          title="Muted by you"
+                        />
+                      }
                     </div>
                   }
                 </div>
@@ -300,8 +310,42 @@
         </div>
       }
 
+      <!-- Offline Users -->
+      @if (offlineRoomMembers().length > 0) {
+        <div class="mb-4">
+          <h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">Offline - {{ offlineRoomMembers().length }}</h4>
+          <div class="space-y-1">
+            @for (member of offlineRoomMembers(); track member.oderId || member.id) {
+              <div class="flex items-center gap-2 px-2 py-1.5 rounded opacity-80">
+                <div class="relative">
+                  <app-user-avatar
+                    [name]="member.displayName"
+                    [avatarUrl]="member.avatarUrl"
+                    size="sm"
+                  />
+                  <span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-gray-500 ring-2 ring-card"></span>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-1.5">
+                    <p class="text-sm text-foreground/80 truncate">{{ member.displayName }}</p>
+                    @if (member.role === 'host') {
+                      <span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1 py-0.5 rounded font-medium">Owner</span>
+                    } @else if (member.role === 'admin') {
+                      <span class="text-[10px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded font-medium">Admin</span>
+                    } @else if (member.role === 'moderator') {
+                      <span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded font-medium">Mod</span>
+                    }
+                  </div>
+                  <p class="text-[10px] text-muted-foreground">Offline</p>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
       <!-- No other users message -->
-      @if (onlineUsersFiltered().length === 0) {
+      @if (onlineUsersFiltered().length === 0 && offlineRoomMembers().length === 0) {
         <div class="text-center py-4 text-muted-foreground">
           <p class="text-sm">No other users in this server</p>
         </div>
@@ -406,6 +450,17 @@
   </app-context-menu>
 }
 
+<!-- Per-user volume context menu -->
+@if (showVolumeMenu()) {
+  <app-user-volume-menu
+    [x]="volumeMenuX()"
+    [y]="volumeMenuY()"
+    [peerId]="volumeMenuPeerId()"
+    [displayName]="volumeMenuDisplayName()"
+    (closed)="showVolumeMenu.set(false)"
+  />
+}
+
 <!-- Create channel dialog -->
 @if (showCreateChannelDialog()) {
   <app-confirm-dialog