Refactor and code designing

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

@@ -126,25 +126,12 @@
                 <div class="ml-5 mt-1 space-y-1">
                   @for (u of voiceUsersInRoom(ch.id); track u.id) {
                     <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40">
-                      @if (u.avatarUrl) {
-                        <img
-                          [src]="u.avatarUrl"
-                          alt=""
-                          class="w-7 h-7 rounded-full ring-2 object-cover"
-                          [class.ring-green-500]="!u.voiceState?.isMuted && !u.voiceState?.isDeafened"
-                          [class.ring-yellow-500]="u.voiceState?.isMuted && !u.voiceState?.isDeafened"
-                          [class.ring-red-500]="u.voiceState?.isDeafened"
-                        />
-                      } @else {
-                        <div
-                          class="w-7 h-7 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xs font-medium ring-2"
-                          [class.ring-green-500]="!u.voiceState?.isMuted && !u.voiceState?.isDeafened"
-                          [class.ring-yellow-500]="u.voiceState?.isMuted && !u.voiceState?.isDeafened"
-                          [class.ring-red-500]="u.voiceState?.isDeafened"
-                        >
-                          {{ u.displayName.charAt(0).toUpperCase() }}
-                        </div>
-                      }
+                      <app-user-avatar
+                        [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' : 'ring-2 ring-green-500'"
+                      />
                       <span class="text-sm text-foreground/80 truncate flex-1">{{ u.displayName }}</span>
                       @if (u.screenShareState?.isSharing || isUserSharing(u.id)) {
                         <button
@@ -177,13 +164,7 @@
           <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 px-2 py-1.5 rounded bg-secondary/30">
             <div class="relative">
-              @if (currentUser()?.avatarUrl) {
-                <img [src]="currentUser()?.avatarUrl" alt="" class="w-8 h-8 rounded-full object-cover" />
-              } @else {
-                <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary text-sm font-medium">
-                  {{ currentUser()?.displayName?.charAt(0)?.toUpperCase() || '?' }}
-                </div>
-              }
+              <app-user-avatar [name]="currentUser()?.displayName || '?'" [avatarUrl]="currentUser()?.avatarUrl" size="sm" />
               <span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 ring-2 ring-card"></span>
             </div>
             <div class="flex-1 min-w-0">
@@ -220,13 +201,7 @@
                 (contextmenu)="openUserContextMenu($event, user)"
               >
                 <div class="relative">
-                  @if (user.avatarUrl) {
-                    <img [src]="user.avatarUrl" alt="" class="w-8 h-8 rounded-full object-cover" />
-                  } @else {
-                    <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary text-sm font-medium">
-                      {{ user.displayName.charAt(0).toUpperCase() }}
-                    </div>
-                  }
+                  <app-user-avatar [name]="user.displayName" [avatarUrl]="user.avatarUrl" size="sm" />
                   <span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 ring-2 ring-card"></span>
                 </div>
                 <div class="flex-1 min-w-0">
@@ -283,77 +258,53 @@
 
 <!-- Channel context menu -->
 @if (showChannelMenu()) {
-  <div class="fixed inset-0 z-40" (click)="closeChannelMenu()"></div>
-  <div class="fixed z-50 bg-card border border-border rounded-lg shadow-lg w-44 py-1" [style.left.px]="channelMenuX()" [style.top.px]="channelMenuY()">
-    <button (click)="resyncMessages()" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-      Resync Messages
-    </button>
+  <app-context-menu [x]="channelMenuX()" [y]="channelMenuY()" (closed)="closeChannelMenu()" [width]="'w-44'">
+    <button (click)="resyncMessages()" class="context-menu-item">Resync Messages</button>
     @if (canManageChannels()) {
-      <div class="border-t border-border my-1"></div>
-      <button (click)="startRename()" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-        Rename Channel
-      </button>
-      <button (click)="deleteChannel()" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-destructive">
-        Delete Channel
-      </button>
+      <div class="context-menu-divider"></div>
+      <button (click)="startRename()" class="context-menu-item">Rename Channel</button>
+      <button (click)="deleteChannel()" class="context-menu-item-danger">Delete Channel</button>
     }
-  </div>
+  </app-context-menu>
 }
 
 <!-- User context menu (kick / role management) -->
 @if (showUserMenu()) {
-  <div class="fixed inset-0 z-40" (click)="closeUserMenu()"></div>
-  <div class="fixed z-50 bg-card border border-border rounded-lg shadow-lg w-48 py-1" [style.left.px]="userMenuX()" [style.top.px]="userMenuY()">
+  <app-context-menu [x]="userMenuX()" [y]="userMenuY()" (closed)="closeUserMenu()">
     @if (isAdmin()) {
-      <!-- Role management -->
       @if (contextMenuUser()?.role === 'member') {
-        <button (click)="changeUserRole('moderator')" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-          Promote to Moderator
-        </button>
-        <button (click)="changeUserRole('admin')" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-          Promote to Admin
-        </button>
+        <button (click)="changeUserRole('moderator')" class="context-menu-item">Promote to Moderator</button>
+        <button (click)="changeUserRole('admin')" class="context-menu-item">Promote to Admin</button>
       }
       @if (contextMenuUser()?.role === 'moderator') {
-        <button (click)="changeUserRole('admin')" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-          Promote to Admin
-        </button>
-        <button (click)="changeUserRole('member')" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-          Demote to Member
-        </button>
+        <button (click)="changeUserRole('admin')" class="context-menu-item">Promote to Admin</button>
+        <button (click)="changeUserRole('member')" class="context-menu-item">Demote to Member</button>
       }
       @if (contextMenuUser()?.role === 'admin') {
-        <button (click)="changeUserRole('member')" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-foreground">
-          Demote to Member
-        </button>
+        <button (click)="changeUserRole('member')" class="context-menu-item">Demote to Member</button>
       }
-      <div class="border-t border-border my-1"></div>
-      <button (click)="kickUserAction()" class="w-full text-left px-3 py-1.5 text-sm hover:bg-secondary transition-colors text-destructive">
-        Kick User
-      </button>
+      <div class="context-menu-divider"></div>
+      <button (click)="kickUserAction()" class="context-menu-item-danger">Kick User</button>
     } @else {
-      <div class="px-3 py-1.5 text-sm text-muted-foreground">No actions available</div>
+      <div class="context-menu-empty">No actions available</div>
     }
-  </div>
+  </app-context-menu>
 }
 
 <!-- Create channel dialog -->
 @if (showCreateChannelDialog()) {
-  <div class="fixed inset-0 z-40 bg-black/30" (click)="cancelCreateChannel()"></div>
-  <div class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg w-[320px]">
-    <div class="p-4">
-      <h4 class="font-semibold text-foreground mb-3">Create {{ createChannelType() === 'text' ? 'Text' : 'Voice' }} Channel</h4>
-      <input
-        type="text"
-        [(ngModel)]="newChannelName"
-        placeholder="Channel name"
-        class="w-full px-3 py-2 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
-        (keydown.enter)="confirmCreateChannel()"
-      />
-    </div>
-    <div class="flex gap-2 p-3 border-t border-border">
-      <button (click)="cancelCreateChannel()" class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm">Cancel</button>
-      <button (click)="confirmCreateChannel()" class="flex-1 px-3 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm">Create</button>
-    </div>
-  </div>
+  <app-confirm-dialog
+    [title]="'Create ' + (createChannelType() === 'text' ? 'Text' : 'Voice') + ' Channel'"
+    confirmLabel="Create"
+    (confirmed)="confirmCreateChannel()"
+    (cancelled)="cancelCreateChannel()"
+  >
+    <input
+      type="text"
+      [(ngModel)]="newChannelName"
+      placeholder="Channel name"
+      class="w-full px-3 py-2 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
+      (keydown.enter)="confirmCreateChannel()"
+    />
+  </app-confirm-dialog>
 }