Rework design part 1

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

@@ -1,28 +1,16 @@
-<div class="h-full flex flex-col bg-background">
+<div class="flex h-full flex-col bg-background">
   @if (currentRoom()) {
-    <!-- Channel header bar -->
-    @if (!isVoiceWorkspaceExpanded()) {
-      <div class="h-12 flex items-center gap-2 px-4 border-b border-border bg-card flex-shrink-0">
-        <ng-icon
-          [name]="isVoiceWorkspaceExpanded() ? 'lucideMonitor' : 'lucideHash'"
-          class="w-4 h-4 text-muted-foreground"
-        />
-        <span class="font-medium text-foreground text-sm">{{ headerTitle() }}</span>
-
-        @if (isVoiceWorkspaceExpanded()) {
-          <span class="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-primary">
-            Voice streams
-          </span>
-        }
-
-        <div class="flex-1"></div>
-      </div>
-    }
-
     <!-- Main Content -->
-    <div class="flex-1 flex overflow-hidden">
+    <div class="flex min-h-0 flex-1 overflow-hidden">
+      <aside class="flex min-h-0 w-[17rem] shrink-0 overflow-hidden border-r border-border bg-card">
+        <app-rooms-side-panel
+          panelMode="channels"
+          class="block h-full w-full"
+        />
+      </aside>
+
       <!-- Chat Area -->
-      <main class="relative flex-1 min-w-0">
+      <main class="relative min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
         @if (!isVoiceWorkspaceExpanded()) {
           @if (hasTextChannels()) {
             <div class="h-full overflow-hidden">
@@ -45,20 +33,23 @@
         <app-voice-workspace />
       </main>
 
-      <!-- Sidebar always visible -->
-      <aside class="w-80 flex-shrink-0 border-l border-border">
-        <app-rooms-side-panel class="h-full" />
+      <aside class="flex min-h-0 w-[17rem] shrink-0 overflow-hidden border-l border-border bg-card">
+        <app-rooms-side-panel
+          panelMode="users"
+          [showVoiceControls]="false"
+          class="block h-full w-full"
+        />
       </aside>
     </div>
   } @else {
     <!-- No Room Selected -->
-    <div class="flex-1 flex items-center justify-center">
+    <div class="flex flex-1 items-center justify-center bg-background px-6">
       <div class="text-center text-muted-foreground">
         <ng-icon
           name="lucideHash"
-          class="w-16 h-16 mx-auto mb-4 opacity-30"
+          class="mx-auto mb-4 h-16 w-16 opacity-30"
         />
-        <h2 class="text-xl font-medium mb-2">No room selected</h2>
+        <h2 class="mb-2 text-xl font-medium">No room selected</h2>
         <p class="text-sm">Select or create a room to start chatting</p>
       </div>
     </div>