feat: Add user statuses and cards

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.ts

@@ -50,7 +50,8 @@ import {
   ContextMenuComponent,
   UserAvatarComponent,
   ConfirmDialogComponent,
-  UserVolumeMenuComponent
+  UserVolumeMenuComponent,
+  ProfileCardService
 } from '../../../shared';
 import {
   Channel,
@@ -101,6 +102,7 @@ export class RoomsSidePanelComponent {
   private voiceSessionService = inject(VoiceSessionFacade);
   private voiceWorkspace = inject(VoiceWorkspaceService);
   private voicePlayback = inject(VoicePlaybackService);
+  private profileCard = inject(ProfileCardService);
   voiceActivity = inject(VoiceActivityService);
 
   readonly panelMode = input<PanelMode>('channels');
@@ -184,6 +186,28 @@ export class RoomsSidePanelComponent {
   draggedVoiceUserId = signal<string | null>(null);
   dragTargetVoiceChannelId = signal<string | null>(null);
 
+  openProfileCard(event: MouseEvent, user: User, editable: boolean): void {
+    event.stopPropagation();
+    const el = event.currentTarget as HTMLElement;
+
+    this.profileCard.open(el, user, { placement: 'left', editable });
+  }
+
+  openProfileCardForMember(event: MouseEvent, member: RoomMember): void {
+    const user: User = {
+      id: member.id,
+      oderId: member.oderId || member.id,
+      username: member.username,
+      displayName: member.displayName,
+      avatarUrl: member.avatarUrl,
+      status: 'disconnected',
+      role: member.role,
+      joinedAt: member.joinedAt
+    };
+
+    this.openProfileCard(event, user, false);
+  }
+
   private roomMemberKey(member: RoomMember): string {
     return member.oderId || member.id;
   }