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"