311 lines
14 KiB
HTML
311 lines
14 KiB
HTML
<aside class="w-80 bg-card h-full flex flex-col">
|
|
<!-- Minimalistic header with tabs -->
|
|
<div class="border-b border-border">
|
|
<div class="flex items-center">
|
|
<!-- Tab buttons -->
|
|
<button
|
|
(click)="activeTab.set('channels')"
|
|
class="flex-1 flex items-center justify-center gap-1.5 px-3 py-3 text-sm transition-colors border-b-2"
|
|
[class.border-primary]="activeTab() === 'channels'"
|
|
[class.text-foreground]="activeTab() === 'channels'"
|
|
[class.border-transparent]="activeTab() !== 'channels'"
|
|
[class.text-muted-foreground]="activeTab() !== 'channels'"
|
|
[class.hover:text-foreground]="activeTab() !== 'channels'"
|
|
>
|
|
<ng-icon name="lucideHash" class="w-4 h-4" />
|
|
<span>Channels</span>
|
|
</button>
|
|
<button
|
|
(click)="activeTab.set('users')"
|
|
class="flex-1 flex items-center justify-center gap-1.5 px-3 py-3 text-sm transition-colors border-b-2"
|
|
[class.border-primary]="activeTab() === 'users'"
|
|
[class.text-foreground]="activeTab() === 'users'"
|
|
[class.border-transparent]="activeTab() !== 'users'"
|
|
[class.text-muted-foreground]="activeTab() !== 'users'"
|
|
[class.hover:text-foreground]="activeTab() !== 'users'"
|
|
>
|
|
<ng-icon name="lucideUsers" class="w-4 h-4" />
|
|
<span>Users</span>
|
|
<span class="text-xs px-1.5 py-0.5 rounded-full bg-primary/15 text-primary">{{ onlineUsers().length }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Channels View -->
|
|
@if (activeTab() === 'channels') {
|
|
<div class="flex-1 overflow-auto">
|
|
<!-- Text Channels -->
|
|
<div class="p-3">
|
|
<div class="flex items-center justify-between mb-2 px-1">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium">Text Channels</h4>
|
|
@if (canManageChannels()) {
|
|
<button (click)="createChannel('text')" class="text-muted-foreground hover:text-foreground transition-colors" title="Create Text Channel">
|
|
<ng-icon name="lucidePlus" class="w-3.5 h-3.5" />
|
|
</button>
|
|
}
|
|
</div>
|
|
<div class="space-y-0.5">
|
|
@for (ch of textChannels(); track ch.id) {
|
|
<button
|
|
class="w-full px-2 py-1.5 text-sm rounded flex items-center gap-2 text-left transition-colors"
|
|
[class.bg-secondary]="activeChannelId() === ch.id"
|
|
[class.text-foreground]="activeChannelId() === ch.id"
|
|
[class.font-medium]="activeChannelId() === ch.id"
|
|
[class.text-foreground/60]="activeChannelId() !== ch.id"
|
|
[class.hover:bg-secondary/60]="activeChannelId() !== ch.id"
|
|
[class.hover:text-foreground/80]="activeChannelId() !== ch.id"
|
|
(click)="selectTextChannel(ch.id)"
|
|
(contextmenu)="openChannelContextMenu($event, ch)"
|
|
>
|
|
<span class="text-muted-foreground text-base">#</span>
|
|
@if (renamingChannelId() === ch.id) {
|
|
<input
|
|
#renameInput
|
|
type="text"
|
|
[value]="ch.name"
|
|
(keydown.enter)="confirmRename($event)"
|
|
(keydown.escape)="cancelRename()"
|
|
(blur)="confirmRename($event)"
|
|
class="flex-1 bg-secondary border border-border rounded px-1 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
|
|
(click)="$event.stopPropagation()"
|
|
/>
|
|
} @else {
|
|
<span class="truncate">{{ ch.name }}</span>
|
|
}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voice Channels -->
|
|
<div class="p-3 pt-0">
|
|
<div class="flex items-center justify-between mb-2 px-1">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium">Voice Channels</h4>
|
|
@if (canManageChannels()) {
|
|
<button (click)="createChannel('voice')" class="text-muted-foreground hover:text-foreground transition-colors" title="Create Voice Channel">
|
|
<ng-icon name="lucidePlus" class="w-3.5 h-3.5" />
|
|
</button>
|
|
}
|
|
</div>
|
|
@if (!voiceEnabled()) {
|
|
<p class="text-sm text-muted-foreground px-2 py-2">Voice is disabled by host</p>
|
|
}
|
|
<div class="space-y-1">
|
|
@for (ch of voiceChannels(); track ch.id) {
|
|
<div>
|
|
<button
|
|
class="w-full px-2 py-1.5 text-sm rounded hover:bg-secondary/60 flex items-center justify-between text-left transition-colors"
|
|
(click)="joinVoice(ch.id)"
|
|
(contextmenu)="openChannelContextMenu($event, ch)"
|
|
[class.bg-secondary/40]="isCurrentRoom(ch.id)"
|
|
[disabled]="!voiceEnabled()"
|
|
>
|
|
<span class="flex items-center gap-2 text-foreground/80">
|
|
<ng-icon name="lucideMic" class="w-4 h-4 text-muted-foreground" />
|
|
@if (renamingChannelId() === ch.id) {
|
|
<input
|
|
#renameInput
|
|
type="text"
|
|
[value]="ch.name"
|
|
(keydown.enter)="confirmRename($event)"
|
|
(keydown.escape)="cancelRename()"
|
|
(blur)="confirmRename($event)"
|
|
class="flex-1 bg-secondary border border-border rounded px-1 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
|
|
(click)="$event.stopPropagation()"
|
|
/>
|
|
} @else {
|
|
<span>{{ ch.name }}</span>
|
|
}
|
|
</span>
|
|
@if (voiceOccupancy(ch.id) > 0) {
|
|
<span class="text-xs text-muted-foreground">{{ voiceOccupancy(ch.id) }}</span>
|
|
}
|
|
</button>
|
|
<!-- Voice users connected to this channel -->
|
|
@if (voiceUsersInRoom(ch.id).length > 0) {
|
|
<div class="ml-5 mt-1 space-y-1">
|
|
@for (u of voiceUsersInRoom(ch.id); track u.id) {
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40">
|
|
<app-user-avatar
|
|
[name]="u.displayName"
|
|
[avatarUrl]="u.avatarUrl"
|
|
size="xs"
|
|
[ringClass]="u.voiceState?.isDeafened ? 'ring-2 ring-red-500' : u.voiceState?.isMuted ? 'ring-2 ring-yellow-500' : 'ring-2 ring-green-500'"
|
|
/>
|
|
<span class="text-sm text-foreground/80 truncate flex-1">{{ u.displayName }}</span>
|
|
@if (u.screenShareState?.isSharing || isUserSharing(u.id)) {
|
|
<button
|
|
(click)="viewStream(u.id); $event.stopPropagation()"
|
|
class="px-1.5 py-0.5 text-[10px] font-bold bg-red-500 text-white rounded animate-pulse hover:bg-red-600 transition-colors"
|
|
>
|
|
LIVE
|
|
</button>
|
|
}
|
|
@if (u.voiceState?.isMuted) {
|
|
<ng-icon name="lucideMicOff" class="w-4 h-4 text-muted-foreground" />
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Users View -->
|
|
@if (activeTab() === 'users') {
|
|
<div class="flex-1 overflow-auto p-3">
|
|
<!-- Current User (You) -->
|
|
@if (currentUser()) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">You</h4>
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded bg-secondary/30">
|
|
<div class="relative">
|
|
<app-user-avatar [name]="currentUser()?.displayName || '?'" [avatarUrl]="currentUser()?.avatarUrl" size="sm" />
|
|
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 ring-2 ring-card"></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-foreground truncate">{{ currentUser()?.displayName }}</p>
|
|
<div class="flex items-center gap-2">
|
|
@if (currentUser()?.voiceState?.isConnected) {
|
|
<p class="text-[10px] text-muted-foreground flex items-center gap-1">
|
|
<ng-icon name="lucideMic" class="w-2.5 h-2.5" />
|
|
In voice
|
|
</p>
|
|
}
|
|
@if (currentUser()?.screenShareState?.isSharing || (currentUser()?.id && isUserSharing(currentUser()!.id))) {
|
|
<span class="text-[10px] bg-red-500 text-white px-1.5 py-0.5 rounded-sm font-medium flex items-center gap-1 animate-pulse">
|
|
<ng-icon name="lucideMonitor" class="w-2.5 h-2.5" />
|
|
LIVE
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Other Online Users -->
|
|
@if (onlineUsersFiltered().length > 0) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">
|
|
Online — {{ onlineUsersFiltered().length }}
|
|
</h4>
|
|
<div class="space-y-1">
|
|
@for (user of onlineUsersFiltered(); track user.id) {
|
|
<div
|
|
class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-secondary/40 group/user"
|
|
(contextmenu)="openUserContextMenu($event, user)"
|
|
>
|
|
<div class="relative">
|
|
<app-user-avatar [name]="user.displayName" [avatarUrl]="user.avatarUrl" size="sm" />
|
|
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 ring-2 ring-card"></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-1.5">
|
|
<p class="text-sm text-foreground truncate">{{ user.displayName }}</p>
|
|
@if (user.role === 'host') {
|
|
<span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1 py-0.5 rounded font-medium">Owner</span>
|
|
} @else if (user.role === 'admin') {
|
|
<span class="text-[10px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded font-medium">Admin</span>
|
|
} @else if (user.role === 'moderator') {
|
|
<span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded font-medium">Mod</span>
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
@if (user.voiceState?.isConnected) {
|
|
<p class="text-[10px] text-muted-foreground flex items-center gap-1">
|
|
<ng-icon name="lucideMic" class="w-2.5 h-2.5" />
|
|
In voice
|
|
</p>
|
|
}
|
|
@if (user.screenShareState?.isSharing || isUserSharing(user.id)) {
|
|
<button
|
|
(click)="viewStream(user.id); $event.stopPropagation()"
|
|
class="text-[10px] bg-red-500 text-white px-1.5 py-0.5 rounded-sm font-medium hover:bg-red-600 transition-colors flex items-center gap-1 animate-pulse"
|
|
>
|
|
<ng-icon name="lucideMonitor" class="w-2.5 h-2.5" />
|
|
LIVE
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- No other users message -->
|
|
@if (onlineUsersFiltered().length === 0) {
|
|
<div class="text-center py-4 text-muted-foreground">
|
|
<p class="text-sm">No other users in this server</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<!-- Voice controls pinned to sidebar bottom (hidden when floating controls visible) -->
|
|
@if (voiceEnabled()) {
|
|
<div [class.invisible]="showFloatingControls()">
|
|
<app-voice-controls />
|
|
</div>
|
|
}
|
|
</aside>
|
|
|
|
<!-- Channel context menu -->
|
|
@if (showChannelMenu()) {
|
|
<app-context-menu [x]="channelMenuX()" [y]="channelMenuY()" (closed)="closeChannelMenu()" [width]="'w-44'">
|
|
<button (click)="resyncMessages()" class="context-menu-item">Resync Messages</button>
|
|
@if (canManageChannels()) {
|
|
<div class="context-menu-divider"></div>
|
|
<button (click)="startRename()" class="context-menu-item">Rename Channel</button>
|
|
<button (click)="deleteChannel()" class="context-menu-item-danger">Delete Channel</button>
|
|
}
|
|
</app-context-menu>
|
|
}
|
|
|
|
<!-- User context menu (kick / role management) -->
|
|
@if (showUserMenu()) {
|
|
<app-context-menu [x]="userMenuX()" [y]="userMenuY()" (closed)="closeUserMenu()">
|
|
@if (isAdmin()) {
|
|
@if (contextMenuUser()?.role === 'member') {
|
|
<button (click)="changeUserRole('moderator')" class="context-menu-item">Promote to Moderator</button>
|
|
<button (click)="changeUserRole('admin')" class="context-menu-item">Promote to Admin</button>
|
|
}
|
|
@if (contextMenuUser()?.role === 'moderator') {
|
|
<button (click)="changeUserRole('admin')" class="context-menu-item">Promote to Admin</button>
|
|
<button (click)="changeUserRole('member')" class="context-menu-item">Demote to Member</button>
|
|
}
|
|
@if (contextMenuUser()?.role === 'admin') {
|
|
<button (click)="changeUserRole('member')" class="context-menu-item">Demote to Member</button>
|
|
}
|
|
<div class="context-menu-divider"></div>
|
|
<button (click)="kickUserAction()" class="context-menu-item-danger">Kick User</button>
|
|
} @else {
|
|
<div class="context-menu-empty">No actions available</div>
|
|
}
|
|
</app-context-menu>
|
|
}
|
|
|
|
<!-- Create channel dialog -->
|
|
@if (showCreateChannelDialog()) {
|
|
<app-confirm-dialog
|
|
[title]="'Create ' + (createChannelType() === 'text' ? 'Text' : 'Voice') + ' Channel'"
|
|
confirmLabel="Create"
|
|
(confirmed)="confirmCreateChannel()"
|
|
(cancelled)="cancelCreateChannel()"
|
|
>
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newChannelName"
|
|
placeholder="Channel name"
|
|
class="w-full px-3 py-2 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
|
|
(keydown.enter)="confirmCreateChannel()"
|
|
/>
|
|
</app-confirm-dialog>
|
|
}
|