49 lines
1.6 KiB
HTML
49 lines
1.6 KiB
HTML
<aside
|
|
appThemeNode="dmConversationsPanel"
|
|
class="flex min-h-0 w-full min-w-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">
|
|
@for (conversation of directMessages.conversations(); track trackConversationId($index, conversation)) {
|
|
<app-dm-conversation-item
|
|
[conversation]="conversation"
|
|
(conversationOpened)="conversationSelected.emit($event)"
|
|
/>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div
|
|
appThemeNode="dmVoiceControlsArea"
|
|
class="border-t border-border px-2 py-3"
|
|
>
|
|
<app-voice-controls />
|
|
</div>
|
|
</section>
|
|
</aside>
|