Fix private calls

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversations-panel.component.html

@@ -0,0 +1,46 @@
+<aside
+  appThemeNode="dmConversationsPanel"
+  class="flex min-h-0 overflow-hidden border-r border-border bg-card"
+  [ngStyle]="listPanelStyles()"
+>
+  <section class="flex h-full w-full min-w-0 flex-col">
+    <header
+      appThemeNode="dmConversationsHeader"
+      class="flex h-14 shrink-0 items-center gap-2 border-b border-border px-3"
+    >
+      <div class="grid h-8 w-8 place-items-center rounded-lg bg-secondary text-muted-foreground">
+        <ng-icon
+          name="lucideMessageCircle"
+          class="h-4 w-4"
+        />
+      </div>
+      <div class="min-w-0">
+        <h1 class="truncate text-sm font-semibold text-foreground">Direct Messages</h1>
+        <p class="text-xs text-muted-foreground">{{ directMessages.conversations().length }} chats</p>
+      </div>
+    </header>
+
+    <div
+      appThemeNode="dmConversationList"
+      class="min-h-0 flex-1 overflow-y-auto p-2"
+    >
+      @if (directMessages.conversations().length === 0) {
+        <div class="flex h-full items-center justify-center px-4 text-center text-sm text-muted-foreground">No direct messages yet.</div>
+      } @else {
+        <div class="space-y-1">
+          <app-dm-conversation-item
+            *ngFor="let conversation of directMessages.conversations(); trackBy: trackConversationId"
+            [conversation]="conversation"
+          ></app-dm-conversation-item>
+        </div>
+      }
+    </div>
+
+    <div
+      appThemeNode="dmVoiceControlsArea"
+      class="border-t border-border px-2 py-3"
+    >
+      <app-voice-controls />
+    </div>
+  </section>
+</aside>