feat: Add user statuses and cards

toju-app/src/app/features/servers/servers-rail.component.html

@@ -78,6 +78,20 @@
       </div>
     }
   </div>
+
+  <div
+    class="grid w-full overflow-hidden duration-200 ease-out motion-reduce:transition-none"
+    style="transition-property: grid-template-rows, opacity"
+    [style.gridTemplateRows]="isOnSearch() ? '1fr' : '0fr'"
+    [style.opacity]="isOnSearch() ? '1' : '0'"
+    [style.visibility]="isOnSearch() ? 'visible' : 'hidden'"
+    [class.pointer-events-none]="!isOnSearch()"
+    [attr.aria-hidden]="isOnSearch() ? null : 'true'"
+  >
+    <div class="overflow-hidden">
+      <app-user-bar />
+    </div>
+  </div>
 </nav>
 
 <!-- Context menu -->

toju-app/src/app/features/servers/servers-rail.component.ts

@@ -7,24 +7,27 @@ import {
   inject,
   signal
 } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Store } from '@ngrx/store';
-import { Router } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucidePlus } from '@ng-icons/lucide';
 import {
   EMPTY,
   Subject,
   catchError,
+  filter,
   firstValueFrom,
   from,
+  map,
   switchMap,
   tap
 } from 'rxjs';
 
 import { Room, User } from '../../shared-kernel';
+import { UserBarComponent } from '../../domains/authentication/feature/user-bar/user-bar.component';
 import { VoiceSessionFacade } from '../../domains/voice-session';
 import { selectSavedRooms, selectCurrentRoom } from '../../store/rooms/rooms.selectors';
 import { selectCurrentUser, selectOnlineUsers } from '../../store/users/users.selectors';
@@ -49,7 +52,8 @@ import {
     ConfirmDialogComponent,
     ContextMenuComponent,
     LeaveServerDialogComponent,
-    NgOptimizedImage
+    NgOptimizedImage,
+    UserBarComponent
   ],
   viewProviders: [provideIcons({ lucidePlus })],
   templateUrl: './servers-rail.component.html'
@@ -75,6 +79,13 @@ export class ServersRailComponent {
   currentUser = this.store.selectSignal(selectCurrentUser);
   onlineUsers = this.store.selectSignal(selectOnlineUsers);
   bannedRoomLookup = signal<Record<string, boolean>>({});
+  isOnSearch = toSignal(
+    this.router.events.pipe(
+      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      map((e) => e.urlAfterRedirects.startsWith('/search'))
+    ),
+    { initialValue: this.router.url.startsWith('/search') }
+  );
   bannedServerName = signal('');
   showBannedDialog = signal(false);
   showPasswordDialog = signal(false);