Allow multiple signal servers (might need rollback)

src/app/features/shell/title-bar.component.html

@@ -13,6 +13,12 @@
       />
       <span class="text-sm font-semibold text-foreground truncate">{{ roomName() }}</span>
 
+      @if (showRoomCompatibilityNotice()) {
+        <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
+          {{ signalServerCompatibilityError() }}
+        </span>
+      }
+
       @if (showRoomReconnectNotice()) {
         <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
           <ng-icon
@@ -31,9 +37,11 @@
     } @else {
       <div class="flex items-center gap-2 min-w-0">
         <span class="text-sm text-muted-foreground truncate">{{ username() }} | {{ serverName() }}</span>
-        @if (isReconnecting()) {
-          <span class="text-xs px-2 py-0.5 rounded bg-destructive/15 text-destructive">Reconnecting…</span>
-        }
+        <span
+          class="text-xs px-2 py-0.5 rounded bg-destructive/15 text-destructive"
+          [class.hidden]="!isReconnecting()"
+          >Reconnecting…</span
+        >
       </div>
     }
   </div>
@@ -41,16 +49,15 @@
     class="flex items-center gap-2"
     style="-webkit-app-region: no-drag"
   >
-    @if (!isAuthed()) {
-      <button
-        type="button"
-        class="px-3 h-8 grid place-items-center hover:bg-secondary rounded text-sm text-foreground"
-        (click)="goLogin()"
-        title="Login"
-      >
-        Login
-      </button>
-    }
+    <button
+      type="button"
+      class="px-3 h-8 grid place-items-center hover:bg-secondary rounded text-sm text-foreground"
+      [class.hidden]="isAuthed()"
+      (click)="goLogin()"
+      title="Login"
+    >
+      Login
+    </button>
 
     <button
       type="button"
@@ -87,11 +94,12 @@
             Leave Server
           </button>
         }
-        @if (inviteStatus()) {
-          <div class="border-t border-border px-3 py-2 text-xs leading-5 text-muted-foreground">
-            {{ inviteStatus() }}
-          </div>
-        }
+        <div
+          class="border-t border-border px-3 py-2 text-xs leading-5 text-muted-foreground"
+          [class.hidden]="!inviteStatus()"
+        >
+          {{ inviteStatus() }}
+        </div>
         <div class="border-t border-border"></div>
         <button
           type="button"

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

@@ -19,7 +19,11 @@ import {
   lucideRefreshCw
 } from '@ng-icons/lucide';
 import { Router } from '@angular/router';
-import { selectCurrentRoom, selectIsSignalServerReconnecting } from '../../store/rooms/rooms.selectors';
+import {
+  selectCurrentRoom,
+  selectIsSignalServerReconnecting,
+  selectSignalServerCompatibilityError
+} from '../../store/rooms/rooms.selectors';
 import { RoomsActions } from '../../store/rooms/rooms.actions';
 import { selectCurrentUser } from '../../store/users/users.selectors';
 import { ServerDirectoryService } from '../../core/services/server-directory.service';
@@ -83,11 +87,17 @@ export class TitleBarComponent {
   isAuthed = computed(() => !!this.currentUser());
   currentRoom = this.store.selectSignal(selectCurrentRoom);
   isSignalServerReconnecting = this.store.selectSignal(selectIsSignalServerReconnecting);
+  signalServerCompatibilityError = this.store.selectSignal(selectSignalServerCompatibilityError);
   inRoom = computed(() => !!this.currentRoom());
   roomName = computed(() => this.currentRoom()?.name || '');
   roomDescription = computed(() => this.currentRoom()?.description || '');
+  showRoomCompatibilityNotice = computed(() =>
+    this.inRoom() && !!this.signalServerCompatibilityError()
+  );
   showRoomReconnectNotice = computed(() =>
-    this.inRoom() && (
+    this.inRoom()
+    && !this.signalServerCompatibilityError()
+    && (
       this.isSignalServerReconnecting()
       || this.webrtc.shouldShowConnectionError()
       || this.isReconnecting()