Screensharing rework

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

src/app/shared/components/screen-share-quality-dialog/screen-share-quality-dialog.component.html

@@ -0,0 +1,86 @@
+<div
+  class="fixed inset-0 z-[110] bg-black/70 backdrop-blur-sm"
+  (click)="cancelled.emit(undefined)"
+  (keydown.enter)="cancelled.emit(undefined)"
+  (keydown.space)="cancelled.emit(undefined)"
+  role="button"
+  tabindex="0"
+  aria-label="Close screen share quality dialog"
+></div>
+
+<div class="fixed inset-0 z-[111] flex items-center justify-center p-4 pointer-events-none">
+  <div
+    class="pointer-events-auto w-full max-w-2xl rounded-2xl border border-border bg-card shadow-2xl"
+    (click)="$event.stopPropagation()"
+    (keydown.enter)="$event.stopPropagation()"
+    (keydown.space)="$event.stopPropagation()"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+  >
+    <div class="border-b border-border p-5">
+      <h3 class="text-lg font-semibold text-foreground">Choose screen share quality</h3>
+      <p class="mt-1 text-sm text-muted-foreground">
+        Pick the profile that best matches what you are sharing. You can change the default later in Voice settings.
+      </p>
+      @if (includeSystemAudio()) {
+        <p class="mt-3 rounded-lg bg-primary/10 px-3 py-2 text-xs text-primary">
+          Computer audio will be shared. MeToYou audio is filtered when supported, and your microphone stays on its normal voice track.
+        </p>
+      }
+    </div>
+
+    <div class="grid gap-3 p-5 md:grid-cols-2">
+      @for (option of qualityOptions; track option.id) {
+        <button
+          type="button"
+          (click)="chooseQuality(option.id)"
+          class="rounded-xl border px-4 py-4 text-left transition-colors"
+          [class.border-primary]="activeQuality() === option.id"
+          [class.bg-primary/10]="activeQuality() === option.id"
+          [class.text-primary]="activeQuality() === option.id"
+          [class.border-border]="activeQuality() !== option.id"
+          [class.bg-secondary/30]="activeQuality() !== option.id"
+          [class.text-foreground]="activeQuality() !== option.id"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <p class="font-medium">{{ option.label }}</p>
+              <p class="mt-1 text-sm text-muted-foreground">
+                {{ option.description }}
+              </p>
+            </div>
+            <span
+              class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border text-[10px]"
+              [class.border-primary]="activeQuality() === option.id"
+              [class.bg-primary]="activeQuality() === option.id"
+              [class.text-primary-foreground]="activeQuality() === option.id"
+              [class.border-border]="activeQuality() !== option.id"
+            >
+              @if (activeQuality() === option.id) {
+                ✓
+              }
+            </span>
+          </div>
+        </button>
+      }
+    </div>
+
+    <div class="flex items-center justify-end gap-2 border-t border-border p-4">
+      <button
+        type="button"
+        (click)="cancelled.emit(undefined)"
+        class="rounded-lg bg-secondary px-4 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        (click)="confirm()"
+        class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Start sharing
+      </button>
+    </div>
+  </div>
+</div>

src/app/shared/components/screen-share-quality-dialog/screen-share-quality-dialog.component.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  HostListener,
+  OnInit,
+  input,
+  output,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ScreenShareQuality, SCREEN_SHARE_QUALITY_OPTIONS } from '../../../core/services/webrtc/screen-share.config';
+
+@Component({
+  selector: 'app-screen-share-quality-dialog',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './screen-share-quality-dialog.component.html'
+})
+export class ScreenShareQualityDialogComponent implements OnInit {
+  selectedQuality = input.required<ScreenShareQuality>();
+  includeSystemAudio = input(false);
+
+  confirmed = output<ScreenShareQuality>();
+  cancelled = output<undefined>();
+
+  readonly qualityOptions = SCREEN_SHARE_QUALITY_OPTIONS;
+  readonly activeQuality = signal<ScreenShareQuality>('balanced');
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    this.cancelled.emit(undefined);
+  }
+
+  ngOnInit(): void {
+    this.activeQuality.set(this.selectedQuality());
+  }
+
+  chooseQuality(quality: ScreenShareQuality): void {
+    this.activeQuality.set(quality);
+  }
+
+  confirm(): void {
+    this.confirmed.emit(this.activeQuality());
+  }
+}