Fix private calls

toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.html

@@ -13,10 +13,25 @@
       [showStatusBadge]="true"
       size="md"
     />
-    <div class="min-w-0">
+    <div class="min-w-0 flex-1">
       <h1 class="truncate text-base font-semibold text-foreground">{{ peerName() }}</h1>
-      <p class="text-xs text-muted-foreground">Direct Message</p>
+      <p class="text-xs text-muted-foreground">{{ isGroupConversation() ? 'Group Chat' : 'Direct Message' }}</p>
     </div>
+    @if (showCallButton() && conversation()) {
+      <button
+        type="button"
+        class="grid h-9 w-9 place-items-center rounded-md bg-emerald-500 text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
+        [disabled]="!canCallConversation()"
+        [attr.aria-label]="'Call ' + peerName()"
+        [title]="'Call ' + peerName()"
+        (click)="callConversation()"
+      >
+        <ng-icon
+          [name]="peerCallIcon()"
+          class="h-4 w-4"
+        />
+      </button>
+    }
   </header>
 
   @if (conversation()) {
@@ -58,6 +73,15 @@
       appThemeNode="chatComposerBar"
       class="chat-bottom-bar absolute bottom-0 left-0 right-2 z-10 bg-background/85 backdrop-blur-md"
     >
+      @if (typingUsers().length > 0) {
+        <div
+          data-testid="dm-typing-indicator"
+          class="px-4 pb-1 text-xs text-muted-foreground"
+        >
+          {{ typingUsers().join(', ') }} {{ typingUsers().length === 1 ? 'is' : 'are' }} typing...
+        </div>
+      }
+
       <app-chat-message-composer
         [replyTo]="replyTo()"
         [showKlipyGifPicker]="showGifPicker()"
@@ -65,6 +89,7 @@
         [klipySignalSource]="null"
         [textareaTestId]="'dm-input'"
         (messageSubmitted)="handleMessageSubmitted($event)"
+        (typingStarted)="handleTypingStarted()"
         (replyCleared)="clearReply()"
         (heightChanged)="composerBottomPadding.set($event + 20)"
         (klipyGifPickerToggleRequested)="toggleGifPicker()"