67 lines
2.2 KiB
HTML
67 lines
2.2 KiB
HTML
<div class="h-full flex flex-col bg-background">
|
|
@if (currentRoom()) {
|
|
<!-- Channel header bar -->
|
|
@if (!isVoiceWorkspaceExpanded()) {
|
|
<div class="h-12 flex items-center gap-2 px-4 border-b border-border bg-card flex-shrink-0">
|
|
<ng-icon
|
|
[name]="isVoiceWorkspaceExpanded() ? 'lucideMonitor' : 'lucideHash'"
|
|
class="w-4 h-4 text-muted-foreground"
|
|
/>
|
|
<span class="font-medium text-foreground text-sm">{{ headerTitle() }}</span>
|
|
|
|
@if (isVoiceWorkspaceExpanded()) {
|
|
<span class="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-primary">
|
|
Voice streams
|
|
</span>
|
|
}
|
|
|
|
<div class="flex-1"></div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<!-- Chat Area -->
|
|
<main class="relative flex-1 min-w-0">
|
|
@if (!isVoiceWorkspaceExpanded()) {
|
|
@if (hasTextChannels()) {
|
|
<div class="h-full overflow-hidden">
|
|
<app-chat-messages />
|
|
</div>
|
|
} @else {
|
|
<div class="flex h-full items-center justify-center px-6">
|
|
<div class="max-w-md text-center text-muted-foreground">
|
|
<ng-icon
|
|
name="lucideHash"
|
|
class="mx-auto mb-4 h-16 w-16 opacity-30"
|
|
/>
|
|
<h2 class="mb-2 text-xl font-medium text-foreground">No text channels</h2>
|
|
<p class="text-sm">There are no existing text channels currently.</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<app-voice-workspace />
|
|
</main>
|
|
|
|
<!-- Sidebar always visible -->
|
|
<aside class="w-80 flex-shrink-0 border-l border-border">
|
|
<app-rooms-side-panel class="h-full" />
|
|
</aside>
|
|
</div>
|
|
} @else {
|
|
<!-- No Room Selected -->
|
|
<div class="flex-1 flex items-center justify-center">
|
|
<div class="text-center text-muted-foreground">
|
|
<ng-icon
|
|
name="lucideHash"
|
|
class="w-16 h-16 mx-auto mb-4 opacity-30"
|
|
/>
|
|
<h2 class="text-xl font-medium mb-2">No room selected</h2>
|
|
<p class="text-sm">Select or create a room to start chatting</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|