490 lines
19 KiB
HTML
490 lines
19 KiB
HTML
<!-- eslint-disable @angular-eslint/template/button-has-type, @angular-eslint/template/cyclomatic-complexity -->
|
|
<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">{{ knownUserCount() }}</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()"
|
|
[title]="isCurrentRoom(ch.id) ? 'Open stream workspace' : 'Join voice channel'"
|
|
>
|
|
<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 (isCurrentRoom(ch.id)) {
|
|
<span class="rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
|
|
{{ isVoiceWorkspaceExpanded() ? 'Open' : 'View' }}
|
|
</span>
|
|
} @else 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"
|
|
(contextmenu)="openVoiceUserVolumeMenu($event, u)"
|
|
>
|
|
<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'
|
|
: voiceActivity.isSpeaking(u.oderId || u.id)()
|
|
? 'ring-2 ring-green-400 shadow-[0_0_8px_2px_rgba(74,222,128,0.6)]'
|
|
: 'ring-2 ring-green-500/40'
|
|
"
|
|
/>
|
|
<span class="text-sm text-foreground/80 truncate flex-1">{{ u.displayName }}</span>
|
|
<!-- Ping latency indicator -->
|
|
@if (u.id !== currentUser()?.id) {
|
|
<span
|
|
class="w-2 h-2 rounded-full shrink-0"
|
|
[class]="getPingColorClass(u)"
|
|
[title]="getPeerLatency(u) !== null ? getPeerLatency(u) + ' ms' : 'Measuring...'"
|
|
></span>
|
|
}
|
|
@if (u.screenShareState?.isSharing || isUserSharing(u.id)) {
|
|
<button
|
|
(click)="viewStream(u.oderId || 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"
|
|
/>
|
|
}
|
|
@if (isUserLocallyMuted(u)) {
|
|
<ng-icon
|
|
name="lucideVolumeX"
|
|
class="w-4 h-4 text-destructive"
|
|
title="Muted by you"
|
|
/>
|
|
}
|
|
</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))) {
|
|
<button
|
|
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 hover:bg-red-600 transition-colors"
|
|
(click)="viewStream(currentUser()!.oderId || currentUser()!.id); $event.stopPropagation()"
|
|
>
|
|
<ng-icon
|
|
name="lucideMonitor"
|
|
class="w-2.5 h-2.5"
|
|
/>
|
|
LIVE
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Other Online Users -->
|
|
@if (onlineRoomUsers().length > 0) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">Online - {{ onlineRoomUsers().length }}</h4>
|
|
<div class="space-y-1">
|
|
@for (user of onlineRoomUsers(); 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.oderId || 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>
|
|
}
|
|
|
|
<!-- Offline Users -->
|
|
@if (offlineRoomMembers().length > 0) {
|
|
<div class="mb-4">
|
|
<h4 class="text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2 px-1">Offline - {{ offlineRoomMembers().length }}</h4>
|
|
<div class="space-y-1">
|
|
@for (member of offlineRoomMembers(); track member.oderId || member.id) {
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded opacity-80">
|
|
<div class="relative">
|
|
<app-user-avatar
|
|
[name]="member.displayName"
|
|
[avatarUrl]="member.avatarUrl"
|
|
size="sm"
|
|
/>
|
|
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-gray-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/80 truncate">{{ member.displayName }}</p>
|
|
@if (member.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 (member.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 (member.role === 'moderator') {
|
|
<span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded font-medium">Mod</span>
|
|
}
|
|
</div>
|
|
<p class="text-[10px] text-muted-foreground">Offline</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- No other users message -->
|
|
@if (onlineRoomUsers().length === 0 && offlineRoomMembers().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>
|
|
}
|
|
|
|
<!-- Per-user volume context menu -->
|
|
@if (showVolumeMenu()) {
|
|
<app-user-volume-menu
|
|
[x]="volumeMenuX()"
|
|
[y]="volumeMenuY()"
|
|
[peerId]="volumeMenuPeerId()"
|
|
[displayName]="volumeMenuDisplayName()"
|
|
(closed)="showVolumeMenu.set(false)"
|
|
/>
|
|
}
|
|
|
|
<!-- 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>
|
|
}
|