refactor: Clean lint errors and organise files

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

@@ -182,15 +182,7 @@
                         [name]="u.displayName"
                         [avatarUrl]="u.avatarUrl"
                         size="xs"
-                        [ringClass]="
-                          u.voiceState?.isDeafened
-                            ? 'ring-2 ring-red-500'
-                            : u.voiceState?.isMuted
-                              ? 'ring-2 ring-yellow-500'
-                              : voiceActivity.isSpeaking(u.oderId || u.id)()
-                                ? 'ring-2 ring-green-400 shadow-[0_0_8px_2px_rgba(74,222,128,0.6)]'
-                                : 'ring-2 ring-green-500/40'
-                        "
+                        [ringClass]="getVoiceUserRingClass(u)"
                       />
                       <span class="text-sm text-foreground/80 truncate flex-1">{{ u.displayName }}</span>
                       <!-- Ping latency indicator -->
@@ -246,7 +238,11 @@
           <h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">You</h4>
           <div
             class="flex items-center gap-2 rounded-md bg-secondary/60 px-3 py-2 hover:bg-secondary/80 transition-colors cursor-pointer"
+            role="button"
+            tabindex="0"
             (click)="openProfileCard($event, currentUser()!, true); $event.stopPropagation()"
+            (keydown.enter)="openProfileCard($event, currentUser()!, true); $event.stopPropagation()"
+            (keydown.space)="openProfileCard($event, currentUser()!, true); $event.preventDefault(); $event.stopPropagation()"
           >
             <app-user-avatar
               [name]="currentUser()?.displayName || '?'"
@@ -293,8 +289,12 @@
             @for (user of onlineRoomUsers(); track user.id) {
               <div
                 class="group/user flex items-center gap-2 rounded-md px-3 py-2 transition-colors hover:bg-secondary/50 cursor-pointer"
+                role="button"
+                tabindex="0"
                 (contextmenu)="openUserContextMenu($event, user)"
                 (click)="openProfileCard($event, user, false); $event.stopPropagation()"
+                (keydown.enter)="openProfileCard($event, user, false); $event.stopPropagation()"
+                (keydown.space)="openProfileCard($event, user, false); $event.preventDefault(); $event.stopPropagation()"
               >
                 <app-user-avatar
                   [name]="user.displayName"
@@ -352,7 +352,11 @@
             @for (member of offlineRoomMembers(); track member.oderId || member.id) {
               <div
                 class="flex items-center gap-2 rounded-md px-3 py-2 opacity-80 hover:bg-secondary/30 transition-colors cursor-pointer"
+                role="button"
+                tabindex="0"
                 (click)="openProfileCardForMember($event, member); $event.stopPropagation()"
+                (keydown.enter)="openProfileCardForMember($event, member); $event.stopPropagation()"
+                (keydown.space)="openProfileCardForMember($event, member); $event.preventDefault(); $event.stopPropagation()"
               >
                 <app-user-avatar
                   [name]="member.displayName"

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

@@ -103,7 +103,7 @@ export class RoomsSidePanelComponent {
   private voiceWorkspace = inject(VoiceWorkspaceService);
   private voicePlayback = inject(VoicePlaybackService);
   private profileCard = inject(ProfileCardService);
-  voiceActivity = inject(VoiceActivityService);
+  private readonly voiceActivity = inject(VoiceActivityService);
 
   readonly panelMode = input<PanelMode>('channels');
   readonly showVoiceControls = input(true);
@@ -186,14 +186,14 @@ export class RoomsSidePanelComponent {
   draggedVoiceUserId = signal<string | null>(null);
   dragTargetVoiceChannelId = signal<string | null>(null);
 
-  openProfileCard(event: MouseEvent, user: User, editable: boolean): void {
+  openProfileCard(event: Event, 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 {
+  openProfileCardForMember(event: Event, member: RoomMember): void {
     const user: User = {
       id: member.id,
       oderId: member.oderId || member.id,
@@ -886,6 +886,22 @@ export class RoomsSidePanelComponent {
     return this.isUserSharing(userId) || this.isUserOnCamera(userId);
   }
 
+  getVoiceUserRingClass(user: User): string {
+    if (user.voiceState?.isDeafened) {
+      return 'ring-2 ring-red-500';
+    }
+
+    if (user.voiceState?.isMuted) {
+      return 'ring-2 ring-yellow-500';
+    }
+
+    if (this.isVoiceUserSpeaking(user)) {
+      return 'ring-2 ring-green-400 shadow-[0_0_8px_2px_rgba(74,222,128,0.6)]';
+    }
+
+    return 'ring-2 ring-green-500/40';
+  }
+
   getUserLiveIconName(userId: string): string {
     return this.isUserSharing(userId) ? 'lucideMonitor' : 'lucideVideo';
   }
@@ -981,6 +997,12 @@ export class RoomsSidePanelComponent {
     return 'bg-red-500';
   }
 
+  private isVoiceUserSpeaking(user: User): boolean {
+    const userKey = user.oderId || user.id;
+
+    return !!userKey && this.voiceActivity.speakingMap().get(userKey) === true;
+  }
+
   private findKnownUser(userId: string): User | null {
     const current = this.currentUser();