test: Add 8 people voice tests

toju-app/src/app/domains/voice-connection/application/facades/voice-connection.facade.ts

@@ -53,6 +53,14 @@ export class VoiceConnectionFacade {
     return this.realtime.getRawMicStream();
   }
 
+  reportConnectionError(message: string): void {
+    this.realtime.reportConnectionError(message);
+  }
+
+  clearConnectionError(): void {
+    this.realtime.clearConnectionError();
+  }
+
   async enableVoice(): Promise<MediaStream> {
     return await this.realtime.enableVoice();
   }

toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.ts

@@ -235,8 +235,15 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
       this.voicePlayback.playPendingStreams(this.playbackOptions());
 
       // Persist settings after successful connection
+      this.webrtcService.clearConnectionError();
       this.saveSettings();
-    } catch (_error) {}
+    } catch (error) {
+      const message = error instanceof Error
+        ? error.message
+        : 'Failed to connect voice session.';
+
+      this.webrtcService.reportConnectionError(message);
+    }
   }
 
   // Retry connection when there's a connection error

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

@@ -61,6 +61,8 @@
               [class.hover:text-foreground/80]="activeChannelId() !== ch.id"
               (click)="selectTextChannel(ch.id)"
               (contextmenu)="openChannelContextMenu($event, ch)"
+              data-channel-type="text"
+              [attr.data-channel-name]="ch.name"
             >
               <span class="text-muted-foreground text-base">#</span>
               @if (renamingChannelId() === ch.id) {
@@ -129,6 +131,8 @@
                 [class.bg-secondary]="isCurrentRoom(ch.id)"
                 [disabled]="!voiceEnabled()"
                 [title]="isCurrentRoom(ch.id) ? 'Open stream workspace' : 'Join voice channel'"
+                data-channel-type="voice"
+                [attr.data-channel-name]="ch.name"
               >
                 <span class="flex items-center gap-2 text-foreground/80">
                   <ng-icon

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.ts

@@ -559,23 +559,32 @@ export class RoomsSidePanelComponent {
     const current = this.currentUser();
 
     if (this.openExistingVoiceWorkspace(room, current ?? null, roomId)) {
+      this.voiceConnection.clearConnectionError();
       return;
     }
 
-    if (!room || !this.canJoinRequestedVoiceRoom(room, current ?? null, roomId)) {
+    if (!room) {
+      this.voiceConnection.reportConnectionError('No active room selected for voice join.');
+      return;
+    }
+
+    if (!this.canJoinRequestedVoiceRoom(room, current ?? null, roomId)) {
+      this.voiceConnection.reportConnectionError('You do not have permission to join this voice channel.');
       return;
     }
 
     if (!this.prepareCrossServerVoiceJoin(room, current ?? null)) {
+      this.voiceConnection.reportConnectionError('Disconnect from the current voice server before joining a different server.');
       return;
     }
 
     this.enableVoiceForJoin(room, current ?? null, roomId)
       .then(() => this.onVoiceJoinSucceeded(roomId, room, current ?? null))
-      .catch(() => undefined);
+      .catch((error) => this.handleVoiceJoinFailure(error));
   }
 
   private onVoiceJoinSucceeded(roomId: string, room: Room, current: User | null): void {
+    this.voiceConnection.clearConnectionError();
     this.updateVoiceStateStore(roomId, room, current);
     this.trackCurrentUserMic();
     this.startVoiceHeartbeat(roomId, room);
@@ -583,6 +592,14 @@ export class RoomsSidePanelComponent {
     this.startVoiceSession(roomId, room);
   }
 
+  private handleVoiceJoinFailure(error: unknown): void {
+    const message = error instanceof Error
+      ? error.message
+      : 'Failed to join voice channel.';
+
+    this.voiceConnection.reportConnectionError(message);
+  }
+
   private trackCurrentUserMic(): void {
     const userId = this.currentUser()?.oderId || this.currentUser()?.id;
     const micStream = this.voiceConnection.getRawMicStream();

toju-app/src/app/infrastructure/realtime/realtime-session.service.ts

@@ -492,6 +492,14 @@ export class WebRTCService implements OnDestroy {
     return this.peerMediaFacade.getRawMicStream();
   }
 
+  reportConnectionError(message: string): void {
+    this.state.setConnectionError(message);
+  }
+
+  clearConnectionError(): void {
+    this.state.clearConnectionError();
+  }
+
   /**
    * Request microphone access and start sending audio to all peers.
    *

toju-app/src/app/infrastructure/realtime/state/webrtc-state-controller.ts

@@ -120,6 +120,16 @@ export class WebRtcStateController {
     this._isNoiseReductionEnabled.set(enabled);
   }
 
+  setConnectionError(message: string | null): void {
+    this._hasConnectionError.set(!!message);
+    this._connectionErrorMessage.set(message);
+  }
+
+  clearConnectionError(): void {
+    this._hasConnectionError.set(false);
+    this._connectionErrorMessage.set(null);
+  }
+
   setConnectedPeers(peers: string[]): void {
     this._connectedPeers.set(peers);
   }

toju-app/src/app/shared/components/profile-card/profile-card.component.html

@@ -44,7 +44,6 @@
             <input
               type="text"
               class="w-full rounded-md border border-border bg-background/70 px-2 py-1.5 text-base font-semibold text-foreground outline-none focus:border-primary/70"
-             
               [value]="displayNameDraft()"
               (input)="onDisplayNameInput($event)"
               (blur)="finishEdit('displayName')"
@@ -67,7 +66,6 @@
             <textarea
               rows="3"
               class="w-full resize-none rounded-md border border-border bg-background/70 px-2 py-2 text-sm leading-5 text-foreground outline-none focus:border-primary/70"
-             
               [value]="descriptionDraft()"
               placeholder="Add a description"
               (input)="onDescriptionInput($event)"