feat: Add user statuses and cards

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

@@ -15,25 +15,33 @@
   }
 
   <!-- User Info -->
-  <div class="flex items-center gap-3">
-    <app-user-avatar
-      [name]="currentUser()?.displayName || '?'"
-      size="sm"
-    />
-    <div class="flex-1 min-w-0">
-      <p class="font-medium text-sm text-foreground truncate">
-        {{ currentUser()?.displayName || 'Unknown' }}
-      </p>
-      @if (showConnectionError() || isConnected()) {
-        <p class="text-xs text-muted-foreground">
-          @if (showConnectionError()) {
-            <span class="text-destructive">Connection Error</span>
-          } @else if (isConnected()) {
-            <span class="text-green-500">Connected</span>
-          }
+  <div class="relative flex items-center gap-3">
+    <button
+      type="button"
+      class="flex items-center gap-3 flex-1 min-w-0 rounded-md px-1 py-0.5 hover:bg-secondary/60 transition-colors cursor-pointer"
+      (click)="toggleProfileCard(); $event.stopPropagation()"
+    >
+      <app-user-avatar
+        [name]="currentUser()?.displayName || '?'"
+        size="sm"
+        [status]="currentUser()?.status"
+        [showStatusBadge]="true"
+      />
+      <div class="flex-1 min-w-0">
+        <p class="font-medium text-sm text-foreground truncate text-left">
+          {{ currentUser()?.displayName || 'Unknown' }}
         </p>
-      }
-    </div>
+        @if (showConnectionError() || isConnected()) {
+          <p class="text-xs text-muted-foreground text-left">
+            @if (showConnectionError()) {
+              <span class="text-destructive">Connection Error</span>
+            } @else if (isConnected()) {
+              <span class="text-green-500">Connected</span>
+            }
+          </p>
+        }
+      </div>
+    </button>
     <div class="flex items-center gap-1">
       <app-debug-console
         launcherVariant="inline"

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/member-ordering, @typescript-eslint/no-unused-vars, complexity */
 import {
   Component,
+  ElementRef,
   inject,
   signal,
   OnInit,
@@ -34,7 +35,8 @@ import { SettingsModalService } from '../../../../core/services/settings-modal.s
 import {
   DebugConsoleComponent,
   ScreenShareQualityDialogComponent,
-  UserAvatarComponent
+  UserAvatarComponent,
+  ProfileCardService
 } from '../../../../shared';
 
 interface AudioDevice {
@@ -75,6 +77,8 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
   private readonly voicePlayback = inject(VoicePlaybackService);
   private readonly store = inject(Store);
   private readonly settingsModal = inject(SettingsModalService);
+  private readonly hostEl = inject(ElementRef);
+  private readonly profileCard = inject(ProfileCardService);
 
   currentUser = this.store.selectSignal(selectCurrentUser);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
@@ -88,6 +92,15 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
   isScreenSharing = this.screenShareService.isScreenSharing;
   showSettings = signal(false);
 
+  toggleProfileCard(): void {
+    const user = this.currentUser();
+
+    if (!user)
+      return;
+
+    this.profileCard.open(this.hostEl.nativeElement, user, { placement: 'above', editable: true });
+  }
+
   inputDevices = signal<AudioDevice[]>([]);
   outputDevices = signal<AudioDevice[]>([]);
   selectedInputDevice = signal<string>('');