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"