Screensharing rework

Split Linux screensharing audio tracks, Rework screensharing functionality and layout
This will need some refactoring soon

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

@@ -1,23 +1,36 @@
 <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>
-    </div>
+    @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">
       <!-- Chat Area -->
-      <main class="flex-1 flex flex-col min-w-0">
-        <!-- Screen Share Viewer -->
-        <app-screen-share-viewer />
-
-        <!-- Messages -->
-        <div class="flex-1 overflow-hidden">
+      <main class="relative flex-1 min-w-0">
+        <div
+          class="h-full overflow-hidden"
+          [class.hidden]="isVoiceWorkspaceExpanded()"
+        >
           <app-chat-messages />
         </div>
+
+        <app-screen-share-workspace />
       </main>
 
       <!-- Sidebar always visible -->