Fix private calls

toju-app/src/app/features/direct-call/private-call-controls.component.html

@@ -0,0 +1,71 @@
+<div class="flex w-full flex-wrap items-center justify-center gap-3 rounded-2xl bg-background/75 px-4 py-3 backdrop-blur">
+  @if (!connected()) {
+    <button
+      type="button"
+      class="inline-flex h-12 items-center gap-2 rounded-full bg-emerald-500 px-6 text-sm font-semibold text-white transition-colors hover:bg-emerald-600"
+      (click)="joinRequested.emit()"
+    >
+      <ng-icon
+        name="lucidePhone"
+        class="h-5 w-5"
+      />
+      Join call
+    </button>
+  }
+
+  <button
+    type="button"
+    class="grid h-12 w-12 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-45"
+    [disabled]="!connected()"
+    (click)="muteToggled.emit()"
+    [attr.aria-label]="muted() ? 'Unmute' : 'Mute'"
+    [title]="muted() ? 'Unmute' : 'Mute'"
+  >
+    <ng-icon
+      [name]="muted() ? 'lucideMicOff' : 'lucideMic'"
+      class="h-5 w-5"
+    />
+  </button>
+
+  <button
+    type="button"
+    class="grid h-12 w-12 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-45"
+    [disabled]="!connected()"
+    (click)="cameraToggled.emit()"
+    [attr.aria-label]="cameraEnabled() ? 'Turn camera off' : 'Turn camera on'"
+    [title]="cameraEnabled() ? 'Turn camera off' : 'Turn camera on'"
+  >
+    <ng-icon
+      [name]="cameraEnabled() ? 'lucideVideoOff' : 'lucideVideo'"
+      class="h-5 w-5"
+    />
+  </button>
+
+  <button
+    type="button"
+    class="grid h-12 w-12 place-items-center rounded-full bg-secondary text-foreground transition-colors hover:bg-secondary/80 disabled:opacity-45"
+    [disabled]="!connected()"
+    (click)="screenShareToggled.emit()"
+    [attr.aria-label]="screenSharing() ? 'Stop sharing screen' : 'Share screen'"
+    [title]="screenSharing() ? 'Stop sharing screen' : 'Share screen'"
+  >
+    <ng-icon
+      [name]="screenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
+      class="h-5 w-5"
+    />
+  </button>
+
+  <button
+    type="button"
+    class="grid h-12 w-12 place-items-center rounded-full bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15 disabled:opacity-45"
+    [disabled]="!connected()"
+    (click)="leaveRequested.emit()"
+    aria-label="Leave call"
+    title="Leave call"
+  >
+    <ng-icon
+      name="lucidePhoneOff"
+      class="h-5 w-5"
+    />
+  </button>
+</div>