Rework design part 1

toju-app/src/app/features/shell/title-bar.component.ts

@@ -21,6 +21,9 @@ import {
 import { Router } from '@angular/router';
 import {
   selectCurrentRoom,
+  selectActiveChannelId,
+  selectTextChannels,
+  selectVoiceChannels,
   selectIsSignalServerReconnecting,
   selectSignalServerCompatibilityError
 } from '../../store/rooms/rooms.selectors';
@@ -33,6 +36,7 @@ import { PlatformService } from '../../core/platform';
 import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
 import { LeaveServerDialogComponent } from '../../shared';
 import { Room } from '../../shared-kernel';
+import { VoiceWorkspaceService } from '../../domains/voice-session';
 
 @Component({
   selector: 'app-title-bar',
@@ -63,6 +67,7 @@ export class TitleBarComponent {
   private router = inject(Router);
   private webrtc = inject(RealtimeSessionFacade);
   private platform = inject(PlatformService);
+  private voiceWorkspace = inject(VoiceWorkspaceService);
 
   private getWindowControlsApi() {
     return this.electronBridge.getApi();
@@ -78,11 +83,62 @@ export class TitleBarComponent {
   isReconnecting = computed(() => !this.webrtc.isConnected() && this.webrtc.hasEverConnected());
   isAuthed = computed(() => !!this.currentUser());
   currentRoom = this.store.selectSignal(selectCurrentRoom);
+  activeChannelId = this.store.selectSignal(selectActiveChannelId);
+  textChannels = this.store.selectSignal(selectTextChannels);
+  voiceChannels = this.store.selectSignal(selectVoiceChannels);
+  isVoiceWorkspaceExpanded = this.voiceWorkspace.isExpanded;
   isSignalServerReconnecting = this.store.selectSignal(selectIsSignalServerReconnecting);
   signalServerCompatibilityError = this.store.selectSignal(selectSignalServerCompatibilityError);
   inRoom = computed(() => !!this.currentRoom());
   roomName = computed(() => this.currentRoom()?.name || '');
-  roomDescription = computed(() => this.currentRoom()?.description || '');
+  activeTextChannelName = computed(() => {
+    const textChannels = this.textChannels();
+
+    if (textChannels.length === 0) {
+      return 'No text channels';
+    }
+
+    const id = this.activeChannelId();
+    const activeChannel = textChannels.find((channel) => channel.id === id) ?? textChannels[0];
+
+    return activeChannel ? activeChannel.name : id;
+  });
+  connectedVoiceChannelName = computed(() => {
+    const voiceChannelId = this.currentUser()?.voiceState?.roomId;
+    const voiceChannel = this.voiceChannels().find((channel) => channel.id === voiceChannelId);
+
+    return voiceChannel?.name || 'Voice Lounge';
+  });
+  roomContextTitle = computed(() => {
+    const room = this.currentRoom();
+
+    if (!room) {
+      return '';
+    }
+
+    if (this.isVoiceWorkspaceExpanded()) {
+      return `${room.name} / ${this.connectedVoiceChannelName()}`;
+    }
+
+    if (this.textChannels().length === 0) {
+      return room.name;
+    }
+
+    return `${room.name} / #${this.activeTextChannelName()}`;
+  });
+  roomContextMeta = computed(() => {
+    if (!this.currentRoom()) {
+      return '';
+    }
+
+    const parts = [`${this.textChannels().length} text`];
+
+    if (this.voiceChannels().length > 0) {
+      parts.push(`${this.voiceChannels().length} voice`);
+    }
+
+    return parts.join(' | ');
+  });
   showRoomCompatibilityNotice = computed(() =>
     this.inRoom() && !!this.signalServerCompatibilityError()
   );