Big commit

src/app/features/room/chat-room/chat-room.component.html

@@ -1,9 +1,23 @@
 <div class="h-full flex flex-col bg-background">
   @if (currentRoom()) {
+    <!-- Channel header bar -->
+    <div class="h-12 flex items-center gap-2 px-4 border-b border-border bg-card flex-shrink-0">
+      <span class="text-muted-foreground text-lg">#</span>
+      <span class="font-medium text-foreground text-sm">{{ activeChannelName }}</span>
+      <div class="flex-1"></div>
+      @if (isAdmin()) {
+        <button
+          (click)="toggleAdminPanel()"
+          class="p-1.5 rounded hover:bg-secondary transition-colors text-muted-foreground hover:text-foreground"
+          title="Server Settings"
+        >
+          <ng-icon name="lucideSettings" class="w-4 h-4" />
+        </button>
+      }
+    </div>
+
     <!-- Main Content -->
     <div class="flex-1 flex overflow-hidden">
-      <!-- Left rail is global; chat area fills remaining space -->
-
       <!-- Chat Area -->
       <main class="flex-1 flex flex-col min-w-0">
         <!-- Screen Share Viewer -->
@@ -15,15 +29,24 @@
         </div>
       </main>
 
+      <!-- Admin Panel (slide-over) -->
+      @if (showAdminPanel() && isAdmin()) {
+        <aside class="w-80 flex-shrink-0 border-l border-border overflow-y-auto">
+          <div class="flex items-center justify-between px-4 py-2 border-b border-border bg-card">
+            <span class="text-sm font-medium text-foreground">Server Settings</span>
+            <button (click)="toggleAdminPanel()" class="p-1 rounded hover:bg-secondary text-muted-foreground hover:text-foreground">
+              <ng-icon name="lucideX" class="w-4 h-4" />
+            </button>
+          </div>
+          <app-admin-panel />
+        </aside>
+      }
+
       <!-- Sidebar always visible -->
       <aside class="w-80 flex-shrink-0 border-l border-border">
         <app-rooms-side-panel class="h-full" />
       </aside>
     </div>
-
-    <!-- Voice Controls moved to sidebar bottom -->
-
-    <!-- Mobile overlay removed; sidebar remains visible by default -->
   } @else {
     <!-- No Room Selected -->
     <div class="flex-1 flex items-center justify-center">