Add seperation of voice channels, creation of new ones, and move around users

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

@@ -116,7 +116,15 @@
         }
         <div class="space-y-1">
           @for (ch of voiceChannels(); track ch.id) {
-            <div>
+            <div
+              class="rounded-md transition-colors"
+              [class.bg-primary/10]="dragTargetVoiceChannelId() === ch.id"
+              [class.ring-1]="dragTargetVoiceChannelId() === ch.id"
+              [class.ring-primary/40]="dragTargetVoiceChannelId() === ch.id"
+              (dragover)="onVoiceChannelDragOver($event, ch.id)"
+              (dragleave)="onVoiceChannelDragLeave(ch.id)"
+              (drop)="onVoiceChannelDrop($event, ch.id)"
+            >
               <button
                 class="w-full px-2 py-1.5 text-sm rounded hover:bg-secondary/60 flex items-center justify-between text-left transition-colors"
                 (click)="joinVoice(ch.id)"
@@ -163,6 +171,11 @@
                   @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"
+                      [class.cursor-pointer]="canDragVoiceUser(u)"
+                      [class.opacity-60]="draggedVoiceUserId() === (u.id || u.oderId)"
+                      [draggable]="canDragVoiceUser(u)"
+                      (dragstart)="onVoiceUserDragStart($event, u)"
+                      (dragend)="onVoiceUserDragEnd()"
                       (contextmenu)="openVoiceUserVolumeMenu($event, u)"
                     >
                       <app-user-avatar